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

roy
Admin please help me with this minor problem its very urgent.
first of all very nice gallery, thanks for sharing.

on internet explorer 8 the caption flies to the right. i saw other people here complain on this. (i added a picture) i tryed every way i know to try and align it with css but no metter what, on ie8 it looks like this:

http://i53.tinypic.com/nbalv7.jpg

i hope you can tell me what to change to fix this.

and please ANSWER HERE NOT IN THE EMAIL :)

thanks in advance!

roy.
roy at 05:34AM, 2011/07/26.
Don
hello,
Thank you for sharing ! .. it is a wonderful script !
I was wondering ! - how do I make the gallery be in the horizontal center of a page ! .. it is always put on the left !what if I want this gallery to be centered ! .. what do I modify in the css ?

thanks
Don at 07:09PM, 2011/08/08.
Don
ouppsss .. i got it ! ... I just placed the body html/java codes inside a table that I centered on the page desired !

thank you again ..

Don
Don at 07:18PM, 2011/08/08.
OMB
Hi,

Very nice, but how do I setup multiple gallery on the same page? I downloaded the latest ver.But I have 2 gallery on the same page only works.
OMB at 09:06AM, 2011/08/10.
Reggie
i'm having trouble getting the script to work. these are my errors:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 11 Aug 2011 05:57:23 UTC


Message: 'Class' is undefined
Line: 36
Char: 1
Code: 0
URI: http://www.trendstyleevents.com/js/image-gallery-2011.js


Message: Object expected
Line: 65
Char: 1
Code: 0
URI: http://www.trendstyleevents.com/demo2.html

it is say that the dg-image-gallery-large-image-path is undefined and it can't find my large pics.

Any suggestions?
Reggie at 12:02AM, 2011/08/11.
Paulina
How elegant - especially black version ;-)

Is there any siple way to remove the thumnails div altogether and have only slider with large photos and prev/next button?

I've tried to remove the imgs of the thumnails in .html but than everything fails...

I'd be extremly grateful for your help
Paulina
Paulina at 09:31AM, 2011/08/20.
Tony
I got the version just before the clickable big picture.

Works great !!!

Thank you very much :)
Tony at 11:29AM, 2011/08/22.
zvipesh
Hi:

I am in the process of integrating the Gallery into a new Artist Web site.
I would like to link the images( When Large image is clicked) to link to Shopping-Cart function.
Can "click-picture" generate a pointer/index of a sort that can be used by the Shopping cart to generate the proper page related to that specific image ?

What that pointer/index looks like ?
I am new to Java ... and any help will be appreciated.
zvipesh at 12:54AM, 2011/08/29.
geetha
How to get the scrollbar only for the large image and how to call resize function for the large image before displaying?
geetha at 11:33PM, 2011/08/29.
jasmin
first of all, thanks so much for this! There seems to be a bug I can't fix in the white version of this gallery. When you roll over the "next" button, the image does not show and just goes white. I have made sure the image path is correct and is still not showing. This is also apparent in the demo version - any advice on a fix?

many thanks!
jasmin at 09:47AM, 2011/08/31.
Admin comment
DHTMLGoodies
Jasmin,

You are right. There's a problem with the CSS in the "white" version.

This line:

.dg-image-gallery-next-over{
background-image:url('/images/right-white-over.png');
}

should be changed to

.dg-image-gallery-next-over{
background-image:url('images/right-white-over.png');
}

i.e. remove the forward slash from the start of the image path.
DHTMLGoodies at 03:46AM, 2011/09/05.
Helen
Hi, I have set your script and I like it very much, I have managed to change many thing with the css, also I disabled the autoplay as I dont like it.
One thing, I have a very slow connection, and as there is a preload I had the big image for a while blank. Is it possible to add a loading text for the big image?
Thanks Helen
Helen at 01:57PM, 2011/09/26.
Helen
Also I have another more important problem,
The slideshow should be hidden if javascript is disabled, turning javascript off, the page look awful.
The noscript does not work, it shows the alternative text but also shows the pfotos vertically all over the content of the page.
I'm searching for a way to do it, found one putting a css style in the noscript tag, it works but does not validate, any suggestions?
Helen at 03:01AM, 2011/09/28.
Helen
One gave me a solution to the javascript disabled problem, I think important:
This in header:
<script type="text/javascript">window.addEvent('domready', function() {
$$('html').set('class', 'jsOn');
});
</script>

An alternative content instead of <noscript> in html document:
<p class="alternative">no javascript content/p>

this in the .css file:
.dg-image-gallery {
display: none;
}
.jsOn .dg-image-gallery {
display: block;}
.jsOn .alternative {display:none; }
Helen at 02:59PM, 2011/09/28.
Darrel
Your work is awesome.

One question. Is it possible to move the scrolling thumbnails from the bottom to the left side? I don't see where anyone has asked.

In one of your previous non- auto-run galleries, the thumbs were on the left and this would work mbetter for me. Is it an easy fix in the css?

Thanks,
Darrel
Darrel at 02:56PM, 2011/09/29.
Helen
The file is very big, so I am trying to do it smaller, managed to do it lot smaller minifying the mootools file.
Just entered mootools and there is a new version 1.4.0 and the new version with compatibility and that is compressed is smaller than the one I managed, however it does not work with the script :(
Helen at 04:07PM, 2011/09/30.
Helen
Finally I managed to add a loading on top of the slideshow putting this just before the slideshow:
<div id='siteDetailLoader'>
<p><strong>Please wait while the photos load...</strong></p>
</div>
<script type="text/javascript">window.onload = function() {
document.getElementById("siteLoader").style.display = "none";
document.getElementById("dg-image-gallery").style.display = "block";}</script>

Also I managed to put all 3 .js files into one, I minifyed it with an online tool and then I gzipped it, so they are all now down to 36 kb only, what takes a while to load are the larges photos.

And a last thing I cant fix as it must be in the javascript and I dont understand that.

First the thumbnails loads then the large photos and last the arrows on the left and right of the thumbnails (I deleted the play and pause buttons, however was not able to delete function in javascript file).

I want the thumbnails to load first, however before the large photos I would like the arrows to load, as the first photo load, and then it take 30 seconds for the arrows to appear, as some pages have many photos.
And the arrows are really tiny.
How can this be changed please?
Helen at 03:50AM, 2011/10/02.
Darrel
I love this gallery. It is working reat for me, except now I want to implement the "Use the "clickpicture" event to navigate to another page" portion of the code.

I am a novice at this. I don't know where on the page to place the code:

<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>

Nor do I know where to place the script:
<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>

Dreamweaver chokes on "clickpicture:pictureHandler" too.

Can you please provide a little more instruction about how to get this going on our pages?

Many thanks,
Darrel
Darrel at 11:21AM, 2011/10/07.
Darrel
ps,
Sorry, Dreamweaver 4 chokes on the

listeners : {

line in the script.

I don't know how to fix this error.

Thanks,
Darrel
Darrel at 11:31AM, 2011/10/07.
Admin comment
DHTMLgoodies
Hi Darrel

You have an error in your code. A comma is missing before the word listeners

el : 'dg-image-gallery',
listeners : {
DHTMLgoodies at 10:38AM, 2011/10/14.
Hakan
We are working on the implementing the gallery to our website. Having problems with picturehandler function.

We are following the example in the documentation. But we cant get the function open the link.

Our code is as follows.

<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
},
autoplay : {
pause : 2
}
});

</script>

<div id="dg-image-gallery" class="dg-image-gallery">
<div class="dg-image-gallery-image" id="product1">
<img class="dg-image-gallery-thumb" src="images/collections/collection1-1.gif">
<span class="dg-image-gallery-caption">test 1 link<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">images/collections/collection1-1.jpg</span>

----
Basicly when the main image is clicked nothing happens.
We twisted the code for debugging and took of obj.id.replace(/[^0-9]/g,'').
The code looks like this
<script type="text/javascript">
function pictureHandler(obj){

location.href = 'product.html?id='

} ;
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
listeners : {
clickpicture : pictureHandler
},
autoplay : {
pause : 2
}
});

</script>
- When we took out the part where div id is read, the code works and when you click on the page we got the product.html?id= web page.
It looks like we cant read the ID of the DIV object somehow.

Can you help.
Regards,

Hakan
Hakan at 03:06PM, 2011/10/14.
Admin comment
DHTMLgoodies
Hakan



Since you're the second one who reported a problem with this, we might have a bug here. I will take a look at it on Monday

For now, try to refer to

gallery.dom.activeEnlargedImage.id

In your function. It might work.
DHTMLgoodies at 05:12PM, 2011/10/14.
Hakan
Thanks. I tried it and it gets the id as unique0376256701769307260.3023828703444451 so probably this needs to be handled as well.

While you are at it you may want to add functionality or a sample to pass a complete target link to the pictureHandler rather than just a parameter such as a product id.

Best.

Hakan
Hakan at 06:56PM, 2011/10/14.
DHTMLGoodies
Hakan and Darrel,

The script has been updated with a fix for this problem. You can download the zip file and update image-gallery-2011.js or simply change the getImages function at the bottom of image-gallery-2011.js to the following:

getImages : function() {
var imageObjects = $$('.dg-image-gallery-image');
var countImages = imageObjects.length;

for(var i=0;i<countImages;i++) {
var img = imageObjects[i];
this.images.push({
index : i,
id : imageObjects[i].id ? imageObjects[i].id : this.getUniqueId(),
thumb : img.getElements('img')[0].src,
caption: img.getElements('.dg-image-gallery-caption')[0].get('html').trim(),
src : img.getElements('.dg-image-gallery-large-image-path')[0].get('html').trim()

});
img.dispose();
}

},

The only difference is that

