Javascript Image Gallery Using Mootools (Part 2)
Javascript Tutorial written on May 12th, 2008 Leave a comment
Last time, I provided a reasonably decent solution for creating a HTML friendly Javascript image gallery using mootools. After taking in some of its faults, and learning more about javascript, I’ve rewritten the whole code, and have came up with a new version, a simple, easy to use gallery that everyone can use.
Features
- Anybody Can Use It - If Javascript is confusing to you, no worries. This solution doesn’t require any javascript knowledge. The only work require is one variable in the javascript & the actual HTML for the images.
- Thumbnails - Unlike the previous version, you can now embed a different/smaller image in the previews.
- Preview Slider - Easily slide through dozens of photos.
- HTML friendly - Like the last time, this solution doesn’t compromise google bots or people with javascript disabled.
- Better Transitions - The large photos ease in & ease out when switching
- Image Descriptions - You have the ability to include a caption with every image
HTML
To set up the gallery properly, we need to write the necessary HTML to create the large image stage and the thumbnail slides. For the thumbnail slides, we’ll use an unordered list (<ul>) and list-items with links. The link tag will provide the path to the larger image to show on the stage and the img tag displays the thumbnail. The “moveleft” and “moveright” links move the slides left and right on the page.
<div id=”img_gallery”> <div id=”fullimg”> <img src=”images/ajax-loader.gif” alt=”loading” class=”loading” width=”24? height=”24? /> </div> <a href=”#” id=”moveleft”>Left</a> <div id=”wrapper”> <ul id=”items”> <li> <a href=”LARGE IMAGE” id=”first” class=”item”> <img class=”thumb” alt=”img” src=”THUMNAIL”/> </a> </li> <li> <a href=”LARGE IMAGE” class=”item”> <span>DESCRIPTION HERE</span> <img class=”thumb” alt=”" src=”THUMBNAIL”/> </a> </li> </ul> </div> <a id=”moveright” href=”#”>Right</a> </div><br clear=”all”/>
Now you need set up the top part of the web page. For this part, we’ll need to reference the css for the gallery, the javascript for the image gallery and the mootools 1.2 release. Also, it’s always safe to declare the webpage DOCTYPE as XHTML so that it’s javascript compliant.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javascript Image Gallery Using Mootools</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="mootools-12b.js" type="text/javascript"></script> <!-- MOOTOOLS 1.2 BETA --> <script src="imagegallery.js" type="text/javascript"></script> <!-- IMAGE GALLERY --> <link rel='stylesheet' href='imagegallery.css' type='text/css' /> </head>
CSS
Now comes the cascading style sheet to create the design for the image gallery. The trickiest parts of the CSS is definitely the slider. For the slider, we create the buttons for moving the slider forward and back, and thumbnail area. The unordered list tag holds the thumbnails, but what makes the slider work is that the width of the unordered list is very large and the parent div of the unordered list (called the #wrapper) is the width of what will actually be displayed. That way the javascript can move the position of the unordered list to show different thumbnails. The key to the #wrapper CSS is the “overflow: hidden” attribute which allows the thumbnails to stretch out horizontally and not be in view.
body{ background:black; color:white; }
#img_gallery{ margin:50px auto; width:500px; }
#img_gallery a{ outline:none; border:none; }
#img_gallery a img{border:none;}
/* --- IMAGE STAGE */
#fullimg{
width:500px;
overflow:hidden;
height:380px;
}
#fullimg img{ width:500px; }
#fullimg p, #fullimg span{
position:absolute;
background:black;
opacity:.5;
color:white;
margin:0px;
width:500px;
padding:6px;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/* --- SLIDER --- */
#img_gallery #wrapper{
overflow:hidden;
padding:4px 2px;
width: 460px;
float:left;
height:50px;
background-color:#181818;
position: relative;
}
#items{
margin:0px 0px;
padding:0px;
list-style:none;
width:50000px;
position: relative;
letter-spacing:0em;
}
#items li{
float:left;
list-style:none;
margin-right:2px;
}
#items .thumb{
width:75px;
height:50px;
cursor:pointer;
margin:0px;
padding:0px;
}
#items .large{
display:none;
position:absolute;
}
#fullimg .loading{
width: 24px;
height: 24px;
}
#fullimg .thumb{display:none;}
#items .item p, #items .item span{
display:none;
text-indent: -2000em;
}
#moveleft, #moveright{
margin:0px;
height:58px;
color: white;
width: 16px;
text-indent: -2000em;
text-decoration: none;
z-index: 1000;
display:block;
cursor: pointer;
float:left;
}
#moveleft{background: url('images/left.gif');}
#moveright{background: url('images/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }
Javascript
The javascript is built for the most recent build of the mootools beta 1.2. I’ve heavily commented the code which you can view here. The only thing that needs to be changed in the javascript is the number of slides in the gallery.
var slides = 2;
License
You are NOT allowed to distribute this software without attribution. This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
May 12th, 2008
Really nice it was exactly what i was looking for unfortunatly im more of a JQuery user these days… Could you make the exact same thing but using Jquery Please. Nice New Layout By The Way.
May 13th, 2008
Great, thanks!
Your first one was a great inspiration for me… I’ll be using it together with some other js/css techniques to redo my portfolio.
It will kick ass :)
Love the redesign, btw. Looking good.
May 13th, 2008
Thanks for the complements on the new layout fellas. It’s good to here you’ll be able to make good use of the gallery in the future Stefan. I’d love to see how it turns out.
May 14th, 2008
I’ll be sure to let you know. And to credit you if I blog about it.
May 15th, 2008
My only suggestion is that there be some sort of indication on the slider for start and finish. Of course, one could upload a thumbnail that says “Start” or “Finish” I suppose to indicate that.
I’m really liking the simplicity of it! Nice work mate!
May 21st, 2008
This is a really nice gallery and I like it, but it doesn’t work in Explorer’s most recent browser.
May 21st, 2008
I’m working on making it work in IE.
May 21st, 2008
I’ve fixed the problem in Internet Explorer. It turns out it doesn’t work in IE if you put commas at the end of statements for listing out properties. Go figure :-/
June 3rd, 2008
Hi, is it possible to add in another onclick function onto fullimg to open it in an even bigger resolution in a new window?
June 10th, 2008
Just a simple question before I plug this bad boy in!
If I wanted to do larger thumb images for the carousel below the main image and set the number of images in the scroller to 4 instead of 6, for example, do you foresee heavy modification being required. Just looking for a heads-up estimate, I can do the coding so please don’t think I mean “Can you do it” or any thing like that :)
Thanks a bunch -
Daniel
June 10th, 2008
@Daniel There isn’t that much you need to do, just change the offset variable and of course the number of slides. I don’t know how your making the CSS look, but depending on the size of the thumbnails and the CSS, you’ll decide the offset. The offset is basically the width of a slide. Hope this helps.
June 13th, 2008
Hey,
not really sure why but the thumbs and the pictures don’t appear in IE. Not to sure to understand the comma problem you’re talking about either.
thank you
June 15th, 2008
Hi Devin, very good job with this gallery!
I must use your gallery inside a page where i’m already using a mootools 1.2 (current official release from mootools.net - uncompressed version - 94,2Kb) for an AJAX request and others effects.
I’m not a Mootools guru, but I know it’s not possible to use in the same page 2 (similar) core of Mootools script: in fact your gallery doesn’t work if I leave in the HEAD tag your mootools-12b.js file and “my” mootools-1.2-core-nc-.js.
How can I use your gallery script using mootools 1.2 NOT BETA release?
Thanks from now!
June 16th, 2008
Really Nice
June 17th, 2008
Hey All,
Awesome job Devin, it is very nice.
I modified your code to work with Mootools 1.2 Official Release, I’m just not sure on how to post the new .js back to you, haha…
-Sean
June 17th, 2008
Sorry for the double post, the one other thing I noticed is the var slides. Maybe it’s just me, but I understood that as number of images, not number of pages in the scroller, to me it should read ‘number of slides, a slide is 6 images’…
Again, awesome job!
June 23rd, 2008
Works great, thanks very much!
June 23rd, 2008
Devin: have you considered inserting some sort of ‘image loading’ .gif transition indicator to prevent an incomplete image from loading? I noticed that the script calls and fades-in images even if they are still in the process of loading.
Btw, I like what you’ve done.
June 24th, 2008
I was able to add a loading animation before the new image is completely done loading. This fixes the problem where the transition occurs soon than the image completely loading.
June 24th, 2008
Sweet, I couldn’t figure out how to get a loader in there, thanks, but now that you’ve rewritten it, the description will get cleared when your loader gets cleared, so you need to put the description injection in the large image onload as well. Also if you want to position the loading gif a little more, add:
#fullimg img.loading {}
to your CSS and style as needed.
Thanks Again Devin, made my life a lot easier!
June 24th, 2008
Really love that gallery, it’s simple and stylish!
Devin: A problem I found is, that it doesn’t display the image descriptions in your v1.1 online demo of the script. Maybe it does interfere with the animated loading.gif? (just an uneducated guess)
Also a port to Mootools 1.2 final would be great.
June 25th, 2008
Devin: image descriptions do show up now on your current script - great work!
June 25th, 2008
I’ve fixed the image descriptions, ported the gallery to work with mootools 1.2 release and made the current image smoothly (but quickly) fade out to the loading image. If you’re using an old version of the gallery, it would be a good time to replace all the files because I’ve edited all the files and moved some files into their own folders.
June 25th, 2008
Hi Devin,
This is a really nice slideshow. Thank you. I’m a total javascript newbie, but I’d like to be able to turn off the flash/rollover feature on the buttons when you can’t scroll anymore, which seems to be the issue T9 David had with the scrollbar. And, I’d like to give the thumbnail corresponding to the displayed image a border. Can you help?
Thanks again!
Felicia
June 29th, 2008
cool beans. just wondering if there is a way to put a link in either the description text or the big image. Can’t right now due to illegal nesting of tags, but I am trying to think of a way to do this with CSS - or is there some other clever way I’m missing.
Thanks for the nice work.
June 30th, 2008
Will this work also for panoramas? Just wondering. I love your solution but I was wondering if the code can also work with panoramas.
July 4th, 2008
Is it possible to preload the next image in the slideshow and do a nice transition (fade) into the next photo?
July 9th, 2008
Hi Devin, nice job. I think this is what I’m looking for but I’m not clear on how to make in work in IE. Can you help us out? I think there were a few posts on it. Thanks!
July 9th, 2008
Thanks for this gallery, however there seems to be a problem. On both the demo on this page and my modified version it seems that the gallery can only be viewed once. On testing, I clicked every image in sequence and they loaded up as they should, but then going back and clicking on any image again to view again none of the pictures will load up. The only solution I have is to close the browser and reload the page and the images are there once more.
I’m testing using IE7 and using Expression Web as my editor. I’m still quite new to web design, and know virtually nothing about java.
Any suggestions?
July 10th, 2008
A very impressive gallery. Sadly, over 50% of users are using IE6 or IE7, so it seems we are all trying to make this work for those browsers. I tried adding this code but it didn’t work:
#computerusers{
use-browser: firefox !important;
}
It didn’t work XD
But no, seriously… you said above:
“I’ve fixed the problem in Internet Explorer. It turns out it doesn’t work in IE if you put commas at the end of statements for listing out properties. Go figure”
What do you mean by this? Help!
July 12th, 2008
Yeh… i am testing in both IE6, IE7 and Firefox. Firefox works best but it seems that I am encountering the same problem as with Mr S J Mcghee.
IE sucks! bigtime!
July 16th, 2008
It’s not showing description on the first image. Is there a fix?
July 17th, 2008
OMG this is a great script! Was looking for something like this for ages :)
Everything rocks in this expect that when I integrate it in my pages the rest of the mootools scripts stop working :(
I’m a noob in javascript so I don’t know how to fix the problem but I see this in Web Developer Toolbar :
http://i36.tinypic.com/1569vs5.jpg
How can we fix this ? Ooo and I’ve not even looked at IE to see how its working there lol!
Never mind I gave up IE6 long time back :D
Thanks!
July 18th, 2008
How do you integrate more than one image slider on one page?
I want to have a series of thumbnails for a particular category in it’s own slider (with say 4 or 5 sliders on the page - while removing the fullimg div as I will incorporate lightbox2 to open the thumbnail in its own overlay rather than display it above the thumbnails)
When I put more than one on the page only the first slider will scroll…
July 24th, 2008
Excellent image gallery. Out of everything I’ve found online, this one is certainly the best that I could find. For free :D
Now, a question: this all works fine in internet explorer, except I’m resizing all the images to a 4:3 resolution. When that’s viewed in internet explorer, they get skewed and stretched out. Being a n00b in javascript… why is that? and is there an easy fix?
July 25th, 2008
This is very nice. Two suggestions to make it even better:
- ability to ‘play’ the slideshow without manually advancing it image.
- pre-loading images, to avoid the pauses while loading.
July 25th, 2008
Only allows images to be viewed once in IE 7; this is a very major flaw and one that shakes my confidence in the MooTools 1.2 Framework. I’m currently using the Moo 1.1 framework - until such a time that the 1.2 gets it’s stuff together.
July 26th, 2008
This is great!!! THanks for this!
July 26th, 2008
This is exactly what I was looking for. I’ve been experimenting with the code for my daughter’s site (she’s been asking me to design one for months), and while it works quite well, I can’t figure out how to add more space in the slider to show more images. The slider only displays half a dozen at a time (which is fine), but I can’t go beyond the first twelve when I click left. Where in the code should I be adjusting this? I looked through the CSS wrapper/slider code and haven’t been able to figure out how to get it to go beyond the first two displays. Thanks!
July 31st, 2008
Can only be viewed once with IE. Firefox seems to work fine, but I need it to work in both since many use both browsers. Any suggestions to getting this to work in IE properly?
August 18th, 2008
The problem with IE and maybe opera is that the image.onload function is not executed when the image has been cached by the browser. So the image will load the first time around but not the 2nd time around. The fix comes from http://www.quirksmode.org/dom/fir.html
var tmp = new Date();
var suffix = tmp.getTime();
largeImage.src += “?” + suffix;
largeImage.onload = function()
{…});
This however will increase the amount of http traffic your site will generate, so be aware of that.
August 19th, 2008
Please help! I have a website template that is for adobe flash with text files for the edible regions. how do I put your photo gallery in the text file and get it to work?
Thank you
August 20th, 2008
If I can get this to work in IE this will be just the thing I was looking for to redo my photography website. Really nice job dude!
August 20th, 2008
Is there any update for Mootools 1.2 official release?
August 21st, 2008
Ive also encountered the problem in IE7 and i dont understand what to do to make it work :(
//Sam
August 21st, 2008
Hey Devin, this script don’t work in IE! Suggestions?
August 22nd, 2008
Okay you crazy kids, I FIXED THE Internet Explorer PROBLEM!!!!. One small draw back is that the smooth transitions I implemented in have to be taken out because IE can’t tell when an image is loaded. If you look at the actual js file, I’ve commented out the line that cause the problem in IE and made note.
What can I say… If someone finds a solution to correct this problem please let me and the rest of the community know.
August 22nd, 2008
Great Devin, it works in IE now! But, I found another bug. Its not possible to have a description on the first image :( Is there a workaround?
August 22nd, 2008
Description in first image?
August 24th, 2008
How does one ensure that images of varying x-y ratio don’t stretch out and become skewed when viewing with this gallery? I have a program that resizes them all to fit within the constrains of the img window; the problem is that when x < y, x stretches to fit the whole window. Is this in the CSS or JS… I cant’ seem to pinpoint the problem.
August 27th, 2008
For me using the code by ‘a developer’ fixed it in IE7 in a custom mootools script which had the same problem.
I used the folowwing code:
var tmp = new Date();
var suffix = tmp.getTime();
var largeImage = new Element(’img’, { ’src’: item.href + ‘?’ + suffix });
September 7th, 2008
Hey thanks for the code, any way of making the large image clickable to take you to an even bigger image or an html file?
I’ve tried several stuff, but since the way of getting the images is already a tag using it is not an option (i think…and tried:( )
any other suggestions?
September 13th, 2008
How can i add more thumnails? i can add only 12.
September 13th, 2008
ok nevermind, var slides :D
September 14th, 2008
Hi,
First of all i want to tell you Devin that this gallery is great.
But i have small problem with it. Mayby it’s my small of knowledge about JavaScript or mayby I don’t know css so good that i think, but is there any method to put the discription in the first image gallery ?
When I’m trying to put the discription in the first image in gallery it’s just disapear. When you click on the thumbnaill everything is ok. But when you loading the html file with the gallery, there is no picture on the start.
I hope I wrote here everything clearly. If not sorry for my lack of english ;)
Please let me know is there any chance to put the discrpition in the firs image.
Thanks in advance.
Wiktor
September 16th, 2008
In your current live demo of the gallery the progressive loading of the photo is visible, in former versions photos were only shown after fully loaded, otherwise the spinning loading gif wouldn’t make much sense.
September 18th, 2008
i tried the tutorial, but for some reason, the left and right buttons dont show up, you can still click where they are suppose to be and it works, can anyone help????
September 29th, 2008
Still not showing description on the first image. Does anyone have a fix for this???
October 8th, 2008
I love this image gallery. However, when using a description on the first image, it causes the first image not to appear. Therefore I had to remove the description. I noticed a few other comments regarding the same. Have you been able fix this “description” issue?
October 17th, 2008
Like robsub80, I have no left and right arrows showing up!?!?!?!
October 17th, 2008
Also, the latest Opera browser (v 9.60) doesn’t support the moving left and right to the next or previous slide.
October 18th, 2008
Hi, thanks!!
I also encountered the problem with the description messing up the first image. I tinkered with the code a bit, and now it works. However I’m not sure what I did to fix it as it’s essentially the same as before!!
Maybe someone can help understand how I ‘fixed’ it?
Here’s the code change, to imagegallery.js, where it deals with the initial image for the first time:
// INSERT THE INITAL IMAGE - LIKE ABOVE
inspector.empty();
var description = $(’first’).getElement(’span’);
// var des = new Element(’p').set(’text’, description.get(’text’)).inject(inspector);
if(description) {
// var desc = new Element(’p').setHTML(description.get(’html’)).inject(inspector);
var des = new Element(’p').set(’text’, $(’first’).getElement(’span’).get(’html’)).inject(inspector);
}
var largeImage = new Element(’img’, {’src’: $(’first’).href}).inject(inspector);
October 21st, 2008
Thanks for this great gallery!
I modified it to fit my needs and got it working in IE6, IE7, FF3 and Opera 9.6.
In IE the preloader gif is not working correctly though, it’s just flickering. Any idea how to fix that?
Another problem is that it is not possible to have a text in the for the first image, as it doesn’t load it anymore with the page, but with clicking the thumb. That’s a pity!
October 23rd, 2008
I must be missing something, cuz it works when I preview in dreamweaver, but I load it to my server and the images dont show? any ideas, I tried various servers?
October 26th, 2008
Great work Devin. Really, really nice.
However, like others I’m also having the ‘no description on first image’ problem.
I am basically on deadline, have been working all night, and now I’m getting a bit desperate. Please help…
October 29th, 2008
First image description fix!!! Well, it works for me.
Change very last block of code in the .js to this:
// INSERT THE INITAL IMAGE - LIKE ABOVE
inspector.empty();
var description = $(’first’).getElement(’span’);
//if(description) var desc = new Element(’p').setHTML(description.get(’html’)).inject(inspector);
if(description) var des = new Element(’p').set(’text’, description.get(’text’)).inject(inspector);
var largeImage = new Element(’img’, {’src’: $(’first’).href}).inject(inspector);
October 30th, 2008
Cool script. Cannot get description on first image either???
November 5th, 2008
HOW to add LINK to the big_image?!
i am not very good in javascript, so it is maybe easy problem…
Thanks
November 5th, 2008
i ment link from the large image to somewhere else…
November 7th, 2008
I really like this implementation compared to others I’ve seen. I’m having some problems with the CSS; specifically I’ve modified it to allow width & height at “auto” as some of my images are not all the same dimensions but I can’t center the images inside the container. Also trying to figure out how to put the slider on the top of the image, ie:
[slider]
[description]
[image]
Any ideas?
November 11th, 2008
Hi there. I really like the gallery, but when using it I have had some problems with the images looking distorted. Can anyone tell me what this could be caused by? When I change the image size it still does not display correctly and displays some odd behavior. Should the images be determined by the width and height of the #fullimg container? Thanks in advance.
November 11th, 2008
Hi awsome script, i only have a question is there any way to put some href or link in the description?
Thanks.
November 17th, 2008
hi, where i can find similar for jQuery thanks