New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

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

Mark Moran
Excelent !
Mark Moran at 05:13PM, 2011/02/24.
Carl Vaillancourt
Very smooth, well done.
Carl Vaillancourt at 11:57AM, 2011/03/02.
John de Figueiredo
I like it, but it doesn't seem to work in IE6 or IE7 ... any comments?
John de Figueiredo at 09:40PM, 2011/03/09.
Sasha
Hi There ! I need to decrease the height and width of this slideshow and place it in center, Anybody help???
Sasha at 10:23PM, 2011/03/09.
Admin comment
DHTMLGoodies
John,

The problem in IE6 and IE7 has been resolved(fixed in image-gallery-2011.js)

Sasha,

You can decrease the size of the slideshow by modifying the css file image-gallery-2011.css,

example:

by changing with of

.dg-image-gallery from 670 to 470

and by changing with of

.dg-image-gallery-thumbnail-container

from 630 to 430

You can also change the size of the thumbnails squares by modifying the css rule

.dg-image-gallery-thumbnail and the css for the left and right buttons .dg-image-gallery-previous, .dg-image-gallery-next

example:


.dg-image-gallery-thumbnail{
width: 80px;
height : 80px;
padding-right:2px;
padding-left:2px;
}

.dg-image-gallery-previous, .dg-image-gallery-next {
height:80px;
}






DHTMLGoodies at 03:56AM, 2011/03/10.
John de Figueiredo
Hi HTMLGoodies
Many thanks for your speedy response.
I'm afraid I still can't get it to work in IE6. I get the photos "listed" vertically, not across the bottom of the screen. And there are no "controls" available on the screen.
I have put a picture of what I see at:
http://www.johndefig.net/images/imageGalleryIE6.JPG
Regards - John
John de Figueiredo at 11:39PM, 2011/03/12.
Admin comment
DHTMLGoodies
I don't experience any problems in IE6 now. Have you downloaded the latest zip file and cleared your cache ?
DHTMLGoodies at 04:36AM, 2011/03/14.
John de Figueiredo
My first download of your Image-Gallery-2011 was Thursday 10th March 2011. I don't think there's been an update since then, has there?
I downloaded it again on 11th March and today (15th March) ... no change.
I have put two screen shots at:
http://www.johndefig.net/images/imageGallery2011IE6.JPG
http://www.johndefig.net/images/imageGallery2011IE7.JPG
to show what I see when I fire up the demo in IE6 and IE7 respectively.
Perhaps it works if I change some of the parameters?
Regards - John
John de Figueiredo at 12:02AM, 2011/03/15.
Admin comment
DHTMLGoodies
John,

It's probably a problem with your configuration.

Do you think you could you post the Javascript errors you're getting. At the bottom left corner of your browser window, you will see a yellow warning sign. Click on it to make the javascript error appear.

DHTMLGoodies at 05:16AM, 2011/03/15.
Mark Moran
//Beutifull image slide show, is a perfect design!!

Tks a lot for old slideshow image version, afound my own errors, and I have a successfull webdesign for my Christian Church!!!
God Bless You, ever!
Mark Moran at 03:44PM, 2011/03/15.
John de Figueiredo
Many thanks for taking the time to follow up, and explaining how to display error message.
Both IE6 and IE7 give Javascript errors:
Line: 325
Char: 3
Error: Expected identifier, string or number
Code: 0
URL: file://T:\TradesTests\PlumbingResources\images\Gallery1\demo.html
Clicking Next gives:
Line: 95
Char: 1
Error: 'DG' is undefined
Code: 0
URL: file://T:\TradesTests\PlumbingResources\images\Gallery1\demo.html
I'm sorry I don't know enough about JavaScript to solve this for myself. Any help you can give will be gratefully received.
Thanks - John
John de Figueiredo at 05:49PM, 2011/03/15.
Admin comment
DHTMLGoodies
John,

The error messages indicates that the path to your js files are incorrect.


Please make sure that you have these lines inside your demo.html file. Also make sure that the the css and js files are located inside the folders specified here. Example:

image-gallery-2011.css should be inside a sub folder called "css".

<link rel="stylesheet" href="css/image-gallery-2011.css" />
<script type="text/javascript" src="js/external/mootools-core-1.3-full-compat.js"></script>
<script type="text/javascript" src="js/external/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="js/image-gallery-2011.js"></script>



DHTMLGoodies at 05:17AM, 2011/03/17.
John de Figueiredo
Again many thanks for your response. But I'm afraid the problem remains.
I have carefully checked that the folder containing demo.html has subfolders css and js (and that js has a subfolder called external). And that the relevant lines above are contained in demo.html
The folder structure and files were created by unzipping image-gallery-2011.zip
The application works brilliantly in Firefox 3 (which suggests to me that paths are all correct).
But in IE6 and IE7 it gives the Javascript error messages recorded earlier and the screens at:
http://www.johndefig.net/images/imageGallery2011IE6.JPG
http://www.johndefig.net/images/imageGallery2011IE7.JPG
As you will see the IE6 and IE7 screens are slightly different.
If you can solve this I will be eternally grateful 'cos it's a brilliant application, we would like to use it in an educational environment (for plumbing students) and our current default browser is IE7.
All best wishes - John
PS I am in Melbourne, Australia
John de Figueiredo at 07:31PM, 2011/03/17.
Admin comment
DHTMLGoodies
John,

I think I need to see a live example in order to help you further. Right now, I'm just guessing :)

Would it be possible for you to upload you rfiles to jondefig.net and post the url !?
DHTMLGoodies at 01:54AM, 2011/03/18.
Assaf
Very nice script!

Two questions:
1) If I want that the bigger picture will be clickable and open a higher resolution image - how can I do that? is it possible?
2) I change the width of dg-image-gallery to 770px. Is there a way to increase the number of thumbs to 6 at the time?
Assaf at 02:56AM, 2011/03/18.
Admin comment
DHTMLGoodies
Assaf,

1) I have added some sort of support for opening a bigger picture in a new window now. What you have to do is to download the zip file again and replace your image-gallery-2011.js file with the one you find there.

Then you have to implement the "clickpicture" event(See instructions above).

2) You can change the size of the image gallery easily by making some changes to image-gallery-2011.css.

Example:

* Change width of .dg-image-gallery from 570px to 770px
* Change with of dg-image-gallery-thumbnail-container from 530 px to 730px
DHTMLGoodies at 04:04AM, 2011/03/18.
Assaf
Hi,

Thank you very much for your quick answer and modifying the code.
But are you sure you uploaded a new version of the js file? because when I re-download it I get the same file with the same timestamp (10/03) and it doesn't work...

Many thanks!
Assaf at 07:25AM, 2011/03/18.
Admin comment
DHTMLGoodies
Assaf,

Yes, the new version has been uploaded.

Please try to clear your cache and do another download.
DHTMLGoodies at 07:49AM, 2011/03/18.
Shirly
Very nice script. I have problems with it in Opera. In Opera I miss the thumbs.You can only see the large pictures.
Shirly at 09:35AM, 2011/03/18.
Admin comment
DHTMLGoodies
Shirly,

It's working in Opera 11. Which version are you using ?
DHTMLGoodies at 04:23AM, 2011/03/21.
Shirly
Oh oh oh,

checking my site in dreamweaver in different browsers, I was checking in Opera 9. It certainly works in Opera 11. Sorry!!
And it is a great image script.
Shirly
Shirly at 01:39PM, 2011/03/21.
Shirly
Oh oh oh,
I kept you busy for nothing. Sorry! In dreamweaver I checked my site in different browsers and it was Opera 9. In 11 it works great!
A great image gallery.
Shirly at 01:42PM, 2011/03/21.
Ron
I try to implement the gallery into my website.. there is a problem: my website contains css columns, and when i open the gallery into a column (div) there is only a list of the images... When i open the demo.html: he'll work properly. Maybe i'm missing something?
Ron at 03:17PM, 2011/03/21.
Admin comment
DHTMLGoodies
Ron,

Have you remembered to include all the required js code? You need to include the files at the top of your file, and the code to initialize the gallery.
DHTMLGoodies at 04:06PM, 2011/03/21.
Ron
thnx, but i've included the js files. I'm from holland mayby you can help me if you look to my site: http://www.tuinhuisneerkant.nl/test/verstappen.htm ..
and if you click on "schuttingen" then the image gallery has to be open, but it won't work. This is the link to the image gallery: http://www.tuinhuisneerkant.nl/test/schuttingen_poorten.html
If i try to implement a other image gallery, it is the same problem.
Ron at 12:21AM, 2011/03/22.
Izus
Script is great! But I have one question:
I need to start viewing gallery not from first image, but from the 7th, for example.
I've simulated click - script's show me an image, and text, but scroller is'n scroll to required position - it hold's on start.
Izus at 02:56AM, 2011/03/22.
Izus
Izus wrote:
Script is great! But I have one question:
I need to start viewing gallery not from first image, but from the 7th, for example.
I've simulated click - script's show me an image, and text, but scroller is'n scroll to required position - it hold's on start.

Also, there is a problem: if you click "Next" too fast - script also holds on some position and didn't scroll to active image.
All of this is tested in last version of Opera.
Izus at 02:59AM, 2011/03/22.
John de Figueiredo
Thanks for your continued offers of help!
I have uploaded my files (which are actually your files, since I haven't altered a single thing)
You will find the demo at:
http://www.johndefig.net/ImageGallery2011/demo.html
I have tested it with a number of colleagues in my office. It works in Firefox, Chrome and IE8 but not in IE6 or IE7 as far as we can tell.
John de Figueiredo at 01:13AM, 2011/03/23.
Admin comment
DHTMLGoodies
Izus,

I have created an update for this script which should take care of these issues. To specify a start picture other than the first, you can use the startIndex attribute, example:

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

which goes directly to the seventh picture

John,
I have looked at the url. I can see from the js code that you don't have the latest version. Please download the zip file and replace your image-gallery-2011.js with the one you find there.


DHTMLGoodies at 06:47AM, 2011/03/23.
John de Figueiredo
Oh dear ... I am an idiot ... but please don't quote me.
I was quite sure I had downloaded the latest version the day after I received my first reply from you ... maybe a "senior moment"?
Anyway I downloaded again and now it all works in IE6 and IE7 as you promised.
Thank you so much for your perseverance.
I'll let you know how we get on with it.
John de Figueiredo at 08:49PM, 2011/03/23.
aneesh
Thank you very much
aneesh at 12:20AM, 2011/03/24.
Ozi
Excelent, thanks for share
Ozi at 10:24PM, 2011/03/24.
Ron
Thanx for the script, it's wonderfull.
Only one trifle.. the script for the "clickpicture" event isn't compatible with google-chrome. The whole image-gallery vanishes.
Ron at 09:17AM, 2011/03/25.
Admin comment
DHTMLGoodies
Ron,

I have no problem with that event in my Google Chrome.

This is an example of working code:

function myPictureHandler(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',
startIndex : 5,
listeners : {
clickpicture : myPictureHandler
},
autoplay : {
pause : 2,
enabled : false
}
});
DHTMLGoodies at 09:51AM, 2011/03/25.
Duane
Thanks for this code - its great...

I'm a complete newbie and implemented this within 30-minutes (I'm thrilled).
Only question I have, is how does one set the time of the image rotation (speed at which images change)?
Duane at 05:48AM, 2011/03/30.
Duane
Never mind my previous request to set delay time - I found it (I was looking in the wrong place: image-gallery-2011.css)...

Thanks again...
Duane at 05:55AM, 2011/03/30.
Ron
Now, i solved the other problems, but still have 2 questions... Is there a way to set an background color to the "high-light-element". I did, but the whole picture turns blue.
My enlarged pictures have different sizes, is it possible to automatically fit a border around the enlarged picture. In Image slideshow 5 you'll see what i mean. I'm verry happy if someone can tell me the answers.
Ron at 01:31PM, 2011/03/30.
Admin comment
DHTMLGoodies
Ron,