img.setStyle('display','none');

has been replaced by

img.dispose();
DHTMLGoodies at 03:09AM, 2011/10/17.
EGMacDonald
Hi, I've not tried your script as yet, but can you put a buy now button that links to your pay pal on this? Alternatively, can you link to a store cart?

Thanks
EGMacDonald at 11:08AM, 2011/10/19.
Helen
I really love this script, however I cant stop thinking about improving it.
The perfect would be, first the thumbnails loads then the arrows and last the big photos, and if one try to see a photo that has not loaded yet, a message loading would come up in its place until the photo has loaded.
When you have many big photos it takes a while before all photos load and the arrows appear.
Anybody know how to do this modification at it would be just perfect.
Helen at 04:37AM, 2011/10/25.
Admin comment
DHTMLGoodies
Helen,

I have made some modifications to the script today. Please download the latest zip file.

There are two changes:

1) js/image-gallery-2011.js has been updated
2) images/ajax-loader.gif has been added.

This gif will be displayed while the large images are being pre-loaded. If you don't like this particular gif, you can generate your own at ajaxload.info.
DHTMLGoodies at 12:24PM, 2011/10/25.
Helen
Thanks a lot for the change, its a lot better, however been all morning cleaning cache and checking, I just dont get it, the arrows to move to left and right sometimes appears before all images load and other appears when all images load....(the ones on left and right side of slideshow). And the loading images on iee only appear on first image.
safari: 1st check worked perfect arrows loaded at once and load image appeared (on all photos)
ie8: arrows appeared when all images loaded, and the load image only appeared on the first photo....just hate ie.
Firefox: ????sometimes arrows appears at once after cleaning cache, others appearing when all photos loads, just like ie. Load image appear on all photos.
Chrome: looks like arrows loads at once (same time as loading image) and loading image appears on all photos.
Thanks a lot Helen
Helen at 03:21AM, 2011/10/26.
Hakan
Hello:
I have changed the script as you noted.
"
The only difference is that

img.setStyle('display','none');

has been replaced by

img.dispose();
"

Still it doesn't work with

"<script type="text/javascript">
function pictureHandler(obj){

location.href = 'product.html?id=' + obj.id.replace(/[^0-9]/g,'')"

looks like obj.id.replace(/[^0-9]/g,'') can not get the id of the div tag.

location.href = 'product.html?id=' + gallery.dom.activeEnlargedImage.id however returns a result and redirects the page to "product.html?id=unique057626342540606860.472928759874776"
Hakan at 07:36AM, 2011/10/26.
Admin comment
DHTMLGoodies
Helen,

Do you have a web address where i can see this in action.

Hakan,
It would be nice if you also could post an url where I can take a look at this problem. The picture handler works ok for me, so I need to see this in action in order to help you further.

Thanks.
DHTMLGoodies at 05:04AM, 2011/10/27.
Helen
Dear Admin (dont know your name lol),
Yes I have, I have also uploaded your demo also and its the same, on the second photo in your demo I have added a big photo more than 200 kb, and to see it you have to stop the autoplay.
This is my slideshow with the autoplay disabled:
http://www.marbellasunrentals.com/cortijo_blanco_1_private_villa_marbella2.htm
This is your demo with my big photo added (as yours loads quickly)
http://www.marbellasunrentals.com/demo/demo-white-background.html

pd. If you want to see more than once you must clean cache as I have long cache for images and scripts and 2 hours on my php(.htm) pages.

The script is quick as I minimezed it and gzipped it.
Thanks,
Helen
Helen at 06:12AM, 2011/10/27.
Hakan
Hi:
You can check the gallery at http://www.aprilvenus.com/default_r.asp

thanks for your help in advance
Hakan at 04:47AM, 2011/10/28.
Admin comment
DHTMLGoodies
Hakan,

It seems that you need to download the latest zip file from here and replace your js/image-gallery-2011.js with the one you find there. Then it should work.
DHTMLGoodies at 08:45AM, 2011/10/28.
Admin comment
DHTMLGoodies
Helen,

My name is Alf. Nice to meet you!

Wow,I like that house. Can I buy it ? :)

I may be mistaken, but it seems to me that you're site is on a web server which is a little bit slow?. The reason why the arrow image doesn't appear earlier is that it hasn't yet been loaded from the server. It's being loaded after the thumbnails(but before the large pictures).

There are a couple things you can do:
1) You can preload the arrow images with simple html like this:

<img src='http://www.marbellasunrentals.com/slideshow/images/BD21298_.gif' style="display:none">
<img src='http://www.marbellasunrentals.com/slideshow/images/leftBD21298_.gif' style="display:none">

This html should be placed above the html for the image gallery.

I've also added a new option "initialPause" to the autoplay feature, which make it possible to wait a litte bit before starting the autoplay. The fix is in js/image-gallery-2011.js.

The changes on your html should look something like this:

<script type="text/javascript">
var gallery = new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2,
initialPause : 3 // in seconds
}
});
</script>


