Skip to content

Demo of fully customisable, easy-to-use, slideshow code.

Notifications You must be signed in to change notification settings

front-end-materials/gallery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gallery

This is a responsive template for creating easy to use galleries. Just copy the code into your HTML page and customise the CSS variables as needed.

That's it!

Instructions

  1. Copy this small chunk of HTML into your work
  <section class="gallery">
    <div class="img_row"></div>
    <nav class="mid"></nav>
    <nav class="prev">&lt;</nav>
    <nav class="next">&gt;</nav>
  </section>
  1. link your CSS file <link rel="stylesheet" href="styles/styles.css">

  2. add these extra bits just before the end of your html file

  <style id="extra_style"></style>
  <style id="input_style"></style>
  <script src="scripts/hammer.min.js"></script>
  <script src="scripts/scripts.js"></script>
</body>
</html>
  1. copy any CSS that contains the .gallery class into your CSS file, take care to include the styles within the @media query at the end as well

  2. customise the CSS variables at the top of the CSS file with the relevant styles you'd like. Use the Gallery Helper Tool to find the right variables values

  3. copy the two JavaScript files over

  4. customise the list of images at the top of the scripts.js file with the images you would like to feature in your gallery. The first string is the file name and the second string is the alt attribute, which is a short description of the image

const image_list = [
  ["imgs/img1.jpg", "Cold mountains from high above"],
  ["imgs/img2.jpg", "Flowers or leaves at night"],
  ["imgs/img3.jpg", "Abstract art"],
  ["imgs/img4.jpg", "Neon light in a bar"],
  ["imgs/img5.jpg", "Red cloud in sky"]
];

That's it!

About

Demo of fully customisable, easy-to-use, slideshow code.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published