Problem 1 is a bit difficult to solve since the highlight element is placed "on top" of the thumbnails(i.e. it got a higher z-index. You can try to set a low opacity in the css (opacity:0.2;filter:alpha(opacity=20);), but it will still affect the color of the thumbnail.

Problem 2 is easier to solve. I will try to address that problem in my next update to the script.
DHTMLGoodies at 05:32AM, 2011/04/05.
Ron
That would be very nice! Thanks.. I already did solve the first problem with setting a low opacity. It looks even nicer.
I look forward to the next update. Thanks a lot.
Ron at 06:06AM, 2011/04/05.
Novice
Sir. Let me start by saying that I am a complete novice at this. I am using dreamweaver to manage my pages. I want to insert your viewer into my existing page layout. I have a header, a main content and a right column.

How do I accomplish this? I really enjoy the design you have and would like to use it.

Thank you for your help.
Novice at 12:02AM, 2011/04/08.
Ron
Novice.. Where would you put the gallery? In the right column i guess? You download the zip-file and copy the whole content to the map which contains your site. After that you open the demo.html in dreamweaver and copy the head of that page in the head of your page. And you copy the body into the body of your page were you would have the gallery.
Ron at 01:52AM, 2011/04/08.
J Fox
Hi There,

I'm having a strange problem that's causing the script to display only 12 large images. As I add more to the html, the thumbnails appear, but no large image is shown. It's definitely not a pathing or file system problem. I went back to the demo code and added a further 3 divs for images without a problem. I can't see any significant differences between the code :/ any suggestions pls?
J Fox at 10:29AM, 2011/04/21.
J Fox
Apologies, I have resolved the problem above.
J Fox at 11:28AM, 2011/04/21.
Hardik
it's nice...
Hardik at 01:57AM, 2011/04/27.
RLB
Great stuff.. but it seems like when i add in lines for additional pictures (over 4) they aren't showing up.. scrubbed code and can't figure it out.. something in JS file?
RLB at 02:11PM, 2011/04/28.
Admin comment
DHTMLGoodies
RLB,

It shouldn't be a problem to add additional pictures. The problem is probably in your HTML.

Remember to use the same syntax as in the demo, i.e. code like this for each picture:

<div class="dg-image-gallery-image">
<img class="dg-image-gallery-thumb" src="demo-images/thumb_12.gif">
<span class="dg-image-gallery-caption">WHITE MUM<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/large12.jpg</span>
</div>
DHTMLGoodies at 08:38AM, 2011/04/29.
RLB
Thanks for the great help.. here is the code I'm using.. can you see an issue? its weird b/c I just cut/paste to make new galleries.. and all are working.. except for this one.




images/East_Hills/EastHills1.jpg





images/East_Hills/EastHills2.jpg





images/East_Hills/EastHills3.jpg




images/East_Hills/EastHills4.jpg



RLB at 09:08AM, 2011/04/29.
RLB
Lets try that again
div class="dg-image-gallery-image">
img class="dg-image-gallery-thumb" src="images/East_Hills/thumbs/EastHills1.jpg">
span class="dg-image-gallery-caption">
span class="dg-image-gallery-large-image-path">images/East_Hills/EastHills1.jpg


RLB at 09:10AM, 2011/04/29.
RLB
does it matter if my thumbnail picture is:
1. a JPG or a GIF
2. within a folder called thumbs (separate from main image)
RLB at 09:27AM, 2011/04/29.
RLB
sorry to be a pain.. just very frustrated..

here's the link to the page that is not working:
http://barbach.com.s95291.gridserver.com/new/east_hills.html

and to one that is:
http://barbach.com.s95291.gridserver.com/new/CNG.html
RLB at 09:33AM, 2011/04/29.
RLB
UPDATE ON ABOVE: Figured it out ! Was that the thumbnails were not GIF's.. once i changed that it all works all good !
RLB at 03:53PM, 2011/04/29.
Admin comment
DHTMLGoodies
RLB,

Yes, you have to use "web compatible" images (gif, png or jpg)
DHTMLGoodies at 07:47AM, 2011/05/02.
ofir
Hi,
im realy like your gallery that you made.
im trying to remove the main border of the gallery (with the gray color) with th CSS properties, and i didnt succseed with it. i`ll appreciate your help with it.
thanks ahead,

OFIR.
ofir at 02:13PM, 2011/05/02.
Admin comment
DHTMLGoodies
OFIR,

the border is defined in this CSS:

.dg-image-gallery{
position:relative;
width:570px;
height:600px;
border:3px solid #AAA;
}

at the top of image-gallery-2011.css

To have no border, set size to 0px or simply remove the entire line:(border:3px solid #AAA;)

Also make sure to clear your browser cache.
DHTMLGoodies at 03:22AM, 2011/05/03.
Dion
Hi,
No matter what i do i can't make this gallery work.
I have a page with a left table already occupied by a menu. the page is driven by CSS. I try to set the gallery up on the right hand side of the table, put all the things in the header exactly as in your demo - apart from naming my page image gallery 2011. I leave my CSS line there too, but all i get is a line of images in dreamweaver, and a blank box when i view it live.
I am at a loss, any advise would be appreciated.

Thanks
Dion at 10:44AM, 2011/05/04.
Tai
Hi there, great job on this script!

One thing though - when I enter my page from IE, it shows the caption and the copyrights aligned to the right side of the presentation (meaning, right next to the right arrow).

is there any way to fix that?

thanks in advance, Tai :)
Tai at 06:09AM, 2011/05/18.
Admin comment
DHTMLGoodies
Tai,

I'm not having the same problem in IE. Please make sure that you have specified a doctype at line 1 of your html file. Example: strict :

<

or loose

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

If that doesn't help, can you post a link to your image gallery ?
DHTMLGoodies at 09:11AM, 2011/05/18.
Ofir
Hi,
the preloader dasnt work that good - when i load the page with the images, the images path appears for a second before the complete gallery, and then i see it good.
what should i have to do to delay the preloader alittle more?
i`ll appreciate your help, please.
thanks.
Ofir at 11:33PM, 2011/05/19.
Admin comment
DHTMLGoodies
Ofir,

You can delay the start of autoplay a little bit

example:

var gallery = new DG.ImageGallery({
   el : 'dg-image-gallery',
   autoplay : {
     pause : 2,
     enabled : false
     buttons : {
     start : {
       txt : 'Start',
       enabled : true
     },
     stop : {
       txt : 'Stop',
       enabled : true
     }
   }
}
});
// Start autoplay after 4 seconds
gallery.startAutoPlay.delay(4000, gallery);


DHTMLGoodies at 12:47AM, 2011/05/20.
fluster
HI, thanks for the great code. Can this script support multiple slide shows on the same page? I have 6 different tables with a slide show in each. Everything works great on the first table, but none of the sliding features on the others work, and when an image is clicked in the other tables, it appears in the first.
Also, when a small image is clicked, the imagecaption appears as 'undefined'. It shows up on firebug, but it is nowhere in the code that i can find
You can visit the page here
fluster at 07:07AM, 2011/05/20.
Admin comment
DHTMLGoodies
Yes, this script should support more than one, but it's not the one implemented on your page. The script you are using does currently not support more than one slideshow on a page.
DHTMLGoodies at 08:07AM, 2011/05/20.
Bas van den Engel
I do realy like the script. All is going well in Firefox. But in IE8 starting the page thumbnails and captions are shown vertical accross the page.
Please have a look at www.fiekehordijk.nl/demo and take from the menu left "beelden" or "wandobjecten".

I tried the delay you mentioned above (2011/05/20) but that freezes the page. Start autoplay seems not to werk.
Bas van den Engel at 04:15AM, 2011/05/28.
Desi
Can i use this slide show in my personal website
Desi at 01:58PM, 2011/06/07.
Desi
I mean... this image gallery
Desi at 01:59PM, 2011/06/07.
Admin comment
DHTMLGoodies
Desi wrote: #
Can i use this slide show in my personal website


Yes, you can use it on your personal web site free of charge :)
DHTMLGoodies at 06:44AM, 2011/06/08.
Thong Phan
I have a problem . I wanna use ths image gallery in .cshtml file ( mvc3 , visual 2010 )
I change the css's path and javascript files path