Later, I will implement a feature which doesn't start the autoplay until a few of the large pictures has been preloaded. This is however a bigger job, which I can't find time to start on today.

---
Alf
DHTMLGoodies at 10:14AM, 2011/10/28.
Helen
Hi Alf,
Thanks,
Nop, I will buy that house before you :)

Dont know if server is slow, homepage loads in seconds, could be as that property have many photos. And your demo loads quick on my server. And is a shared server so what can be expected?

Anyway,
That fixed the arrow issue thaks, however the issue I said in ie8 that only the first image get the loading image is still there.
On this link is your demo, the only thing i done is to disable autoplay and add 2 big photos for better view, if you click on image 2, 3 and 4 etc you can see the ajax load image dont appear...
http://www.marbellasunrentals.com/demo/demo-white-background.html

Btw, the arrow issue was only on ie8 and sometimes in firefox, on chrome and safari the arrows loaded just fine.
thanks and regards,
Helen
Helen at 12:22PM, 2011/10/28.
Brian
Hello, a very elegant interface and one I can use instead of an old Flash one (I spent a long time developing). Unless and until Apple relent it will just encourage people to use tools like this for handheld device, especially when the results are as good as yours.

I have the same issue Christopher had in July - if I enable jQuery for my menus, the Image Gallery doesn't play, and vice-versa.

The first solution you suggested, adding jQuery.noConflict(); above the gallery variable definition doesn't seem to do anything. The second solution, adding var $j = jQuery.noConflict(); seems not only not to help the menus, but it also stops my Image Gallery rendering properly, as if the CSS is missing.

I'm using Mac Lion, Safari and Chrome. The issue seems quite consistent across browsers.

I'll take a closer look at the site you mention, http://docs.jquery.com/Using_jQuery_with_Other_Libraries, but meanwhile have you any other suggestion since July?

Best regards, Brian
Brian at 10:28AM, 2011/10/29.
Admin comment
DHTMLGoodies
Brian,

I have updated the Image Gallery 2011 script now. Please download the latest version and replace image-gallery-2011.js with the one you find in the zip file.
DHTMLGoodies at 05:00AM, 2011/10/31.
Helen
Hi Alf,
Just saw somebody entered several times in an old test directory /slideshowdemo/
and suppose was you, that is not the url to view where your demo is, this is the correct test url: http://www.marbellasunrentals.com/demo/demo-white-background.html
Thanks for your time, very much apreciated
Helen at 06:45AM, 2011/10/31.
Brian
Hi - Alf (Tx Helen for getting Alf to let us know his name!)

Just downloaded the new Zip and I'll try it out now - more later

Brian
Brian at 11:12AM, 2011/11/04.
Brian
Hi Alf, I'm not sure what your new .js was addressing (my issue or others), but I have installed it and tried the code. Nothing seems to be different for my menus.

I have tried:

a) with the no conflict omitted, my original jquery commented out
b) with the no conflict omitted, but with my original jquery enabled
c) with no conflict enabled both where you suggested and also above the mootools scripts, with my original jquery emnabled.

I have also put some paragraphs above your script for the image gallery and below my horizontal menu (which is just above) in case there were a z-index issue, because I have encountered that with other gallery engines. But I still have no drop downs in my Superfish menus.

Was the new .js intended to address something like that?

Have a look at http://www.annsutton.net/pages/gallery_scroll_db.php to see the gallery working but with no drop downs.

All four menus at the top should have several dropdown items, but they won't trigger.

What might be different with the new .js is that the gallery works even when my original jquery is enabled - before, I think, if I did that, the gallery disappeared.I'm not quite sure of that, but I'll leave things as they are for now for you to take a look if you have the time and inclination.

Hopeful of more help!

Best regards,

Brian
Brian at 11:57AM, 2011/11/04.
Brian
Hi Alf - I spoke too soon - the bottom line is it works now!

I seem to have left in the no conflict JScript. I took those out, and hey presto I had drop down menus.

I have had to add a z-index to get them over the main image. z-index: 2 usually works for that, but it didn't, so I went for 2000 and it's OK. It adjusts the main div occurrences of the li tag that's used for the menu list as I'm sure you know. I guess less then 2000 will work, but this is a quick post to correct my earlier wrong one of an hour ago.

So all seems well - thank you. The same url I gacve you works fine now.

I wonder if Chris who first raised this in July will notice?

Best regards,

Brian
Brian at 02:14PM, 2011/11/04.
Jeff
Hello,

Great script just need to know where to place "click picture" javascript to get it to work.
View page her for source code
http://www.1-800-molokai.com/molokaiweddings/portfoliog1.html

Any help greatly appreciated.

Thank you,

Jeff
Jeff at 03:37PM, 2011/11/06.
Admin comment
DHTMLGoodies
Jeff, and others,

I have added support for standard anchor tags(<A>) in order to make it easier for most users of this gallery. clickPicture event is still supported, but now, you can also do it 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-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>


