Javascript Image Gallery Using Mootools (Part 2)
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 at 4:35 pm
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 at 8:09 pm
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 at 11:02 pm
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 at 11:25 am
I’ll be sure to let you know. And to credit you if I blog about it.
May 15th, 2008 at 4:36 am
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 at 6:22 pm
This is a really nice gallery and I like it, but it doesn’t work in Explorer’s most recent browser.
May 21st, 2008 at 6:51 pm
I’m working on making it work in IE.
May 21st, 2008 at 9:41 pm
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 at 6:50 am
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 at 3:22 pm
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 at 4:07 pm
@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 at 1:15 pm
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 at 9:03 am
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 at 6:00 pm
Really Nice
June 17th, 2008 at 8:06 pm
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 at 8:36 pm
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 at 11:06 am
Works great, thanks very much!
June 23rd, 2008 at 7:32 pm
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 at 2:38 am
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 at 11:11 pm
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 at 11:14 pm
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 at 9:05 am
Devin: image descriptions do show up now on your current script – great work!
June 25th, 2008 at 2:13 pm
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 at 4:15 pm
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 at 6:47 pm
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 at 7:43 am
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 at 8:09 pm
Is it possible to preload the next image in the slideshow and do a nice transition (fade) into the next photo?
July 9th, 2008 at 8:21 pm
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 at 9:12 pm
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 at 5:24 pm
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 at 10:16 am
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 at 2:18 pm
It’s not showing description on the first image. Is there a fix?
July 17th, 2008 at 6:31 pm
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 at 5:09 am
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 at 1:28 pm
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 at 2:22 pm
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 at 6:34 pm
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 at 6:57 am
This is great!!! THanks for this!
July 26th, 2008 at 8:31 pm
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 at 11:20 pm
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 at 12:41 pm
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 at 9:09 pm
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 at 6:34 am
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 at 6:47 pm
Is there any update for Mootools 1.2 official release?
August 21st, 2008 at 2:37 pm
Ive also encountered the problem in IE7 and i dont understand what to do to make it work :(
//Sam
August 21st, 2008 at 8:30 pm
Hey Devin, this script don’t work in IE! Suggestions?
August 22nd, 2008 at 4:21 am
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 at 9:47 am
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 at 4:41 pm
Description in first image?
August 24th, 2008 at 11:27 pm
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 at 7:08 pm
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 at 7:48 am
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 at 12:19 am
How can i add more thumnails? i can add only 12.
September 13th, 2008 at 12:55 am
ok nevermind, var slides :D
September 14th, 2008 at 1:45 pm
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 at 8:29 pm
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 at 7:39 am
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 at 11:31 pm
Still not showing description on the first image. Does anyone have a fix for this???
October 8th, 2008 at 10:19 pm
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 at 3:14 pm
Like robsub80, I have no left and right arrows showing up!?!?!?!
October 17th, 2008 at 4:04 pm
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 at 9:14 pm
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 at 11:36 am
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 at 6:38 pm
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 at 12:20 am
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 at 8:34 am
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 at 5:30 pm
Cool script. Cannot get description on first image either???
November 5th, 2008 at 3:39 pm
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 at 4:51 pm
i ment link from the large image to somewhere else…
November 7th, 2008 at 11:01 pm
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 at 4:40 am
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 at 9:37 pm
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 at 6:08 am
hi, where i can find similar for jQuery thanks
November 24th, 2008 at 8:33 pm
Nice. You should release this to work with XML though. Very nice though.
December 8th, 2008 at 2:32 am
I have problems with the size of the images in IE7, they don’t look good but in FF3 there are no problems.Why do you think this happens?
Thanks
December 10th, 2008 at 5:49 pm
so how do you make this scroll vertically?
December 18th, 2008 at 9:36 am
Hi..nice work and thanks for the code!
I’m not an expert in js, but I modified the gallery to fit my needs. (I modified a little the part with //the number of slides because I had to use this gallery on 3 pages in a site and on a page I only had 3 pictures in my gallery and the second slide was empty) It works in IE6, IE7, FF3 and Chrmome, but I have a problem with Opera: left and right arrows don’t work…any ideas?
This is the code I added:
var NrThumb = $$(’#wrapper a’).length //this holds the number of thumbs in a slide
var slides //holds the number of slides
if (NrThumb<=6)
{
slides = 1;
}
else
{
slides = 2;
}
Thanks again and keep up the good work!
January 6th, 2009 at 6:39 pm
Hello, wonderful gallery!
However, I’ve discovered that if the id=first image has a caption, it no longer shows up on load. Is there a way to fix this? Thanks!
January 8th, 2009 at 2:01 am
I have no idea what I am doing wrong but I cannot get the initial image to load.
When the gallery loads, it loads blank until a thumbnail is clicked.
January 10th, 2009 at 12:28 am
Great work!
I saw a couple of people asked about making the large image clickable so it opens an even larger version in a new window sized for the image. Is that available somewhere? Thanks!
January 27th, 2009 at 3:04 am
Beautiful gallery but…
The left and right arrow do not advance the thumbnails. Is this a known issue?
Browser: Opera 9.63
OS: Mac OS X 10.5.6
February 2nd, 2009 at 9:50 am
Great Work!
This is really fit my requirement,only problem is this is not working opera 9.6, and i did changes as u said, bt still not working friend.so could u pls fix this problem for us.
Thanks
February 4th, 2009 at 5:08 pm
This will not work when I have also accordion installed (see:http://www.stickmanlabs.com/accordion/ )
How can I make this work?
I’m not familiar with javascript
Thanks
February 6th, 2009 at 6:04 pm
Simply beautiful!
Is there a way to put an embed video to load instead of a large image ? ()
February 11th, 2009 at 5:21 pm
In order to have the right and left arrows show you have to define the directory differently than whas is in css. I also lightened the image so it would show up better. Here’s the code change:
url(’../images/right.gif’);}
I’m having my own issues as well:
1) my images are larger and I’ve found the right combination of settings to give me a larger image space, but it is no longer centred.
2) the fix could be to have the last image show in its entirety but nothing I do (playing with slider width) changes this. I can’t find where the number of thumbnail tiles are set.
3) other fix would be to allow ‘centered’ somewhere in css
Anyways, this would be helpful.
Thanks,
Andrea
February 11th, 2009 at 5:49 pm
Oh .. forgot to mention that I too would like to see the thumbnails at the top to make it obvious to browers.
Thanks,
Andrea
February 11th, 2009 at 6:24 pm
darned … wish I could do all my thinking at once.
I would like to make a suggestion … to allow the thumbnails to be wider than the main image.
As it is, it feels like its inside a frame and one just can’t make the thumbnails wider without the scrolling arrows falling away.
If my image frame is say 570 … I would like to make the thumbnails as wide as 750 or maybe even 800.
Sorry
February 13th, 2009 at 11:34 pm
hi there,
This image viewer is just what i am looking for. However i am having great difficulty in getting this to work. I am only a basic html user, any tips?
February 14th, 2009 at 1:37 am
What are your issues?
February 15th, 2009 at 4:38 pm
ok,
well, do i have to create a seperate css style sheet or just paste the text into the header area of my html sheet?
February 15th, 2009 at 5:11 pm
This is how my attempt at using your code has gone:
http://www.ladymbridalgowns.co.uk/Javascript%20Image%20Gallery%20Using%20Mootools.html
I have put a css style sheet together too.
February 16th, 2009 at 10:50 pm
Alrighty, I’m no expert and it took me a long time to figure it out, but here it goes:
1) you must copy the js and css files into your directory so they show up as a source, not just a file or html page (see below)
2) you need to have your photographs ready and what I found was that you don’t have to resize them to create a thumbnail.
3) you have to make sure that all things point to the right directory file … including saving the right/left arrows.
~~~~~~~ Code looks like this ~~~~~~~~~
Left
Right
You can see my page:
http://www.springhill-photography.com/newimages.html
February 16th, 2009 at 10:51 pm
dang … code doesn’t show up.
In the script there is an email address for the creator, I think maybe you need to make directo contact.
I believe at the beginning of this tutorial there is also contact info.
sorry, don’t know how to make the code show up for your to look at.
Andrea
February 17th, 2009 at 10:31 pm
hey Andrea,
Thanks for the tips. I got it mastered!!!!!! Once i have finished adding all my pictures i will post a link!
Thanks for your help!
Tim
February 19th, 2009 at 7:12 pm
Hi there,
It seems the image viewer will not let my view more than 12 images in the slider, why is this?
February 21st, 2009 at 8:56 am
HI there,
Here is my version of the image viewer:
http://www.ladymbridalgowns.co.uk/portfolio.html
For some reason the images look horrible in IE they look fine in firefox, is there any reason why this could occur?
March 2nd, 2009 at 12:13 am
Definitely a great looking gallery, thanks for the various comments and tweaks on this one also
March 6th, 2009 at 9:58 pm
Yes, I’ve been running into a lot of the same problems.
+ Why can’t you add more than 12 images?
+ Why don’t the left/right arrows show up?
Help! Any help would be greatly appreciated. :)
March 7th, 2009 at 3:40 pm
In order to have more images show up you have to go into the js file. Near the top you’ll note the number of thumbnails is defined … change to a higher number, but I would only do it by 2 and as you add images raise that number. If you change it to say 8 or 10 right away when you reach the end of your sliding bar there will be a lot of blanks pace.
I had to lighten the right/left arrow images to have them show up on my black background, even so, they seem to load slower than my larger images.
Make sure that whatever directory you added the images to is the one referred to in the css and js files.
This is truly a wonderful gallery and I am grateful to the creator because I had been looking and looking for a really long time … all were much, much more complicated and finicky than this one.
Andrea
March 8th, 2009 at 3:53 am
Hey guys this gallery is just mind blowing! Thank you, thank you, thank you!!!
You’re just too generous!
March 10th, 2009 at 9:24 pm
As a coding noob I’m stoked a the relative simplicity of this Gallery solution.
If I can get it to behave itself enough for prime time I will be buying you a beer, or two, or ?
Hey, let’s all just ignore IE and hopefully it will, just, disappear…..
March 30th, 2009 at 5:53 pm
I’d like to modify this gallery so that the wrapper shows a grid of thumbnails (say 5 x 5) that scroll by to show another 25 thumbnails rather than a row. I’m new to this, but if you could point me in the right direction, that’d be great…
April 8th, 2009 at 3:07 am
OK, this is going to sound insane, but we have found a way to integrate links in to the system. It’s not pretty, but it is simple and it works. Unfortunately, you can’t link the actual image, but you can have a text link that shows up above or below the image:
1) Add an iframe to the page
2) for each link, create a separate html page that has the text link in it
3) Use the href associated with the thumbnail to load the external html page with link in to the iframe.
4) abracadabra, you have a link hack
April 23rd, 2009 at 9:20 pm
Hello, very nice script!! Thanks very much.
I have only one problem going on wit this script, the situation its like this: I need to set up two slideshows in the same document, but when i put both of the codes together, the second one doesnt show. please help me, i getting headaches and more than 6 hours of pain typing and clicking!! how can i fix this??
May 5th, 2009 at 1:09 am
Maybe this is just my limited understanding of javascript, but this can’t seem to handle vertical/portrait images. My landscape photos look great, my portrait ones… it just cuts them off. No matter how I’ve resized them, it makes the width fit and cuts off the rest. Any ideas?
May 5th, 2009 at 7:51 am
Hey there, is there any way to get the image descriptions box to sit to the right hand side in a column instead of across the top? cheers!
May 5th, 2009 at 9:53 pm
Ive successfully implemented this into my website but was wondering if there was a way to make the next and prev buttons disappear when it reaches the end of the sliding div?
May 5th, 2009 at 9:54 pm
Another thought: if the next prev and button graphics can change that would work too as I already have rollover effects on them.
May 7th, 2009 at 4:14 pm
Very cool!
May 15th, 2009 at 1:29 am
is there any way you can have a full sheet of thumbnails instead of the slider?
May 15th, 2009 at 9:32 am
Jaswinder Virdee are you on crack? Write it yourself…
May 18th, 2009 at 6:45 pm
@L add margin-left:300px (or however large your image-width is) to #fullimg p, #fullimg span{ in the CSS file.
Mine looks like this:
#fullimg p, #fullimg span{
position:absolute;
color:black;
margin-left:295px;
width:200px;
padding:6px;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
Does anyone know if you there is a way to use HTML in the description? I want to add line breaks.
June 1st, 2009 at 9:54 pm
I have made some adjustments to the gallery that I did not have room to post here. I created a tutorial at
http://www.wanndesign.com/?p=92
- Remote photo linking
- Code/links can now be implimented in the image descirption
- Adjust caption to render as supporting copy
- Bug preventing photo descriptions from showing up on the
first image fixed
I also managed to show the slide bar above the main image. I did not include this in the tutorial, but if anyone can’t figure it out, let me know and I will add it.
June 3rd, 2009 at 10:30 am
I am trying to use this code for a friend’s gallery. There seems to be a problem at the moment with your Demo js. The main images are not loading!
June 7th, 2009 at 9:15 pm
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 2:45 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
June 9th, 2009 at 1:53 pm
Hi there,
Many thanks for the gallery!
As stated above “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.”
How to add the attribution?
cheers
June 17th, 2009 at 2:21 pm
Someone have any fix to add var slides in function of the numbers of pictures?
Great work!!!
June 23rd, 2009 at 5:56 am
Hi to all! anybody fix it to browser Opera 9.60? I need help! arrows left and right dont work in Opera 9.60!
June 30th, 2009 at 10:29 am
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
July 1st, 2009 at 8:57 am
Hi,
Moving left and right doesn’t work in Opera.
Any Solutions??
Plz Reply!!!
Thanks!!
July 9th, 2009 at 8:19 pm
Great gallery, I’ve only begun building my website, but I was wondering how I should attribute the gallery.
Thanks.
July 30th, 2009 at 7:24 pm
Hi Andrea, is it possible to make a smoth transition without seeing the load image or empty background.
Thanks for your Help!!
PS: Nice gallery!!!!
August 2nd, 2009 at 3:12 am
great gallery devin, thank YOU!
i needed the ability to richly format captions with multiple paragraphs and links, and was able to do this as follows:
i changed the code to use the “item” class in the li elements instead of the thumbnail link, and i now put the caption in a separate div outside the thumbnail link. this allows any code as far as i can tell!
hope this helps, and thanks again!
August 12th, 2009 at 8:15 pm
Hello,
By the way, Love the gallery.
I would love to use it… but my site is fully jQuery.
For those who also use jQuery and are interested, I am currently trying to re-create this gallery for jQuery. Just a heads up for those who have not found a good enough image gallery in jQuery.
August 17th, 2009 at 12:06 pm
This gallery is excellent! I would like to make a slight alteration but I only have limited JS knowledge. I need to use the gallery on several different pages within the same site and using different numbers of pictures, therefore differing numbers of slides. Also could it be possible to continously scroll through the slides so that when all pictures have been gone through the cycle starts again. Any advice would be greatly recieved.
August 19th, 2009 at 9:24 pm
[...] amigable Javascript para tu galería de imágenes utilizando mootools. Requisitos: Mootools v1.2 Visitar [...]
August 24th, 2009 at 9:52 am
[...] Demo Visit Website :image gallery, mootools, [...]
August 30th, 2009 at 6:53 pm
Alex … this is not my script I was able to adapt it somewhat to serve my own needs.
I do not believe there is a way of doing what you suggest and each image needs to load individually. For what you suggest I believe you’d need a scrolling gallery.
Sorry I have no more information than what I have provided.
Andrea
September 13th, 2009 at 5:01 pm
I customized the stuff and then found it doesn’t work in opera. Damn! Is there any solution? Feel ready to pay for it.
September 15th, 2009 at 11:08 pm
has anyone solved the bug where the first image doesnt show up until a thumbnail is clicked?
September 16th, 2009 at 3:35 pm
Hi i have mod the javascript
now count the number of images and calculate the number of slides in automatic , I want to share with the community
where i can send my mod?
September 30th, 2009 at 2:48 pm
Dear Stefano,
I’m interested in your mod. May be you can share it here with us as a comment?
Dries
October 7th, 2009 at 10:33 pm
I integrated the Mootools scrolling thumbnail feature with Lightbox 2.02 for my image gallery. However, I wanted to know if there was a way to hide the previous arrow when at the beginning of the thumbnail images and hide the next arrow when at the end of the thumbnail images? Right now if a user clicks my arrows when additional thumbnails are not available, an error pops up. I’d like to just not have that arrow be shown when content in that direction is no longer available. I greatly appreciate the help!
Thanks,
Dre’
October 8th, 2009 at 6:55 am
Help me /
In my saite (joomla) i have mootools v 1.1
This gallery do not work in mootools v 1.1
How change code in this nice slideshow ?
October 17th, 2009 at 4:26 am
This is awesome. Design is simple, but effective! Thanks!
Btw, is there a white background version? If not, is it possible to do so?
Let me know, and thanks!
I need it quite soon, thanks so much, and I appreciate your amazing work!
October 24th, 2009 at 8:58 am
hi there –
i love this gallery and have been tweaking it to fit my needs, but have run into a problem: on one of my test pages, the images load, but the slider no longer slides. onHover’s work on the left and right gifs, loading gif works, but no sliding. i have another test page where everything still works… can’t figure out the glitch. both are running in firefox (latest version).
also,
@bitkahuna – i would love to see the code that you modified to add links in the seperate divs. i understand the principles, but can’t seem to implement the changes myself. any help would be so great! attribution and link-backs given!
October 25th, 2009 at 1:13 pm
Very beautiful
October 30th, 2009 at 10:54 am
Hi, I think this is great. I am looking to use for a project but have been told it needs to autoplay. Is this easy to do?
November 17th, 2009 at 2:22 pm
Really a nice thing. I am using it in one of the site which required a image gallery, with number of images and that too high resolution.
The script is so easy to integrate & use, Thumbs up to you all !!!
December 15th, 2009 at 8:25 pm
Fantastic! I love this gallery, and how straightforward it was to implement.
One teeny, tiny little thing that caused me a little grief (because I only know enough webbing to get me all tied up) was opacity for the text descriptions in IE.
Simple enough fix- add the line “filter: alpha(opacity = 50)” to the imagegallery CSS file after the opacity line… IE uses a scale of 0-100 rather than 0-1, so 50 = .5, if that makes sense.
Just thought I’d share… stupid IE! Thanks again for sharing this great gallery!
December 21st, 2009 at 5:23 pm
[...] Image gallery by tutorialdog.com – A solution for creating a HTML friendly Javascript image gallery using mootools. [...]
December 22nd, 2009 at 4:16 pm
Really gud one keep it up….
December 29th, 2009 at 10:37 pm
thanx
January 2nd, 2010 at 9:46 pm
[...] Visit » [...]
January 25th, 2010 at 3:05 am
[...] Visit » [...]
February 3rd, 2010 at 9:53 am
[...] Javascript Image Gallery Using Mootools (part 2) Mootools 1.2 [...]
February 24th, 2010 at 9:11 am
Really cool script, worked perfectly. Thanks a lot !
March 1st, 2010 at 12:41 pm
[...] Javascript Image Gallery Using Mootools (part 2) Mootools 1.2 [...]
March 7th, 2010 at 1:45 am
I just have 4 thumbnails but there are still left and right arrow
March 26th, 2010 at 9:45 pm
Hi all
First at all i want to say thanks for this great script!!!
secondly i want ask for your help, i am using the scripts and all works really great BUT I need to send a LINK to the SPAN area which is designed for the text. how can i do this as only text can be sent to the are :-( ?
I would really apreciate all kind of information you will be able to provide me with
have you all a nice day
best regards
bladimir
March 31st, 2010 at 8:14 pm
cialis generika rezeptfrei sildenafil tabletten cialis deutschland cialis kaufen buy cialis
generic cialis 100 mg
cialis germany cialis kaufen shopzilla cialis cialis bestellen cialis rezeptfrei kaufen shopzilla softcialis
April 1st, 2010 at 10:06 pm
If a page add two galleries, then the second does not work right and left arrows, how to solve this problem?
Thank you!
April 10th, 2010 at 11:53 am
Someone else a while back asked about veritcal/portrait images. I can’t get them to work either… It just cuts them off, or I have to resize the height of the gallery, which to show the whole image makes it so you have to scroll to get to the thumbnails (annoying). No matter if I resize an image in Photoshop it stays the same height on this. Any suggestions?
April 12th, 2010 at 10:37 am
This photo gallery is excellent! I too want to modify the scrolling arrows, which is to enable and disable the left/right gifs depending on the number of thumbnails for the slider. Any suggestions will be much appreciated!
April 30th, 2010 at 12:34 pm
Worthy material. Has taken into consideration a lot of the useful. I wish successes I Can tell with confidence that the blog will be will replenish
April 30th, 2010 at 1:20 pm
[...] Visit » [...]
May 5th, 2010 at 6:24 am
In this when the images goes more than 12 the sliding functionality is not working
can u provide me the proper solution for this problem
May 7th, 2010 at 8:49 am
If you want to show more than 12 images, just modify the folowing setting in imagegallery.js
// CHANGE THIS !!
var slides = 2; // NUMBER OF SLIDES IN SLIDESHOW.
Good luck!
Derek
May 20th, 2010 at 4:03 am
This code works great in FireFox but for some reason it doesn’t seem to work/load properly in the most recent IE. I’m not quite sure what I’m doing wrong. Is there something I need to add or edit in order to get it working in IE? I also tried your demo on IE but it wasn’t working either. Could there be a conflict somewhere?
I saw something about removing commas? I’m not sure what you meant by that. In addition, I also saw something about removing something that conflicts with IE? What is it that I need to remove in order to get it to work.
May 21st, 2010 at 10:41 am
Thanks a lot, really appreciate this.
May 21st, 2010 at 10:46 am
Wonderfully done. Congrats.
May 21st, 2010 at 11:00 am
Just love the fonts. Great set… I’m going to use these for a new website. Thanks a lot.
May 25th, 2010 at 2:58 pm
Thanks! Helped me a lot.
July 2nd, 2010 at 1:11 pm
Hey,
i was wondering why the large picture is too large that it only shows a little bit of the picture in ie, while in firefox it resize the picture to fit the view? i don’t know if that was the problem others over here had, but i tried all the things that is recommended here to fix problems in ie, but it still is not working.
But i love the gallery!! nice work here :)
July 2nd, 2010 at 2:36 pm
i figured it out :)