then I copy all code in demo file then paste on cshtml file( of course i changed image's path) .
so my problem is :the thumb pic display but the larger picture don't display, all button don't display , and the image galerry not work.
please help me , thanks
Thong Phan at 01:58AM, 2011/06/09.
Thong Phan
There is css and js path in my project





Thong Phan at 02:25AM, 2011/06/09.
Thong Phan
There is css and js path in my project
href="../../css/image-gallery-2011.css"
src=="../../Script/external/mootools-core-1.3-full-compat.js"
Thong Phan at 02:28AM, 2011/06/09.
Dinesh
solution for prototype & MooTools
Dinesh at 03:12AM, 2011/06/15.
Admin comment
DHTMLGoodies
Thong Phan,

I need to see the url to your page in order to help you.
DHTMLGoodies at 07:26AM, 2011/06/15.
CJ
Thanks for the code. I am having an issue getting my CSS right I want it positioned in the center of a 960px wide page. I can get the main image and text centered but I can't seem to figure out what I need to change to center the thumbnails and keep it all within the 960px. Any help would be greatly appreciated
CJ at 09:38PM, 2011/06/17.
Admin comment
DHTMLGoodies
CJ,

Can you provide a link to a url where I can take a look at your code?

Thanks
DHTMLGoodies at 05:03AM, 2011/06/20.
Veronica
Hi! the script is brilliant!:) but the pictures I've got are in different sizes because som of them are analog scans and some digital, how do i get them to fit in the gallery?