i.e. by specifying an anchor tag:

<a class="dg-image-gallery-link" href="http://www.dhtmlgoodies.com">DHTMLGoodies.com</a>


When such an anchor tag is present, you will be able to navigate to this link when clicking on the large pictures.

--
Alf
DHTMLGoodies Admin
DHTMLGoodies at 09:50AM, 2011/11/07.
Helen
Dear Alf,
I have investigated futher and downloaded a program to be able to also view the slideshow in ie9. In ie9 the image loader works perfect on all photos, but in ie 6, 7 and 8 it only shows up on the first photo. Also as I have a slow connection I tested your demo on this site and there is the same bug using ie 6. 7 and 8.
Helen at 12:41PM, 2011/11/07.
Vishakha
Hi,

I want to use the same script but on click of the thumbnail image i need to show a .mp4 file in the jw player.

The mp4 file will keep on changing on click of the thumbnail images.

Hope you can help.

Thanks...
Vishakha at 12:41AM, 2011/11/09.
Helen
Back to the ie 6,7 and 8 issue.
Just discovered its strange but its an cache issue....
Just checked my site with ie8, and as I have the script in 36 pages. After cleaning cache I get the ajaxloader.gif on the first photo on the first page I visit, on the second page and rest of pages I dont even get the loading image on the first photo.
I added a no cache for the .gif files in htaccess and doing that I get the ajaxloader.gif on the first (only the first) photo on each page....This is very strange.
If I have it in the cache it dont appear at all, not even on first image in below ie 9.
So I imagine it dont appear on rest of images as it is cached on that page, so it for some strange reason dont repeat....
Helen at 04:09AM, 2011/11/15.
Tom Weber
I love your program and have used it for my family website (www.tomweber44.com) to display albums of my grandchildren, etc. Do you have any plans to add speed buttons to increase or decrease dynamically the rate at which the picture are shown?
Tom Weber at 07:49PM, 2011/11/27.
Tom Weber
Ignore my last question. I figured out how to modify your code to do this. I change the time multiplier to 500 to give a higher speed and modified the css and js files. I have it implemented on my website: www.tomweber44.com.
Tom Weber at 11:05PM, 2011/11/27.
etruss
Hi, thanks for the great code. I'm trying to pick-up the Pictures from a data base by means of a php code. Everything works well by IE, but with Firefox while the thumbs area shown right the larger images are not displaied.I 'm only substituting the names of the demo images with the name of a variable. Do you have an idea? Thanks
etruss at 11:00AM, 2011/12/08.
jaylow
hi nice gallery
but i have a problem

all works wel on my local computer but when i upload the code to my site it does not loade any picture

http://www.dzikiwschod.co.cc/ahc/ahc.html

so i uploaded the hole demo file into my site and that one works....

and i cant seem to figuer out why it does not work..
cause here it just works perfect...
http://www.dzikiwschod.co.cc/image-gallery-2011/demo.html
jaylow at 10:48AM, 2011/12/13.
Admin comment
DHTMLGoodies
It seem that the images are located at the wrong place, or that the reference to them is wrong.

Example:

http://www.dzikiwschod.co.cc/ahc/images/earrings/29.jpg

cannot be found by the script
DHTMLGoodies at 10:01AM, 2011/12/16.
etruss
Hi admin,
I really do need some help if possible. I find the script excellent and I implemeted it for my website. It's a photogallery where many authors could publish their pictures. The fact is that often (but not always) after the third picture I can see the first two large images, but not from the third onwards, while the thumbs are showned perfectly. All the pictures are well stored in their directories. This is the link to the page wehre you can choose between two authors:
http://www.ilbellodelblu.it/fotoscegliautore.php
The first displays everything right, the second has the problem that I mentioned. I hope that you can help me.
etruss at 11:57PM, 2011/12/16.
etruss
Dear all, I think that I solved the issue, I hope that it can be interesting for somebody: the problem occurs when there are filenames with spaces. Eliminating the spaces in the filenames everything works perfectly. I don't understand why it happens, but it is and only with some versions of IE and Firefox.
etruss at 11:44AM, 2011/12/21.
gondivin
Hi - this is a great script! I am looking for one that allows right side, vertical scrolling of the thumbnails instead of horizontal. Is it possible to configure this gallery to do this?

Thx!
gondivin at 02:45PM, 2011/12/25.
Agustin Ponce
This is Excellent!

there is only one problem I'm having. the thumbnails don't show up in either chrome, IE, or safari. but they do show up in Firefox. what could be the problem. underneath i will post the code of each thumbnail.

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

<div class="dg-image-gallery-image">
<img class="dg-image-gallery-thumb" src="demo-images/CIMG3948_thum.jpg" />

<span class="dg-image-gallery-caption">Corner Wine Cooler Furniture<span class="imgCopyright"><br />Image copyrights - <a href="http://www.scottpeckphoto.com">-------</a></span></span>
<span class="dg-image-gallery-large-image-path">demo-images/CIMG3948.jpg</span>
</div>

</div>
</div>
Agustin Ponce at 05:19PM, 2011/12/28.
Agustin Ponce
any one have any ideas?
Agustin Ponce at 12:30PM, 2012/01/03.
Helen
Agustin,
Your code works perfect for me, I suppose you have add the javascript before and after the code correctly as you have not pasted that in the code.
Also even if works you have error in opening and closening spans, but I see both images in firefox and chrome.
If you have added the javascript links correctly, then put the code in a separate page, as maybe you have something in the page that make the script not to work, but as it is it works perfect.
Helen at 02:39PM, 2012/01/04.
geeta
Can i add another image on hover of a small image.If yes then how it is possible please reply fast......
geeta at 02:55AM, 2012/01/18.
Eric
Just trying to make the fade in/out of images last a little longer. Any thoughts? Many thanks!
Eric at 11:14AM, 2012/02/18.
kanika
Hey can u tell me the steps of using this script ............. its urgent i try many times but didn't able to do this Plz Plz Help me
kanika at 02:59AM, 2012/02/21.
charlie
I'm trying to add the feature of clicking on the large image and being sent to a different page.... but without success.

Could you put together a demo page with this feature?

thanks so much!
charlie at 10:42PM, 2012/02/23.
Patrick
The download (ZIP) includes two working examples of the script (HTML & JS & CSS & images). However, there is no working example of the script using "largestImages" (clickpicture : pictureHandler).
Where can I see a working example of this feature of the script?
Patrick at 06:20AM, 2012/03/03.
Richard Graham
I feel stupid. I can't find where you turn auto play off by default. Is it in the html file or in the JS file. I realize I need to declare something autoplay enabled false but don't know the syntax well enough to know where and how to do this.
Richard Graham at 01:07AM, 2012/03/10.
Adrienne
I have the gallery working when I test it. But, once I load it to my host site the larger images never load. Does anyone know why this is happening? You can see it at sandrinphotography.com
Adrienne at 01:13PM, 2012/03/11.
Richard Graham
Please please someone tell me how you set the autoplay to be off on load (but then enabled by the play button). Last response in this forum by an Admin was December last year. Please can one of the other users help. It seems from the thread above theta many of you have done this but no-one has said how.
Richard Graham at 12:02AM, 2012/03/16.
Richard Graham
TURNING OFF AUTOPLAY BY DEFAULT

Ok tardiness by the admins led me to try and try until I eventually found the solution.. Here it is for anyone who has the same problem.

Look in the js file (can't remember what it's called as I renamed mine)

Find the initialize function which starts:

initialize : function(config) {
if(config.listeners) {
this.addEvents( config.listeners);

etc...

towards of the end of the function you'll find:


if (this.autoplay.enabled) {
this.updateAutoplayTimestamp();
this.startAutoPlay();
}
this.doAutoPlay.delay(this.autoplay.initialPause * 1000, this);


},


Set if (this.autoplay.enabled) {
this.updateAutoplayTimestamp();
this.startAutoPlay();
}
this.doAutoPlay.delay(this.autoplay.initialPause * 1000, this);


},
to <strong>this.stopAutoPlay();</strong>

Hope this is of use to anyone with the same problem.

I do wish to make clear that, while I am frustrated at the lack of support form Admin in this forum, I do concede that this script is provided freely and it is not our God-given right to EXPECT help.. And I also wish to point out that I think the script is absolutely fantastic and that I am very grateful to the authors. Thank you.
Richard Graham at 12:12AM, 2012/03/16.
Admin comment
DHTMLGoodies
Richard,

I apologize for not being able to reply sooner. It's difficult to find time to answer all comments. Please note that there are commercial licenses available which includes personal e-mail support. Just something to consider :)

You should be able to disable autoplay by setting enabled to false when you create the DG.ImageGallery object.

Example:

new DG.ImageGallery({
el : 'dg-image-gallery',
autoplay : {
pause : 2,
enabled : false
},
loaderGif : ''
});

see enabled : false
DHTMLGoodies at 08:16AM, 2012/03/16.
Agustin
I have the gallery working when I test it. But, once I load it to my host site the larger images never load. Does anyone know why this is happening? You can see it at http://www.augsolutions.com/test/image-gallery-2011/gallery.htm
Agustin at 11:03PM, 2012/03/16.
Agustin
Hello Admin,

I have the gallery working when I test it. But, once I load it to my host site the larger images never load. Does anyone know why this is happening? You can see it at http://augsolutions.com/test/image-gallery-2011/gallery.htm
Agustin at 01:43AM, 2012/03/17.
Richard Graham
Admin,

Thanks very much for the reply. I certainly hope you didn't find my tone rude; I didn't mean to offend. JavaScript ignorance can be damn frustrating when you watch a day disappear as you try to modify code without breaking it. I haven't yet checked the commercial license you mentioned but will pay for said if it doesn't break the bank. I do need to ask several questions such as how you replace the loader gif in the initialize function and in the

loader.setProperty('src',this.loaderGif)

line to use a css file ID or Class(set with display:none in the css file), then using the initialize function to call up the style with display:inline as you did in the previous incarnation of the image gallery the waitMessage style. It's important because gif animations aren't good when you have transparency; it's better to have a png and animate it in the css declaration; quality's much higher.

Then how do you get a slider to send a value to the autoplay pause var?

How do you move a background image behind the thumbnails so that it scrolls with the thumbnails? (I managed to do this with the previous image gallery but can't do it with the 2011 JavaScript method.)

And then Rolls Royce modification; how do you modify the path to all images inside the gallery container style with a series of functions triggered by a menu of buttons for different galleries. My early attempts crash the browser.

If this is the kind of help I can get if I pay then I'll pay! I'll say again it's a bloody great script you've written.

I don't expect answers to all these questions but these are the kind of things I and perhaps others are trying to do to take the script a bit further. You can have a look at my test site if you're interested.

http://www.richardgraham.it/boilerplate/test-new/eng/photography.html

Again thanks for your previous reply.
Richard Graham at 03:10AM, 2012/03/19.
Admin comment
DHTMLGoodies
Richard, no worries :)

Wow, I'm really impressed by your implementation of this gallery. Very nicely done!!

I have made some adjustments to the gallery now. I suggest you download the latest zip file and replace image-gallery-2011.js with the new one.

This is new:
1) CSS class "dg-image-gallery-thumbnails" which you can use for background image behind the scrolling thumbnails.

2) The image loader gif has got CSS class "DG-image-gallery-loader".

btw: you send loaderGif as config param when you create your gallery. Example:

var gallery = new DG.ImageGallery({
   el:'dg-image-gallery',
   autoplay:{
     pause:this.PauseLength
   },
   loaderGif : 'images/my-loader-gif.png'
});

3) I have added a replace function which you can use for your "Rolls Royce" feature.

This is how it works:

Example:

var gallery2 = [{
   caption : 'New image',
   id: '1',
   'thumb' : 'demo-images/thumb_12.gif',
   'src' : 'demo-images/large12.jpg',
   href:null
},{
caption : 'New image 2',id: '2', 'thumb' : 'demo-images/thumb_11.gif', 'src' : 'demo-images/large11.jpg',href:null
}, {
caption : 'New image 3',id: '3', 'thumb' : 'demo-images/thumb_10.gif', 'src' : 'demo-images/large10.jpg',href:null
}];

Replace images

The argument to the replace function is an array of objects describing the images,

Ie. an array[] containing a comma separated list of objects like this:

{
   caption : 'New image',
   id: '1',
   'thumb' : 'demo-images/thumb_12.gif',
   'src' : 'demo-images/large12.jpg',
   href:null
}

where caption is image Caption, thumb is path to thumbnail, src is path to large image and href is eventual url. "id" and "href" are optional.

ps! An option may be to use Ajax to load pull the array from the server

example(With Mootools)

var cachedGalleries = {};
function getNewGallery(galleryId){
if(cachedGalleries[galleryId]){
gallery.replace(cachedGalleries[galleryId]);
return;
}
var req = new Request.JSON({
url : 'my-server-file.php',
data : {
getGallery: 1,
galleryId : galleryId
},
onSuccess : function(json){
cachedGalleries[galleryId] = json;
gallery.replace(json);
}
});
req.send()
}

And then the link may look like this:

<a href="#" onclick="getNewGallery(1);return false">Show another gallery</a>
DHTMLGoodies at 07:59AM, 2012/03/20.
Richard Graham
You're a bloody God. It's going to take me a while to get through this because I've made so many bloody modifications to the original js file I'll need to replace the right bits and fortune has blessed me with a job interview in two days time in which I need a portfolio ready. Might have to leave Rolls Royce features out and add some content over the next few days. Thank you thank you thank you. I will implement all of the changes you have given me guidance over as soon as and if, when I'm all done and ready, I can help you in any way then I will be very happy to do so. If you want to show an implementation, modify it in any way.. all of the above.. I'll be very happy to give you the graphic files or keep a url active and stable.. Anything you need. Keep doing the good work. It's very very good and we're very appreciative. ANd I'm not paying anything currently in terms of licenses but should be; let me know.. Authors and creatives should be paid by those who use their stuff. I ain't got much spare but certainly feel I owe you.

Richard Graham at 10:03AM, 2012/03/20.
Richard Graham
Missed an 'if' out of the 1st conditional [jobbing language teacher in daylight hours] I used in the last line but two: "IF" I should be paying a license to use the script on my site then I will.. let me know.
Richard Graham at 10:07AM, 2012/03/20.
Admin comment
DHTMLGoodies
Richard,

