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