Greatful for some help:)
Veronica at 06:21PM, 2011/06/20.
Admin comment
DHTMLGoodies
Veronica,

The pictures doesn't need to have the same aspect ratio.

What's important is that you

* Resize the large images to fit into the "bounding box" (For the demo, I believe it's 670x400pixels)
* Resize the thumbnails to fit into the small boxes (For the demo it's 120x120pixels).

If you're an "advanced" user, you can also modify image-gallery-2011.css if you want to increase or decrease the size of the bounding boxes
DHTMLGoodies at 06:49AM, 2011/06/21.
Kirstie Whitmore
Hi there,

I absolutely love this picture viewer - thank you for the code. I put it into my friends hair salon web site and all was well - but in the last week the thumbnail scrolling has stopped working in I.E. - It still works ok in /firfox and Chrome - so not sure what's happened.
the web site is : www.ddkhair.com.au
any help woudl be appreciated - thanks....
Kirstie Whitmore at 04:34PM, 2011/06/21.
Admin comment
DHTMLGoodies
Kirstie,

I have added a fix to this problem. It was caused by percentage values for the "width" property in the css.

This is what you should do:

open image-gallery-2011.js and go down to line 222.

Change the function storeNumberOfThumbnailsInView to the code below:

storeNumberOfThumbnailsInView : function() {
    var containerWidth = this.dom.thumbnailContainerParent.getStyle('width').replace('px','');
   if(isNaN(containerWidth)){
       containerWidth = this.dom.thumbnailContainerParent.getSize().x;
    }
    this.thumbs.noThumbsInView = Math.round(containerWidth / this.thumbs.width);
},

Or you can download the new zip file and replace image-gallery-2011.js with the file you find there.
DHTMLGoodies at 05:37AM, 2011/06/22.
Dr Hemant Damle
Really good for someone like me
Can we have text box if we hover on small image
See website www.nait.ca
I want to make something like that
pl let me know how to do it
Dr Hemant Damle at 10:40AM, 2011/06/22.
jenny
Hi! This is great! One question - Instead of having each enlarged image "center center" I'd like them to appear side by side, so that as the first one fades out, the next fades in to its right, then as it fades out, the third image fades in to the left, etc... rather than being stacked on top of each other. But ".dg-image-gallery-enlarged-image" is the class and "enlarged" does not appear in the html, it's in the js, could you please tell me how to do it?
thank you thank you
jenny at 10:38PM, 2011/06/26.
Rosa
Hi Admin.

Thanks for your great work! It is excellent. I had a question about the image gallery (specifically the thumbnail area). I wanted to know if it is possible to make the thumbnails (instead of just scrolling to the beginning when they end, or scrolling to the end when you click the left side arrow), form a continuous list of thumbnails.

I hope this makes sense. So if you are starting on Thumbnail-1 you see Thumbnail-last (to its left) and Thumbnail-2 to its right. Please advise.

Thanks!
Rosa at 04:05PM, 2011/07/06.
Admin comment
DHTMLGoodies
Hi Rosa,

Yes, it makes perfect sense.

The script doesn't support this at the moment, but I will put it on my to-do list.

DHTMLGoodies at 10:35AM, 2011/07/08.
christopher
hi admin.
Its a very great work! I like it so much.
But im having trouble using it on my website.
It wont run if I include jquery javascript.
i need the jquery for other script.
do you have any solution for me?
thanks in advance!
christopher at 11:00PM, 2011/07/09.
szzs
It the images representing products, and I wish to click to the selected item, how to solve that click taking me to a new page for example a page where I can see the specification of the selected item?
With other words how can I add for each large jpg a href, where the click may take me?


VERY IMPORTANT and in addition it is urgently needed... HELP!
szzs at 02:57AM, 2011/07/13.
szzs
Sorry, "It... " means: "If..."
szzs at 02:59AM, 2011/07/13.
Admin comment
DHTMLGoodies
SZZS,

I have made some modifications to the script in order to add better support for what you ask.

Download the latest zip file and replace image-galery-2011.js with the one you'll find there.

Then you can use the "clickpicture" event handler(explained above)

Example code (the html file where you implement the gallery):

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

The function "pictureHandler" will be executed when someone clicks on the large pictures.

You should also add id's to each div class="dg-image-gallery-image" element,

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>

In this example, the id is set to "product1".

When someone clicks on this image, they will be redirected to

http://yoursite.com/product.html?productId=1

DHTMLGoodies at 07:08AM, 2011/07/13.
Admin comment
DHTMLGoodies
christopher,

Please take a look at this page:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Try to add

jQuery.noConflict();

on the line above

var gallery = new DG.ImageGallery({

of your html file,

or you can add this line:

var $j = jQuery.noConflict();

But this means that you'll have to use "jQuery" or "$j" instead of $ in the rest of your code when you refer to jQuery.

DHTMLGoodies at 07:22AM, 2011/07/13.
Keith
I am trying to get this to work within an existing site.

The small picture comes up but the large one just shows text. No box shows up either.
Keith at 02:13PM, 2011/07/13.
Warren
Hi

I cant get rid of the ScottPeckPhoto.com description even though Iam using my own Photos?
Warren at 08:14AM, 2011/07/15.
Admin comment
DHTMLGoodies
Warren wrote: #
Hi

I cant get rid of the ScottPeckPhoto.com description even though Iam using my own Photos?

You have to fill in your own captions in the html file.Search for the text scottpeck in your html editor to find the places where you should put in your own captions.
DHTMLGoodies at 06:13PM, 2011/07/15.
Keith
I have most of the setup working on my site. My only problem is the right arrow, pause and play button are gone.
I have reduced the size of the box and that might have something to do with it.

How do I move them and get them to show up?

Thanks
Keith at 10:36AM, 2011/07/16.
Admin comment
DHTMLGoodies
Keith wrote: #
I have most of the setup working on my site. My only problem is the right arrow, pause and play button are gone.
I have reduced the size of the box and that might have something to do with it.

How do I move them and get them to show up?

Thanks

Open css/image-gallery-2011.css and find the following rule:

.dg-image-gallery-thumbnail-container {
position : absolute;
bottom : 5px;
width : 100%;
left: 20px;
width:630px;
/* height:???; - is set by the script based on property thumb height */

The width value should be the total width of your gallery minus 40

DHTMLGoodies at 12:18PM, 2011/07/16.

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