If you're just want to implement the CSS classes, you can probably use your own source code. Just look inside the new js file for where the class names are added:

i.e.
this.dom.thumbnailContainer.addClass('dg-image-gallery-thumbnails');

loader.addClass('DG-image-gallery-loader');

All scripts on this site are using the LGPL license which you gives you the right to use my scritps both on commercial and private sites without having to pay.

The support online here is also free. The commercial license is something to consider for those you want something else than the LGPL license and if you would like to receive personal e-mail support.

I'm considering using GPL for some of my future scripts, especially scripts I have used a long time to develop.
DHTMLGoodies at 11:33AM, 2012/03/20.
Diana
Absolutely love it. Thank you so much. Any way to add an image counter -- 1 of 20, 2 of 20, etc. -- to the gallery?
Diana at 08:48AM, 2012/03/22.
Richard Graham
I've finally managed to get back to implementing the changes you gave me advice over. I think you should stay with block vs none for display styles on the play and pause buttons and have them absolute positioned one over the other. I think most people would choose that over separate play and pause buttons. Combining your js file with mine took an afternoon but I've got it working as it did. There's a decent football match on tonight so implementing your other suggestions will have to go on the back-burner! I can't thank you enough for the help you have given me, even if it will take me a while to get it working on my site. I also had a look at some of your other stuff. The puzzle is brilliant. I'd very much like to work with you in the future. My talent is with the graphic elements. If I can ever help in any way then I will without hesitation. Keep doing the good work. Bloody good site you have here. Wonderful stuff. All the best. Richard
Richard Graham at 11:11AM, 2012/03/28.
cxax
Hello.
Gallery works fine, but I have two major issues:
1. I use pictures of different size and I'd like to use fixed height and auto width. When I change the width to auto in image-gallery-2011.css the enlarged pictures disappears.

2. Do I really need to use large files and thumbs? Maybe it will be possible to automatically generate thumbs by scalling the original picture?

Best regards
cxax at 11:22AM, 2012/04/17.
Daniel
a small bug in the downloadable white-gallery:
demo-white-background.html



.dg-image-gallery-next-over{
background-image:url('/images /right-white-over.png');
}

the url should start without '/'
(with the '/', the right arrow gif can't be found - when the mouse pointer is hovering)
Daniel at 04:32AM, 2012/04/22.
Maria
I did it!!! though I'm not very good in html:)
Beautiful gallery and easy script!
MANY THANKS!!!!!!!!!

Will change the colour of arrows, if you don't mind:)

www.artmaria.ru
Maria at 06:07PM, 2012/04/24.
jackcobain
thanks for a great script.. but how can i use thumbnail as a text in this script so that i can use text to be in different color when it is active or highlighted??
jackcobain at 02:56AM, 2012/05/04.
afpo
Hi
Great work .
I want to implement the thumbnail highlighting feature like yours in my gallery which i am developing in ruby on rail.So should i include your js file.plz help me i am stuck up
afpo at 09:45AM, 2012/05/15.
Travis
Dude- this thing rocks. Much thanks.

T
Travis at 12:42AM, 2012/05/23.
vj
hi,
great script but i want to use vertical thumbnails on left side
vj at 01:17AM, 2012/05/25.
Marcin
I have problem, as I can put only 16 photos inside the gallery, and it's the max (only 16 thumbails showing in the slider).
Can anybody help? I need more of them...
Marcin at 07:49PM, 2012/06/25.
flippdesigns
I love the look of this, but cant get it to work and i know it will be something daft that i am missing. i have downloaded the zip folder, i have put the stylesheets in my CSS folder and all the images in my Images folder, the javascript files are in my JS folder.
I open the demo.html file in Dreamweaver, change the links to the correct locations, upload it all to my server and i get this www.drbjewellers.co.uk/demo.html

what am i doing wrong?
flippdesigns at 12:37PM, 2012/07/18.
Sandor
Hi!
Can I use in thumb and in enlarge image a resize image not cropping image?
Sandor at 01:59AM, 2012/08/12.
Chris
Hi,

Thanks for this slideshow, it is great to use. I read somewhere that this version allows multiple slideshows on one page but I am having a lot of trouble doing so.

Could you please help me!?

Many thanks,

Chris
Chris at 10:28AM, 2012/09/02.
Gary
I love this script - It's brilliant!
... but I can't seem to get hte caption to be any color except white. I modified
.dg-image-gallery-caption {
position:absolute;
bottom:150px;
height:30px;
width:100%;
text-align:center;
color: #900;
... and it changed in dreamweaver but not on line. I see in the.js file that there are some "opacity=[0]" code (line 435), and that on line 600 there's a commented-out bit that mentions the caption.
Whenever I try to substitute something else for the .dg-image-gallery-caption style, the whole code stops working. I know just enough js to find my way around, but not enough to do anything new.
What's going on?

Thanks!
Gary at 09:08AM, 2012/09/19.

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 - 2017 dhtmlgoodies.com