Skip to content

front-end-materials/gallery

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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