Create a Spectacular Photo Gallery with MooTools
Aug 1st in JavaScript & AJAX by Jared Rhizor
Step 1 - Setup Your HTML, CSS, and MooTools
Before starting, take a look at the demo. It will be easier to understand the purpose of each step if you know the goal. First, create a simple HTML file, and add a link to the stylesheet (main.css) and to two JavaScript files (mootools.js and main.js). Create those files in the same directory. Then go to the MooTools Core Builder. Select all of the components and then click Download. This will download mootools-1.2-core.js. Copy the contents of that file to the mootools.js file. Then got to the MooTools More Builder and select all of the components and click Download. Copy the contents again and paste them at the bottom of mootools.js. (Note: Most sites, including this photo gallery, do not need all of the components. However, using all of them at the beginning, and then cutting out the ones you don't need make development a lot easier. If you were in the middle of a project and realized you wanted a different featured included in one of the components you didn't download, you would have to download it again before continuing. This way, you only have to download it again after you are finished.)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Photo Gallery</title> <link rel="stylesheet" type="text/css" href="main.css" /> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> </body> </html>
Step 2 - Create the Layout
Now we have to create the layout for our photo gallery using HTML and CSS. Add the following code inside the body tags of your HTML file.<div id="container">
<h1>Photo Gallery</h1>
<div id="picture_section">
<div id="inside">
<img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" />
<img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" />
<img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" />
<img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" />
<img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" /><img src="#" />
</div>
</div>
<div id="controls_vert">
<div id="up" class="deactivated">Scroll Up</div>
<div id="down">Scroll Down</div>
</div>
<div id="controls_horz">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</div>
This creates a container to surround all of the code in the site, a title, a section for pictures, and controls for the site. Why all of the empty img tags? In the CSS below, we give them sizes and a different background color, so we can test the gallery without having to add and resize actual pictures. Now we add the CSS to the main.css file.
* { margin:0; padding:0; outline:none; }
.hide { display:none; }
body {
background:#000;
color:#fff;
padding:30px;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width:596px;
height:400px;
background:#111;
overflow:hidden;
border:1px solid #333;
}
h1 {
background:#222;
width:592px;
height:29px;
padding-left:7px;
border-bottom:1px solid #333;
font-size:18px;
line-height:29px;
font-weight:normal;
}
#picture_section {
padding:7px 0 7px 7px;
width:590px;
height:332px;
overflow:hidden;
}
#inside {
width:590px;
height:332px;
}
#picture_section img {
border:0;
height:57px;
width:111px;
float:left;
background:#333;
margin-bottom:7px;
margin-right:7px;
cursor:pointer;
}
#controls_vert {
background:#222;
width:600px;
height:23px;
border-top:1px solid #333;
}
#controls_horz {
background:#222;
width:600px;
height:23px;
border-top:1px solid #333;
}
#up {
height:10px;
width:10px;
margin-right:7px;
background:url(up.jpg) no-repeat;
text-indent:-9999px;
float:left;
margin:7px;
margin-bottom:6px;
cursor:pointer;
}
#down {
height:10px;
width:10px;
background:url(down.jpg) no-repeat;
text-indent:-9999px;
float:left;
margin:7px;
margin-left:0;
margin-bottom:6px;
cursor:pointer;
}
#left {
height:10px;
width:10px;
background:url(left.jpg) no-repeat;
text-indent:-9999px;
float:left;
margin:7px;
margin-bottom:6px;
cursor:pointer;
}
#right {
height:10px;
width:10px;
background:url(right.jpg) no-repeat;
text-indent:-9999px;
float:left;
margin:7px;
margin-left:0;
margin-bottom:6px;
cursor:pointer;
}
div#up.deactivated { opacity:0.2; filter:alpha(opacity=20); cursor:default; }
div#down.deactivated { opacity:0.2; filter:alpha(opacity=20); cursor:default; }
div#right.deactivated { opacity:0.2; filter:alpha(opacity=20); cursor:default; }
div#left.deactivated { opacity:0.2; filter:alpha(opacity=20); cursor:default; }
Here is what it looks like with that applied.
<div id="display_picture_container"> <div id="display_picture">Click on the image to go back to the gallery.</div> <div id="display_picture_img"></div></div>aAdd the following to the end of your CSS file to make the divs appear as an overlay over the thumbnails.
#display_picture_container {
position:absolute;
top:0;
left:0;
width:700px;
height:400px;
padding-top:16px;
}
#display_picture {
position:absolute;
top:61px;
left:31px;
width:596px;
height:330px;
background:#000;
opacity:0.8; filter:alpha(opacity=80);
text-align:center;
font-size:11px;
padding-top:16px;
}
#display_picture_img {
position:absolute;
top:108px;
left:65px;
height:272px;
width:530px;
cursor:pointer;
}
That creates this effect:
Step 3 - Collect and Resize Your Pictures
This is a good time to collect all of your pictures and resize them. First of all, create a "pictures" folder and a "thumbs" folder. Add all of your pictures to the pictures folder and name them 1.jpg, 2.jpg, 3.jpg, etc. Resize them all to the size of the display_picture_img div: 530 pixels wide and 272 pixels tall. Then copy those files to the thumbs directory and resize those copies to 111 pixels wide by 57 pixels tall. It doesn't matter how many pictures you have. However, I would recommend using over 26 for this tutorial so you can use the vertical scrolling.Step 4 - Add Functionality With MooTools
The first thing to do is remove all of the <img src="#" /> tags in the HTML file. Those were only placeholders; we will add the actual files with JavaScript later. Now we will make the overlay vanish when the page loads. Add the following code to the main.js filevar number_of_pictures = 32;
function show_pictures () {
var while_pictures = 1;
while(while_pictures <= number_of_pictures) {
var new_image = new Element('img', {
'src': 'thumbs/' + while_pictures + '.jpg',
'id': 'image_' + while_pictures,
'events': {
'click': function(){
$('display_picture_img').innerHTML = "<img src=\"" + this.src.replace('thumbs/', 'pictures/') + "\" id=\"big_picture\" class=\"" + this.id + "\" />";
$('display_picture_container').fade(1);
$('big_picture').fade(.999999);
$('controls_vert').setStyle('display', 'none');
if(this.id.replace('image_', '')==1) {
$('left').set('class', 'deactivated');
$('right').erase('class');
} else if(this.id.replace('image_', '')==number_of_pictures) {
$('left').erase('class');
$('right').set('class', 'deactivated');
} else {
$('left').set('class', 'activated');
$('right').erase('class');
}
$('controls_horz').setStyle('display', 'block');
$('left').tween('margin-left', '286px');
}
}
});
new_image.inject($('inside'));
// preload all of the images
var preload_image = new Element('img', {
'src': 'pictures/' + while_pictures + '.jpg',
'class': 'hide'
});
preload_image.inject($('container'));
// NOTE: I didn't create an alt attribute because it won't be seen by anyone here anyway.
while_pictures++;
}
}
window.addEvent('domready', function() {
show_pictures();
$('display_picture_container').fade('hide');
});
Here is what it looks like:
To explain this, let's start at the bottom. In MooTools, the window.addEvent code executes the code inside when the DOM is ready to render elements. The $('display_picture_container').fade('hide'); hides the display_picture_container div and all of its contents. I used the fade('hide') method because we will be fading it in later. We don't create a display:none; statement in our CSS file or have JavaScript hide it in that way; it has to be hidden by the function we are going to use to show it again later (fade).
Now for the large part: the show_pictures function. First of all, we set the number_of_pictures variable. This tells the function to add thumbnails from the thumbs folder using every integer from 1 to the given number. To add more pictures to this slideshow, all you have to do is add them to the folders, resize them, and increase the number_of_pictures value. I used 32.
The next part is the internal workings of show_pictures. This does, as the name suggests, show all of the pictures. It also preloads the larger pictures in the background. Inside of the function, while_pictures is defined as 1. This is the variable we will use as the starting point for displaying all of the pictures. The following while statement shows that the code inside will be executed one time for each picture, starting at one and going up to the total number of pictures (number_of_pictures). Notice that while_pictures++; is at the end of the while loop, to have it increase by one each time the loop repeats.
Next, we create an Element instance for an img element. We can add src, id, class, event, and other attributes. However, we only need src, id, and events. By using 'src': 'thumbs/' + while_pictures + '.jpg', we state that we want the src of the image to be whatever oru current number is, and inside the thumbs folder. The ids for all of our thumbnails will be image_1, image_2, etc.
Now we want to have a large image appear after clicking on a thumbnail, so we create a click event. The first line under that makes the display_picture_img div contian the large picture with an id of big_picture and a class of the id of the thumbnail (image_1, image_2, etc.). Remember that, at this time, the display_picture_img div is hidden.
Now use the .fade(1) method to fade in the display_picture_container div and all of its contents. The 1 represents the level of opacity (1 is 100%, .5 is 50%, etc.). However, this causes a bug in all but the newest browsers such as Firefox 3 and Safari. They fade in correctly, but the others just pop in the image and fade the darker area around it. After much experimentation, I found out that if you have the large picture (which has big_picture as its id) fade in with its own fade method, it works—but only if the fade is not set to 1. However, we want the picture to be at 100% opacity. Therefore, I set it to .999999, which has no noticeable transparency.
So now the large picture is on the screen. However, we also want the controls to move to the center and become left and right arrows, instead of up and down arrows. First of all, we hide the vertical controls (controls_vert). We can use display:none; for this, because we are not going to be fading it in or out. Then we use an if, if else, and else statement to determine if the image that was clicked on was the first or last one in our gallery. If it was the first one, we don't want it to be able to go to the left, because no previous one exists. The same thing is necessary at the right. Later on, when we have the left and right arrows working, we will have it detect whether or not it has a deactivated class. This will determine if the click event will work for it. (Also, check out the CSS. It sets the arrow image to 20%. This saves the need of having 8 directional arrow images instead of 4.)
Next, we display the horizontal controls by setting its display style to block. So, by hiding the vertical controls and showing the horizontal controls, we have just switched them out. However, we want the horizontal controls to be centered. I accomplished this by creating a tween that animates an increase in the left margin to 286px, which is the center of the gallery.
Now that we have our new_image created, we have to put it inside of the document. The inject method allows us to insert the newly made img element into the inside div.
We also want to preload each of the images, too, so there won't be any delay when people actually click on the images to fade them in. We create a new img element for each picture that is full-sized. However, it uses the hide class, which, in our CSS, uses display:none; to hide the contents. Then we inject the hidden preloader image into the container div.
Here is what it looks like after you click on a thumbnail:
Now we have to make the picture disappear when we click on it. Insert the following code after the $('display_picture_container').fade('hide'); statement in main.js.
$('display_picture_img').addEvent('click', function(){
$('display_picture_container').fade(0);
$('big_picture').fade(0);
$('up').setStyle('margin-left', '286px');
$('controls_horz').setStyle('display', 'none');
$('controls_vert').setStyle('display', 'block');
$('left').setStyle('margin-left', '7px');
$('up').tween('margin-left', '7px');
});
This adds a click event to the div containing the large image. When it is clicked, the container fades out to nothing, and, due to the aforementioned bug, the picture itself is faded to 0 too. Then we set the hidden up div to have the same higher margin-left as the left div has. Then we switch the horizontal controls back to the vertical controls instantaneously, and then, after setting the hidden left div back to its original left margin, we animate the up arrow's left margin back to its original 7px using another tween. Now you can click on thumbnails to blow them up and then click on the large image to hide it again. Almost done!
Now take the following code and paste it above the cod you just entered.
var vertical_moves = 0;
var rows = Math.ceil(number_of_pictures/5);
if(rows>5) {
$('up').addEvent('click', function(event){
if(!$('up').hasClass('deactivated')) {
vertical_moves--;
$('down').erase('class');
$('inside').tween('margin-top', '-'+ (64 * vertical_moves) +'px');
if (vertical_moves==0) {
$('up').set('class', 'deactivated');
}
}
});
$('down').addEvent('click', function(event){
if(!$('down').hasClass('deactivated')) {
vertical_moves++;
$('up').erase('class');
$('inside').tween('margin-top', '-'+ (64 * vertical_moves) +'px');
if(vertical_moves == (rows-5)) {
$('down').set('class', 'deactivated');
}
}
});
} else {
$('up').set('class', 'deactivated');
$('down').set('class', 'deactivated');
}
var current_id = 1;
$('left').addEvent('click', function(){
if(!$('left').hasClass('deactivated')) {
current_id = $('big_picture').get('class').replace('image_', '');
current_id--;
$('big_picture').fade('hide');
$('big_picture').set('src', 'pictures/' + current_id + '.jpg');
$('big_picture').fade(1);
$('big_picture').set('class', 'image_' + current_id);
if(current_id==1) { $('left').set('class', 'deactivated'); }
if(current_id==(number_of_pictures-1)) { $('right').erase('class'); }
}
});
$('right').addEvent('click', function(){
if(!$('right').hasClass('deactivated')) {
current_id = $('big_picture').get('class').replace('image_', '');
current_id++;
$('big_picture').fade('hide');
$('big_picture').set('src', 'pictures/' + current_id + '.jpg');
$('big_picture').fade(1);
$('big_picture').set('class', 'image_' + current_id);
if(current_id==2) { $('left').erase('class'); }
if(current_id==number_of_pictures) { $('right').set('class', 'deactivated'); }
}
});
The first thing we'll do is set up vertical scrolling. First of all, we will create a variable called vertical_moves with a value of 0. This will tell us how many rows it has moved down. Then we find out how many rows of images we have, with 5 images in a row. The Math.ceil function rounds up any number that has a decimal to an integer. For example, I have 32 images. 32 divided by 5 is 6.4, which would round to 6. However, we still want the extra pictures to be shown; even though there are only two pictures on the last row, we want it to count as a whole row. Since Math.ceil rounds it all up, the amount of rows becomes 7.
Next, we detect if there are more than five rows. If there aren't, we deactivate the up and down arrows. With five rows or less, all of the pictures are shown without the need for the scroll buttons. However, if there are six or more, we want to add events to them. For the up arrow div, we add an event and then detect whether it has been labeled as deactivated or not. If it is deactivated, it will show up with only 20% opacity, and when you click on it, it won't do anything. Additionally, it won't have a pointer as a cursor anymore. However, if it doesn't have that class, it continues. If you are going up, it decreases the amount of rows down you have gone, so vertical_moves decreases by one row. It then erases any class that the down div has. If it is on the bottom row and the down arrow is deactivated, once it moves up a row, it will be able to move down again. Therefore, it stops it from being deactivated.
Next, it makes all of the thumbnails move up by detecting what the new vertical_moves is, multiplying it by 64, and making it negative. The number 64 is used because that is the height of a row of thumbnails plus the margin below it. It then applies this value to the margin-top. For example, if the margin-top was originally -128px, it would move upwards because the new margin-top would only be -64px. The tween method makes it fade to its new position. Inside the main.css file, it has the picture_section div hide its overflow. This is so that when you apply a negative margin-top, it hides it instead of sticking through.Then it determines if it is at the top of the gallery. If it is, it deactivates the up arrow so it can't go up any farther. The down arrow has the same actions applied, except in reverse.
Now we will make the left and right buttons function correctly. First of all, we set current_id equal to one to create the variable. This will help us determine which large image is being displayed (remember, the left and right buttons only appear when a large image is being displayed). Then we add a click event to the left div and check if it is deactivated or not. If it isn't, we detect the class of the img with the id of big_picture. This was set earlier as image_(enter number of current image here). We use the get method to find this and the replace method to remove the image_ prefix. Then we subtract it by one, because, by moving to the left, we are going back to a picture with an id of one less.
Next, we hide the image itself instantly, and then change it's src to the previous image. We then fade the image in to 100% opacity. After that, we change the image's class to its new value, which enables a user to go left repeatedly. We then detect if it is at the very first picture. If so, we can't go left anymore, so we deactivate the left button. If it is the next to last picture after clicking left, then it means that it was just on the last picture, where the right button would be disabled. If that is the case, we enable the right button so they can continue forward. Almost the identical actions are applied to the right button, except, again, in reverse.
Step 4 - Testing and Optimization
Now that's about it. The large picture fades in when you click on a thumbnail, you can move left and right, go back to the main gallery by clicking on the large image, and scroll up and down. But wait! After developing in a good browser such as Firefox, you need to test it in other popular browsers such as Safari, IE6, and IE7. I tested them all, and they all worked, except for—surprise!—Internet Explorer 6. When you click on an image and the horizontal controls slide out, they slide out much too far in IE6. For some reason, IE6 thinks that what every other browser thinks is 286px is only 143px. So, change the following code:
$('left').tween('margin-left', '286px');
To this:
if(Browser.Engine.trident4) { $('left').tween('margin-left', '143px'); } else { $('left').tween('margin-left', '286px'); }
Browser.Engine.trident4 returns true if the browser is IE6. Otherwise, it returns false and executes the original code. And the following code:
$('up').setStyle('margin-left', '286px');
To this:
if(Browser.Engine.trident4) { $('up').setStyle('margin-left', '143px'); } else { $('up').setStyle('margin-left', '286px'); }
Now it works on all browsers. At this point, you can also go to the MooTools site and select only the components you used. Even though mootools.js, main.js, main.css, and the HTML file use less than 100kb together, you can always reduce size to optimize the experience for users with a slower internet connection. However, I left the entire MooTools library in the source code for this, so people that want to change things in the gallery can use all of the components.
And there you have it: a working MooTools photo gallery. Remember, that the MooTools documentation is always useful when developing a site with MooTools. I hope this helps out people trying to combine many JavaScript actions into a complete site.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Gadget Nerd August 1st
That is a beautiful piece of code.
Thank you for sharing
( )Andrew August 1st
Doesn’t work on Safari 4 Developer Preview….
( )kflex August 1st
looks hard but soo useful.
( )Dan August 1st
Looks great! I have to find a quick way to resize a ton of pictures.
( )ferjo June 23rd
Here you go…
http://www.vso-software.fr/products/image_resizer/image_resizer.php
( )Aaron August 1st
Fantastic, I am just wrapping up building one of these to be used as a wordpress plugin based on mootools just like this. Great script, thanks.
( )Andrei Constantin August 1st
Not bad, i might give it a try
( )John August 1st
Defiantly going to build this one over the weekend. Good work, nice choice for a Friday!
( )Mark Abucayon August 1st
simple but I like it, very clean and neat. thanks for the tut.
( )Bryan J Swift August 1st
You could make the picture transitions while paging through with the left/right arrows a little less jarring by making use of the on complete event of the tween class at the end of your script when defining the click events of the left right arrows.
For example http://gist.github.com/3632, as a disclaimer this isn’t the best example of using the on complete event because you really shouldn’t recreate the Fx.Tween object every time you click an arrow like I am in this code but without a more significant restructuring of the JS this is what you get.
Other than that I like this gallery though.
( )Stirdy August 1st
Is there any way to make the mousewheel scroll through the list of thumbnails? Or to make the clickable up and down arrows scroll an entire page of thumbnails at a time? Clicking for each row doesn’t seem user friendly. Great tutorial though. Thanks!
( )Rick August 1st
For me this is massively disappointing, it relies way to much on CSS (with no style sheet any page this is on will become un-usable) and it doesn’t degrade nicely with JS turned off.
Nice bit of eye candy though.
( )Shannon August 1st
Excellent tutorial. I’m learning that mootools is quite the extensive language, but very cool. Thanks for the tut!
( )BeyondRandom August 1st
very simple and clean looking!
Nice tut!
( )elcodigodebarras August 1st
It´s an awesome tutorial and the gallery is clean an perfect for me.
( )With your help internet is getting more friendly for rookies like me.
Thanks… honestly.
Ken August 1st
The tutorial is good…but the dog is so darn cute!!
( )Sean August 1st
Mootools is excellent for cross-browser effects. The same functionality could have been into a class, and then allowed to be used on multiple projects. The way it is now, it requires too much modification to be put into a developer’s library and used again.
@Rick: It’s not too hard to make sure this is accessible in only HTML. I’ve seen a lot of Javascript tutorials here, and most don’t degrade gracefully. But knowing you should degrade, you can just make your HTML behave properly, and then use the Javascript to remove duplicate info in the HTML (for instance). That way it works with or without.
( )Zaq August 1st
Very slick, but as a photographer, I can tell you right away this wouldn’t meet my needs.
I would need the following as a minimum (over any kind of fancy special effects):
a) Does not force me to resize all the pics, or force them all at the same size. The thumbnails could arbitrarily shrink / crop my images to the same size, but the viewer should leave it render at the size I originally choose (with maybe a “sane” maximum in case I accidentally (or lazily) drop in a 10mp image.
b) doesn’t force me to rename images
c) script that automatically adds images to the gallery as I upload jpegs to a specific folder (goes with “b” above). You’d obviously need some server side code for this, but this is absolutely essential. Gallery needs to be as easy as an FTP upload… and done. If it must… it can cache and only check for new files after 24 hrs.
d) captions.. my preference would be a .txt file dropped in the same folder that has the same name as the relevant .jpeg file… if present it would read that as well and show a caption.
Cheers on the cool gallery! I wouldn’t be commenting if I didn’t think it was cool to begin with
( )Ramoñ Nogueira June 19th
Hey buddy…
( )Have you ever found any gallery script that would makke all of this… I’m going nuts looking for something for my website that will automatize this proccess… If you can help me I would be glad.
Aquele Abraço!!!
ali August 1st
just did a quick search on this page, and the word “dog” was not found…
nice dog..
( )Umut August 1st
This is a beautiful gallery. Specially the navigation is very simple and functional.
( )Ben Griffiths August 1st
This is really nice looking – the only thing that put me off is not being able to scroll with the mouse, and that feels very un-natural indeed!
( )James August 1st
Yep, I like this! Although I will say without any regret that, with jQuery this would be easier! :-p
( )Jack August 1st
any tips on how i might add captions to the pics?
( )Braden Keith August 1st
Very nice, with a few color tweaks this could fit right in.
( )rjh August 1st
Andrew: That’s the extent of your comments? That it doesn’t work with a developer preview version of a browser? Gee, thanks.
( )Editor August 1st
I was very happy with this article. Although, I would agree with Ben. The natural tendency is to try and scroll with the mouse. Maybe that is a feature that you can add in, Jared!
( )Jared Rhizor August 1st
http://jaredrhizor.com/gallery/change.js
Just put that in the domready section and add the right ID to the body tag.
Thanks for all of the comments.
( )Jeremy Peck August 1st
Nice tutorial. It’s a very attractive gallery.
I agree to some extent with some of the responses… This would have been a good opportunity to make use and demonstrate MooTools powerful class constructor to make a more flexible and reusable image gallery…
This takes a bit more planning.
Javscript tools should really ADD TO the functionality of a website… their implementation should sort of “hi-jack” existing code–which WITHOUT the javascript still allows for display of content. If by disabling javascript on a site you’re prevented from interacting with key elements, then that to me isn’t a successful use of js.
I’ve been wanting to do something more advanced like this for NETTUTS, but time has been limited and I don’t want to contribute something thats already showed up on NETTUTS!
( )Lunge August 2nd
Nice:P More mootools please
( )Joefrey Mahusay August 3rd
Nice tutorial. Great work!
( )Shane August 3rd
Interesting article and a nice effect – nothing too over the top, but fully functional and eye-pleasing.
Also nice to see some coverage of other javascript libraries. I’m a jQuery man myself, but I like to get exposure to as much stuff as possible for ideas etc.
Thanks for posting.
( )Tim Oxley August 4th
This is close to being awesome, but fails hard.
Sorry!
If the problems identified by Zaq, image size/name fixing and Sean, Zaq, Jeremy Peck and Rick regarding plain html degradation were resolved it would actually be a solution, until then, this is only half a solution, and is creating a more inaccessible internet each time another rookie grabs this and uses it as is.
Is easy fixed, just wish people would spend as much care making these scripts accessible/usable/flexible as they do making them pretty!
Great work otherwise!
( )Tadas August 5th
Nice. I like it.
( )George August 9th
Great Gallery .. thanks. Just what I needed for a current project. Stumbled !
( )Surabhi August 12th
This is awesome! Thanks for the tutorial.
( )stefanii August 16th
Hi there, thanks for the tutorial! With it, a rookie like me managed to create a great photo gallery. But the only problem is this. I’ve also created a website entirely on flash. Now, I’d like to combine the 2 together and have my gallery appear in the flash website. I’d appreciate it if you spend some time in helping me out with this.
( )Thank you.
Sandra August 22nd
Hi! I downloaded the source file and literally replace the pictures with my pictures (exact same size) and it won’t work at all? And ideas why????
( )Ed August 22nd
This is far from spectacular. What about the users who have JavaScript disabled? They see nothing.
Ed.
( )Amanj August 23rd
Nice work
( )mci August 30th
That is a great tutorial. There is just one problem. If you center your side, in order to look good on bigger screens with greater resolution, “#display_picture…” doesn’t work properly. The bigger image and the background are in a bad position, because the left-margin is counting from the beginning of the left screen.
I am wondering if there is a good solution. I’m not so good at coding, but maybe it is possible to implement screensize of the current browser divided 2, minus half of the size of the “#display_picture…” to position it correctly for centered homepages.
If there is anyone, who has a working solution, please write me.
Thank you very much.
Once again, thanks for this tutorial.
Greetings mci
( )chard September 2nd
I already used this photo gallery a month ago with my own picture collection. This is awesome! but I have some question on it. I want to change the .jpg into .png format to make it load faster. Do I have to change all jpg to png in your js script? lastly, can we add tooltips script in each pictures? Thanks and more power.
( )steve September 8th
Interesting what you can do with this tool set, i think ill have a go at this over weekend thanks
( )mila September 10th
well, quite nice but could really be optimised. making thumbnails by your own and renaming all pictures is not really neccesary. i will combine that with a gallery i allready have to make it more dynamicaly
( )Benjamin David September 12th
I’m glad you made another tutorial for Mootools. I like it !
( )programmer September 16th
nobody should do a webiste with this tutorial, the code is awful, the css just horror. it looks nice but someone should look at the code
( )Jad Graphics October 1st
Man, this is great. I hope to use this technique one day for my portfolio.
( )http://www.jadgraphics.net/portfolio.html
Allen October 23rd
Thanks man it was helpful, I dont know javascripts, but this tutorials helped me a lot.
Thank your very much again.
( )Tim October 26th
Are there any known javascript conflicts between an MooTools image gallery and a Dynamic Drive CSS drop down menu script? My Mootools worked fine until I added the Dynamic Drive dropdown CSS menu. The menu works on all other web pages on the site except those pages that have a MooTools image gallery running. On those pages, both the menu and the image gallery lock up. Thanks!
( )Konstantinos December 28th
Thanks mate, it looks awesome i cant wait to get started!
( )Amber Agrawal January 15th
Nice & very useful tutorial. I will try to modify it according to my need and as per some of the responses.
Thanks for sharing this tutorial.
( )Amber
zplits January 18th
thank you for this great tutorial. I’ll add it to my future projects.
( )Deviaantz January 25th
thanks man.. i love this gallery! thanks again for sharing this.. keep it up!
( )Projesh March 12th
thanks a lot. i really liked it and the guide too.
keep the good work and thanks again for sharing.
( )mike April 15th
HI there, thanks A LOT for sharing a little bit of ur knowledge with us. that was great!!! for me thats perfect i just wanted to add an attributte with the picture description… one box with text. getting it from an xml file… do u know how to do it? please help.
thanks a lot
u r the man
( )tutcity April 20th
Very cool effect! Mootools is really awesome
( )andy May 15th
thats great.deserves a ticket for 2010 world cup..ohh where do i put the pictures and thumbs folder.in the site root or in the folder containin the
( )main.js and mootools.js?
Jason May 21st
The absolute positioning of the CSS overlay is a problem when dealing with different screen sizes. I was going to use your gallery until I discovered this. It’s beautiful, but only workable on one screen size!
I will have to keep looking.
( )alessandra May 29th
hi! very useful and nice gallery! I have 2 questions..
1- what about if I want different image size?? I just have to change the sizes into the css file?
2- I tried to change folders order.. I put thumb and pictures into another folder, and into main.js changed the thumb/ and pictures/ path, but it doesn’t works.. what else I have to change??
thanx so much
( )alessandra
wpdigger June 3rd
I like this gallery though simple very clean and neat. Thank you for sharing..
( )Webagentur June 18th
Thank you … this tutorial has me very helped.
( )Ramoñ Nogueira June 19th
Sorry Man…
( )This is a very nice tutorial and Script, however, I would like to know how I can change the sizes of the pictures and still have them being shown. I tried to change somethings in the CSS file but it didn’t work, the only pictures that are shown are those with 530×272 px.
I hope you understand my question…
Waiting…
Silver Firefly June 28th
Look guys, it’s a TUTORIAL! If he were to add all of the extras some of you asked for he might as well release the thing as a plugin or something. That said, making it degrade gracefully should be a part of any Javascript tutorial.
( )strony internetowe August 5th
very nice looking gallery
thx.
( )m00f August 17th
Hi there, first of all I’d like to say thankyou for taking the time to put this tutorial up, I am currently in the process of reworking the code do develop a data driven gallery with some other features.. Just a couple of questions:
In terms of Data driven, it should be as simple as setting up the data base with the relevant fields and populating to stick to the stringent rules you’ve placed over this gallery(img size and name(1,2,3 etc.))….
Then just a case of poulating the query into an array and passing that array to the current ’show_pictures’ function right?
( )mrbig4545 September 5th
dude, im stealing this! safe
( )geeth October 5th
Hi
nice project, I really like it
( )many thanks for share…
Amy Ling October 22nd
Hi-
Love this tutorial.
Was wondering if there is a way to make it so that the next and prev buttons would show the next and prev images instead of the arrow buttons?
( )Jonathan October 27th
Very useful, i’m using this in a website sooner or later…
( )