New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
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=
Works great !!!
Thank you very much :)
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?
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
Sorry, Dreamweaver 4 chokes on the
listeners : {
line in the script.
I don't know how to fix this error.
Thanks,
Darrel
You have an error in your code. A comma is missing before the word listeners
el : 'dg-image-gallery',
listeners : {
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.
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.
... 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!
My only change was to put back in the
<a class="dg-image-gallery-link" href="Wiring_assets/006_full.jpg">DHTMLGoodies.com</a>
line, and to wait a few hours. I don't think it took that long for the server to find the .css file because other styles were shown. Does the 'link' line effect the 'caption' display?
I have slowed everything down and increased the startup pause because I have too many images. I would like to stop at the end and have the last image be a 'click here' to move on to another slideshow with more images
I would like the slideshow to stop at the end - How can I turn off the 'start over'?
Thanks
Gary
I have a script that I have been using elsewhere to open a link in a smaller new window so that the viewer won't get confused about how to get back (I do demos and tutorials for dollhousebuilders who are often challanged on the computer)
function newWinLinks() {
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className == "newWin") {
document.links[i].onclick = newWindow;
}
}
}
function newWindow() {
var winName = this.id + "Win";
var linkWindow = window.open(this.href,winName,"width=900,height=800,resizable=yes,scrollbars=yes");
linkWindow.focus();
return false;
}
This opens with class="newWin" in the link tag, but it doesn't work within:
<a class="dg-image-gallery-link" href="ThisPhoto.jpg">DHTMLGoodies.com</a>
I tried nesting it with <p></p> as you did with css classes for rollovers, but that didn't work here. Can this be incorporated in the "dg-image-gallery-link class"?
Post your comment
Comment preview: