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

Gary
Holy Smoke! Now the caption is the new color (#900 red).
My only change was to put back in the
<a class="dg-image-gallery-link" href="Wiring_assets/006_full.jpg">DHTMLGoodies.com</a>
line, and to wait a few hours. I don't think it took that long for the server to find the .css file because other styles were shown. Does the 'link' line effect the 'caption' display?
Gary at 06:34PM, 2012/09/19.
gary
I find that it takes a fair amount of time for changes om the .js file to show, sometimes hours.

I have slowed everything down and increased the startup pause because I have too many images. I would like to stop at the end and have the last image be a 'click here' to move on to another slideshow with more images

I would like the slideshow to stop at the end - How can I turn off the 'start over'?

Thanks
Gary
gary at 05:42PM, 2012/09/27.
Admin comment
DHTMLGoodies
Gary,I have updated the script with support for disabling auto rewind when in auto play mode.This is how it works:specify rewind:false for autoplay when you create the gallery, example:var gallery = new DG.ImageGallery({ el : 'dg-image-gallery', autoplay : { pause : 2, enabled : true, rewind:false }, loaderGif : ''});image-gallery-2011.js has been updated with this feature. You can download it, or manually make these changes to the file:1) Line 50, after pause:3 addrewind:true,2) On line 106, just below: if (config.autoplay.pause) { this.autoplay.pause = config.autoplay.pause; } add if (config.autoplay.rewind !== undefined) { this.autoplay.rewind = config.autoplay.rewind; } and finally, in the doAutoPlay function, replace the code:if(index === this.images.length) {index = 0;}with this: if (index === this.images.length) { if(!this.autoplay.rewind){ this.stopAutoPlay(); return; } index = 0; }
DHTMLGoodies at 06:15PM, 2012/09/27.
Gary
Thank You!

I have a script that I have been using elsewhere to open a link in a smaller new window so that the viewer won't get confused about how to get back (I do demos and tutorials for dollhousebuilders who are often challanged on the computer)

function newWinLinks() {
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className == "newWin") {
document.links[i].onclick = newWindow;
}
}
}

function newWindow() {
var winName = this.id + "Win";
var linkWindow = window.open(this.href,winName,"width=900,height=800,resizable=yes,scrollbars=yes");
linkWindow.focus();
return false;
}

This opens with class="newWin" in the link tag, but it doesn't work within:
<a class="dg-image-gallery-link" href="ThisPhoto.jpg">DHTMLGoodies.com</a>

I tried nesting it with <p></p> as you did with css classes for rollovers, but that didn't work here. Can this be incorporated in the "dg-image-gallery-link class"?
Gary at 02:20PM, 2012/09/30.
Gary
Is it possible to put a named anchor into a gallery so a link can open the gallery in the middle?
Gary at 11:26AM, 2012/10/04.
Gary
I went back to review all of your questions and answers re: anchors, but it seems your .js has progressed from there (or maybe i am too dim to see what I should be able to see). Here's my code:
I have linked from one image in WiringGallery3 to WiringPorch.html (a new gallery), and at the end want to link back to that place in WiringGallery3.
In Gallery3 I have:
<div class="dg-image-gallery-image"><a name="Gallery3Continue"></a>
<a href="WiringPorch.html" class="dg-image-gallery-link" >DHTMLGoodies.com</a>
<img class="dg-image-gallery-thumb" src="Buttons/Prepare to wire the porch ceiling.png">
<span class="dg-image-gallery-caption">if you intend to wire the porch ceiling, go to that gallery now</span>
<span class="dg-image-gallery-large-image-path">Buttons/Prepare to wire the porch ceiling.png</span>
</div>

and at the end of WiringPorch I have:
<div class="dg-image-gallery-image">
<a class="dg-image-gallery-link" href="WiringGallery3.html#Gallery3Continue"></a>
<img class="dg-image-gallery-thumb" src="Buttons/Next.png">
<span class="dg-image-gallery-caption">Back to "Wiring Gallery 3"</span>
<span class="dg-image-gallery-large-image-path">Buttons/Next.png</span>
</div>

... but it goes back to the beginning of WiringGallery3 instead to the anchor. I have moved the anchor around and haven't had any luck. How should I do it differently?

Thank you!!!
Gary at 12:08PM, 2012/10/04.
Bonnie
Hi DHTMLGOODIES,Your functionality is amazing and exactly what I am looking to add to my website. I am having trouble getting it to though. I am using blogger and trying to add the code to a static blogger Page.I do have jquery javascript on my site for another feature and read your comment to Christopher to try adding the code jQuery.noConflict();on the line abovevar gallery = new DG.ImageGalleryof my html file (in my case my blogger page). However this isn't doing the trick. Any thoughts or guidance you can provide would be greatly appreciated. Thanks!
Bonnie at 02:47AM, 2012/10/16.
Gary
It is interesting to note that the last line in each <div> can't refer to a file with a space in the name. When there is a space, the large photo renders in IE, but not in Chrome or Firefox. The thumbnail still renders and the link still works, but the 400px image doesn't.Curiouser and curiouser.
Gary at 12:14PM, 2012/10/17.
RAKESH NAYAK
I am a beginner. How can i get complete code of this tutorial? plz help
RAKESH NAYAK at 08:37AM, 2012/11/20.
prti
Hy, i have a problem with left/right buttons..i want a gallery without thumbnails, so i set width:0px;, and i changed img urls for arows.. all that in css.but the buttons are not functional.. they are shown, but they do nothing when clicked.Any help would be appreciated
prti at 08:05PM, 2012/12/16.
Andras
Hello Alf,Thank you very much for your script, this is the most sophisticated one which I have ever seen.I've got only one question, is it possible to do the following?I would like to have some sub-pictures, i.e. if I click on a thumbnail then the 1st image comes into the large image window, but there are some links in the copyright text which can replace the image with another one while the thumbnail remains the same.Can you help me please with any ideas, what to write into these links in order to change only the large image?Thank you, Andras
Andras at 05:42PM, 2013/01/06.
Andras
Hello Alf,Thank you very much for your script, this is the most sophisticated one which I have ever seen.I've got only one question, is it possible to do the following?I would like to have some sub-pictures, i.e. if I click on a thumbnail then the 1st image comes into the large image window, but there are some links in the copyright text which can replace the image with another one while the thumbnail remains the same.Can you help me please with any ideas, what to write into these links in order to change only the large image?Thank you, Andras
Andras at 05:43PM, 2013/01/06.
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.

Unable to save captcha-image.