Submit your widget

simpleGal - A simple image gallery jQuery plugin

Created 5 years ago   Views 24932   downloads 5351    Author steverydz
simpleGal - A simple image gallery jQuery plugin
View DemoDownload
82
Share |

How to use

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

Write your HTML

Place your thubmnails within either a divol 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"
});