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

cjohnson
I love your work on this gallery, it's very well done. I wanted to use this in my site and I've customized it to fit save for one problem: I can't remove the border surrounding the gallery. I thought I could change it in the CSS file under .dg-image-gallery{ border: 1px solid #000; but when I tried changing this to 0px that didn't do the trick. I'd appreciate it if you could help me out. Again, thanks for sharing your work.
cjohnson at 03:25AM, 2013/01/07.
Andras
Hi Alf, another good question: is it possible to place a small transparent layer at the corner of the large image, showing the actual and total images, e.g. "7 of 12"?
Andras at 04:14PM, 2013/01/07.
Andras
There is a small bug in the code, if I load the page with autoplay disabled then both Play and Pause buttons are ON but only Play should be ON initially. I cured it with putting a line after this part:------ if (this.autoplay.enabled) { this.updateAutoplayTimestamp(); this.startAutoPlay(); }------and the new line is:------ else { this.dom.autoplay.stop.addClass('dg-image-gallery-next-autoplay-stop-off'); }------
Andras at 11:41PM, 2013/01/07.
David
Hi there. Great script. I have an issue with the thumbnail container, I added in an overflow-x:scroll. However when I get to the end (the last thumbnail in the list), the scrollbar acts as if there is no images to the left. And I would like to add a number to each thumbnail, order in the list basically. Thank you for your time. Great bit of code here
David at 04:54PM, 2013/01/09.
Andras
Numbering problem sorted. Put a new DIV into the html code and append this line to the selectImage function:----------document.getElementById("***DIV ID***").innerHTML = this.dom.activeEnlargedImage.index + 1 + ' of ' + this.images.length;----------The actual image nr and the nr of total images will appear in this DIV, e.g. '3 of 14'
Andras at 08:55PM, 2013/01/09.
David
Thank you for the quick response. I need a bit more direction however. I put the document.getElementById("***DIV ID***").innerHTML = this.dom.activeEnlargedImage.index + 1 + ' of ' + this.images.length;in the selectImage function, however I am unsure of where to place it. I put it as the first thing, but the gallery wouldnt show up. Also, I assumed ***DIV ID*** was where I put my own instance name, correct?In regards to the div, do i place that within the div image class, right after the thumb img src? Thank you for taking the time.
David at 12:19AM, 2013/01/10.
Andras
Hi David,Download and unzip the demo and do the following:1. Find this line in image-gallery-2011.js:-------- this.highlightAndMoveThumbnailIntoView();--------and put after:--------document.getElementById("image-numbers").innerHTML = this.dom.activeEnlargedImage.index + 1 + ' of ' + this.images.length;--------2. Find this line in demo.html:--------<div id="dg-image-gallery" class="dg-image-gallery">--------and put after:--------<div id="image-numbers" style="position:absolute;left:15px;bottom:150px;color:white;float_left;"></div>--------It works fine for me, I can see the numbers changing as the autoplay goes.
Andras at 12:51AM, 2013/01/10.
Andras
Oops, the last line is better this way:-------<div id="image-numbers" style="position:absolute;left:15px;bottom:135px;color:white;"></div>-------
Andras at 01:00AM, 2013/01/10.
David
Thank you so much for the response. I however have disabled the autoplay. I am more looking for the numbers to be in the thumbnail, so if I were talking to you lets say then I could tell you to go to image 20 in the scroll bar. Since autoplay is disabled I dont see the numbers
David at 03:59PM, 2013/01/10.
Andras
It is interesting, I can see them even with disabled autoplay, the problem must be somewhere else I think.
Andras at 08:15PM, 2013/01/10.
David
Where do they appear for you? on, under the thumbnail?
David at 08:32PM, 2013/01/10.
David
Thank you I got it to show up, not exactly what I need but i will keep the addition, still lookin to put a number with each thumbnail. Any thoughts on scroll bar?Thank you for your help!
David at 01:41PM, 2013/01/11.
fatih
is very nice. Thank you all.
fatih at 07:37AM, 2013/08/29.
Stephen
This is very usable.However it would be wonderful to know if anyone managed to get a version working with vertical thumbnails as I know a few people asked but I have read all the posts and cant find a reply, though it was suggested that it would be a future update amongst the comments for the less functional vertical gallery. I am guessing the answer is complicated but if anyone did manage to create a version of this with a working vertical thumbnail viewer I would love to know how as the horizontal one takes up too much space on my webpage - Thanks
Stephen at 10:27PM, 2013/09/06.
jayaraj
hi, I've an issue in thumbnail container.. it's not displaying in ie11. but other all browser supporting correctly.. Even your demo application also doesn't displaying the thumbnail container...Any help would be appreciated thanks Jayaraj
jayaraj at 07:19AM, 2013/12/10.
vani
Hi.... I have problems with it in IE11. In IE11 I miss the thumbs.We can see only the large pictures.In IE11,http://mercyaquasystems.com/products.html
vani at 04:57PM, 2014/01/29.
Robert
I have a problem with the thumbnail container in IE 11.The thumbnails are shown above each other instead of next to each other...Works perfectly with other browsers.http://www.highroad-pd.de/pages/_galerie_auftritte.htmThx in advance for your help
Robert at 05:14PM, 2014/05/07.
MandaRyte
I want to use this photo gallery script on my site, but I want the thumbnails to scroll vertically along the right side and the large image to be bigger and on the left. What do I need to change to make this happen??
MandaRyte at 05:07AM, 2015/05/01.

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