New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Image Gallery 2011
Demo | Demo with white background
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=
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;
}
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
It's working in Opera 11. Which version are you using ?
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.
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
}
});
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?
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.
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.
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.
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
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....
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.
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
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?
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
Post your comment
Comment preview: