Skip to content
A simple jQuery image gallery plugin
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.editorconfig
.gitignore
.jshintrc
.travis.yml
CONTRIBUTING.md
Gruntfile.js
README.md
bower.json
package.json
simpleGal.jquery.json

README.md

simpleGal

Build Status

A simple image gallery jQuery plug-in.

How to use

Checkout the demo to see this plug-in in action.

Write your HTML

Place your thubmnails within either a div, ol or ul like so:

<div class="thumbnails">
  <a href="path/to/larger-image.jpg">
    <img src="path/to/thumbnail.jpg" alt="Thumbnail">
  </a>
  <a href="path/to/larger-image.jpg">
    <img src="path/to/thumbnail.jpg" alt="Thumbnail">
  </a>
  <a href="path/to/larger-image.jpg">
    <img src="path/to/thumbnail.jpg" alt="Thumbnail">
  </a>
</div>

or

<ul class="thumbnails">
  <li>
    <a href="path/to/larger-image.jpg">
      <img src="path/to/thumbnail.jpg" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="path/to/larger-image.jpg">
      <img src="path/to/thumbnail.jpg" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="path/to/larger-image.jpg">
      <img src="path/to/thumbnail.jpg" alt="Thumbnail">
    </a>
  </li>
</ul>

or

<ol class="thumbnails">
  <li>
    <a href="path/to/larger-image.jpg">
      <img src="path/to/thumbnail.jpg" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="path/to/larger-image.jpg">
      <img src="path/to/thumbnail.jpg" alt="Thumbnail">
    </a>
  </li>
  <li>
    <a href="path/to/larger-image.jpg">
      <img src="path/to/thumbnail.jpg" alt="Thumbnail">
    </a>
  </li>
</ol>

You can give the list a class or ID of anything you like.

Set a placeholder image

Then create a placeholder for your main image like so:

<img src="path/to/placeholder-image.jpg" alt="Placeholder" class="placeholder">

Again, you can give this image a class or ID of anything you like.

Call the plug-in method

In your JS file, call the function using your class or ID:

$(".thumbnails").simpleGal();

If you have given the main image a class of anything other than placeholder or used an ID then you must declare that in the options:

$(".thumbnails").simpleGal({
  mainImage: ".your-main-image-class-or-ID"
});

Over to you

That's it. You should be ready to roll.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.