Image Gallery 2011

Demo | Demo with white background

Bookmark and Share

Overview

This is a search engine friendly image gallery script.

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download

Demo

Click to open demo in a separate window.

©The pictures in the demo has been published with permission by Scott Peck. For more stunning photos, please visit his website ScottPeckPhoto.com.

Configuration

Step 1 - Use HTML to specify the content of your image gallery

Example:

<div id="dg-image-gallery" class="dg-image-gallery">
  <!-- one dg-image-gallery-image for each picture -->
   <div class="dg-image-gallery-image">
     <a class="dg-image-gallery-link" href="http://www.dhtmlgoodies.com">DHTMLGoodies.com</a>
     <img class="dg-image-gallery-thumb" src="demo-images/thumb_1.gif">
     <span class="dg-image-gallery-large-image-path">demo-images/large1.jpg</span>
     <span class="dg-image-gallery-caption">Siberian Iris</span>
   </div>
   <div class="dg-image-gallery-image">
     <img class="dg-image-gallery-thumb" src="demo-images/thumb_2.gif">
     <span class="dg-image-gallery-large-image-path">demo-images/large2.jpg</span>
     <span class="dg-image-gallery-caption">Double Stargazers</span>
   </div>
   <div class="dg-image-gallery-image">
     <img class="dg-image-gallery-thumb" src="demo-images/thumb_3.gif">
     <span class="dg-image-gallery-large-image-path">demo-images/large3.jpg</span>
     <span class="dg-image-gallery-caption">Luna 1</span>
   </div>
   <div class="dg-image-gallery-image">
     <img class="dg-image-gallery-thumb" src="demo-images/thumb_4.gif">
     <span class="dg-image-gallery-large-image-path">demo-images/large4.jpg</span>
     <span class="dg-image-gallery-caption">White Delphinium</span>
   </div>
</div>

The code above contains all information for the image gallery. First we create a parent div:

<div id="dg-image-gallery" class="dg-image-gallery">

Inside this div, we create one block like this:

<div class="dg-image-gallery-image">
   <a class="dg-image-gallery-link" href="http://www.dhtmlgoodies.com">DHTMLGoodies.com</a>
   <img class="dg-image-gallery-thumb" src="demo-images/thumb_1.gif">
   <span class="dg-image-gallery-large-image-path">demo-images/large1.jpg</span>
   <span class="dg-image-gallery-caption">Siberian Iris</span>
</div>

for each picture in the gallery. The <A> tag is optional. If you have one, you will be navigated to this page by clicking on the large picture.

The IMG tag specifies path to the thumbnail(demo-images/thumb_1.gif). Path to the large picture is inserted as content inside <span class="dg-image-gallery-large-image-path">. Finally, we put caption inside <span class="dg-image-gallery-caption">.

To add pictures to the gallery, all you have to do is to create a block like this.

Create Javascript object

In it's simplest form, this is how the Javascript would look:

<script type="text/javascript">
var gallery = new DG.ImageGallery({
   el : 'dg-image-gallery'
});
</script>

We create a new instance of the DG.ImageGallery class. The "el" property refers to the id of the div created in the HTML above. 'dg-image-gallery' refers to to the id of <div id="dg-image-gallery" class="dg-image-gallery">

DG.ImageGallery supports several properties. This is an overview:

  • preload: True or false to preload large images (default = true).
  • loaderGif : Path to animated gif which will show while large images are being pre-loaded. Default : images/ajax-loader.gif. If you don't want to show this, set loaderGif to empty or false. If you don't want to use the gif following this script, you can create your own at ajaxload.info. Generate a file and save it as ajax-loader.gif inside the "images" folder.
  • startIndex: Index of first displayed picture(0 = first). This is an optional attribute
  • autoplay.enabled: true or false to enable or disable autoplay (default = true).
  • autoplay.pause: When autoplay is enabled, this property specifies how many seconds to wait between each picture (default = 3)
  • autoplay.rewind: False to automatically stop auto play on last picture, i.e. no auto rewind (default = true)
  • autoplay.buttons.start.txt: Eventual text representation for the "play" button. (Default = empty string)
  • autoplay.buttons.start.enabled: true or false to show or hide play button.
  • autoplay.buttons.stop.txt: Eventual text representation for the "stop" button. (Default = empty string)
  • autoplay.buttons.stop.enabled: true or false to show or hide stop button.
  • listeners: Handler for the event fired by the script. The script supports one event "clickpicture" which is fired when someone clicks on the active picture(large version). One example where this could be useful is when you want an even bigger version of the picture to be shown. The following data will be sent to the function registered as event handler:
    {
      index : <index of current picture - 0 = first>
      caption : <caption of current picture>
      src : <Image source of current picture>
      thumb : <Thumbnail source of current picture>
    }

    You will find an example on how to use this further down on this page.

Example:

<script type="text/javascript">
var gallery = new DG.ImageGallery({
   el : 'dg-image-gallery',
   autoplay : {
     pause : 2,
     buttons : {
       start : {
         txt : 'Start',
         enabled : true
       },
       stop : {
         txt : 'Stop',
         enabled : true
       }
     }
   }
});
</script>

Layout

The layout of the gallery is highly customizable. Modify image-gallery-2011.css to blend it into your existing layout

Use the "clickpicture" event

This is a simple example on how to use the "clickpicture" event which is fired when you click on the large picture:

<script type="text/javascript">
var gallery = new DG.ImageGallery({
   el : 'dg-image-gallery'
   listeners : {
     clickpicture : pictureHandler
   }
});
largestImages = [
   'largest1.jpg',
   'largest2.jpg',
   'largest3.jpg',
   'largest4.jpg',
   'largest5.jpg',
   'largest6.jpg'
];
function pictureHandler(imageData){
  var index = imageData.index;
  var w = window.open('images/' + largestImage[index],'w');
  w.focus();
}
</script>

In the code above, I have added an event handler for the clickpicture event. It's pointing to a function called pictureHandler. This function is executed when you click on the large picture.

This function will receive an object as only argument. This is how that object might look:

{
   index : 0, // picture index, 0 = first, 1 = second..
   id : 'product1', // id of <div id="dg-image-gallery" class="dg-image-gallery" id="product1">,
   thumb : 'images/thumb1.jpg' // Thumbnail source,
   caption: 'Picture 1' // Caption text,
   src : 'images/large-image.jpg' // Source of large image
}

What I'm doing in the example code above is to open a new window with an even larger version of this picture. The path to these pictures are stored inside the largestImages array above the function. I use the index sent to the pictureHandler function to determine which large picture to show.

If you a system regarding how you name your image files, you can also do something like this:

<script type="text/javascript">
function pictureHandler(imageData){
  var newSrc = imageData.src.replace('large','largest');
  var w = window.open(newSrc,'w');
  w.focus();
}
var gallery = new DG.ImageGallery({
   el : 'dg-image-gallery'
   listeners : {
     clickpicture : pictureHandler
   }
});
</script>

Here I'm opening a new window. The image opened in this window will have almost the same name as the large picture used in the slideshow. The only difference is that I have changed the word "large" in the path to "largest". I.e. click on "large5.jpg" will open "largest5.jpg" when you click on it

Use the "clickpicture" event to navigate to another page

This is an example of how you can use Image Gallery 2011 to list products and then navigate the browser to a product page when someone clicks on a large image.

First, add id's to your <div class="dg-image-gallery-image"> elements. Example:

<div class="dg-image-gallery-image" id="product1">
   <img class="dg-image-gallery-thumb" src="demo-images/thumb_1.gif">
   <span class="dg-image-gallery-caption">Siberian Iris<span class="imgCopyright"><br>Image copyrights - <a href="http://www.scottpeckphoto.com">ScottPeckPhoto.com</a></span></span>
   <span class="dg-image-gallery-large-image-path">demo-images/large1.jpg</span>
</div>

Then, use a code like this to create your Image Gallery:

<script type="text/javascript">
function pictureHandler(obj){
  location.href = 'product.html?id=' + obj.id.replace(/[^0-9]/g,'')
}
var gallery = new DG.ImageGallery({
   el : 'dg-image-gallery'
   listeners : {
     clickpicture : pictureHandler
   }
});
</script>

When someone clicks on a large picture, the "pictureHandler" function will be called. It will redirect the browser to product.html?id=, example: Click on the large image for <div class="dg-image-gallery-image" id="product1"> will redirect the browser to product.html?id=1

Comments

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com