Creating a Scrolling Gallery Using jQuery
Posted on 27 February, 2009 at 16:34 PM
There are already 49 Comments
About the Show
In this episode Marc shows you how he created the jQuery slideshow used on the front page of the Obox Design website.
The tools used in this tutorial are HTML, CSS and jQuery (Javascript)
We hope you enjoy our first jQuery tutorial!
Click here to download the source code.
UPDATE - According to Shin's suggestion, I've modified the script: "Â…when you click next at the last img, it goes back to the first one..."
Download the new .js file here or just download the updated .zip file containing the source (above). - Marc Perel
Related Shows
- (31) Episode 190 - Develop without an Ego
- (11) Episode 180 - Spotting Loop Holes and Sticking Stickers
- (8) Episode 179 - It's All About Themes
- (10) Episode 175 - Online Marketing Road Map
- (41) EP 168 - A New Beginning
User Comments
Alex 27 Feb, 2009 19:17:48 PM
This is a really cool and easy method to use for portfolios. Thanks for posting it up.
meredith 27 Feb, 2009 21:44:35 PM
nice to see Marc in the drivers seat.
thanks for the Tut on this. i'm just learning jQuery now and its so fun. Brilliant.
Cheers.
Steve 27 Feb, 2009 23:37:51 PM
Love it , simple and to the point!
I must say i have only stumbled upon this site today and i am already hooked. Great attitude guys and brilliant tuts!
You have a regular here :)
shin 28 Feb, 2009 11:16:40 AM
It will be nice when you click next at the last img, it goes back to the first one. Thanks for sharing.
Ricardo 01 Mar, 2009 07:39:05 AM
It shouldn't be too difficult to add a check that if the current frame is the last then it should move to the first when pressing next (same to the first frame if you press left), right?
A great addition to this could be a thumbnail list just below that somehow got 'lit up' or slightly bigger when we are on its slide (ok, i'll settle on just border color change! lol).
If you do a follow up, could you please include this?
Thanks for the tutorial, i'm just getting my toes wet with jQuery and i really appreciate you sharing in detail what you did there...
Thanks and keep up the good work.
David Perel 01 Mar, 2009 08:22:52 AM
I think Marc is going to update the download file to include a return in you are on the last image.
Stay tuned ;)
Thanks for all the comments!
Marc Perel 01 Mar, 2009 14:32:32 PM
Dave's right, I'm gonna post the updates tomorrow first thing, that's @Shin's update...
I like the thumbnail idea, I'll look into that, thanks Ricardo ;)
Marc Perel 02 Mar, 2009 10:53:22 AM
I've updated the script according to @Shin's suggestion. See "UPDATE" above.
shin 02 Mar, 2009 13:42:12 PM
Thanks Marc for your update. I added a link from the following. shinokada.blogspot.com/2009/03/creating-scrolling-gallery-using-jquery.html
Ricardo 03 Mar, 2009 10:18:38 AM
So cool! Thanks guys... One more question, do you mind me transcribing and translating your tutorial to spanish?
Jamie Crellin 04 Mar, 2009 23:48:19 PM
Thanks for the tutorial, well explained. However I am completley new to this and therefore would appreciate some help with the a href for the prev and next buttons - i have no idea where to start? Thanks
Jamie
Rob MacKay 05 Mar, 2009 00:58:18 AM
@Jamie
Do you mean you dont know what to href to, to make it work?
Well most people would use a "#" - the only reason is you dont actually use the href, the jQuery is just looking for the click. jQuery dosnt actually need to watch an anchor tag for clicks, you can set any element to be watched, even ya html tag. A lot of people use the anchors because its good to get in the habbit of doing so.
Its good to use them because you can give a full link in some cases, for example a login box that pops up, you want to keep people on the same page... now if the user had the JS turned off, and you had not given a full href to a login page, they would not be able to log in.
wow that made no sense at all. sorry, im ill... lol
Cam 10 Mar, 2009 00:17:44 AM
Hey Guys! Thanks so much for this! Ispent the whole of friday pottering around trying to get a slideshow working, then was going through some of my old Tweets, and found this :) so now I have a simple working model to launch from - again, thank you so very much!
Cam
Rob MacKay 10 Mar, 2009 17:47:44 PM
Hi Guys,
I was just lookin at this again and you know you can get the width of your image container and add it with jQuery as well?
you have the amount of images dynamically with:
$max_clicks = $("#image_container").children().size();
and you have the size of the image, inc 10px margin with the global:
$move_by = 405;
So all you need do is set a new variable:
$imgCont = $move_by * $max_clicks;
that gives you your total pix width which you can then add to your image_description with inline styling...
$("#image_container").css({width : $imgCont});
Now I didn't have to do "width : $imgCont px" is that normal? I thought I would as obviously im working with a raw number... I dunno... this is just me putting into practice what little I know lol
Marc Perel 10 Mar, 2009 17:52:33 PM
@Rob - You're absolutely right, thanks for the heads up man. Great add. I'll update the source asap.
Rob MacKay 10 Mar, 2009 19:37:25 PM
Hehe, no probs - :)
I'm kinda just past the beginner stage of jQuery so its nice to see after all this practice its starting to pay off :)
Hugh Collier 11 Mar, 2009 17:51:21 PM
When the last slide gets shown how would I go about hiding or greying out the "NEXT" navigation link so it's only possible to go to "PREV" and do like wise on the first slide?
I've had a bash myself but tbh it's totally beyond me at the moment.
Cam 11 Mar, 2009 17:56:12 PM
Hugh,
I think the easiest would be to use the :last-child and :first-child for the container div (which would return when it was focusing on which img) - and then simply style the next or prev accordingly.
I'm not expert, but that's how I'd go about it..
Marc Perel 11 Mar, 2009 18:12:41 PM
Thanks for responding so quickly Cam! That's one way, the other way to do it would be to reference the $frameno, so if it's 0 hid the prev button, if it's == $max_clicks then hide the next button, otherwise show the other and/or both.
Hugh Collier 11 Mar, 2009 18:19:14 PM
Thanks guys! Gonna try see if I work out how to do both methods. I'm starting a site for an interior design company soon and I think I might implement this method in the design. If I do I'll let you know so you can check it out.
deborah fairs 11 Mar, 2009 21:16:24 PM
Hi, great gallery very innovative, do you know if there is any way to change the size of the images and the scroll will change also?
I am trying to get like an iplayer effect with 6 thumbnails in the middle and arrows each side... any ideas would be most appreciated
taki1 23 Mar, 2009 02:11:14 AM
Hi! At first thanks for a great tutorial and script. I've downloaded the source code but i have a problem. When i list for example 4 images the "next" button shows only 3 of them and then goes to the beginning. When i'm on the first photo and press "prev" button it goes to the last, 4th image. I'm not too much in JS so if someone could check this it would be great. The problem is also in source-code example so im not putting my custom "pixel details" here. Thanks in advance for any help.
Marc Perel 23 Mar, 2009 10:25:38 AM
@Taki - Thank you very much for the heads up Taki, I've fixed the problem and updated the link.
Peeps, I've also included the file which hides/shows the next and previous buttons when you reach either side, instead of flick to the other end... the file is called "jquery_slideshow_hide_next_prev.js" and it's in the .zip. An example of which can be seen at www.obox-design.com.
taki1 24 Mar, 2009 01:02:42 AM
Now It would be nice to make tabbed navigation through "galleries" and load images separately (on demand/ajax?). I've got about 30 images and they all load on page view slowing down whole site... :/ if i found more time maybe i'll try to make it work :D
Marc Perel 24 Mar, 2009 09:17:37 AM
@Rob @Taki - I actually did that originally, but because we didn't like the way the new images loaded on the screen we changed it... But maybe we can load 5 at a time (so when we reach the 3rd image, for example, it calls the next five with jQuery.load() - that way when we reach the 5th image, the next five are preloaded...)
I don't think it'll take long at all. What do you two think?
PS. Rob made a nice addition to the script by adding an Interval at the bottom which calls the "right()" function, automatically looping through the images, and best of all it doesn't tamper with the user control... Check it out here www.jayelgibson.com/index.php/home
Rob MacKay 24 Mar, 2009 09:35:50 AM
@Marc Oh if you have done it already! Sorted :D. 5 at a time would be perfect through eh... :)
Nick 26 Mar, 2009 15:17:45 PM
thans for your work Is it possible when i have several image that the first image begin in the middle of the container (or the screen) because in your example first image begin at left.
ps:sorry for my bad english
Marc Perel 27 Mar, 2009 12:39:58 PM
@Nick - Nice suggestion, I've updated the source code with the "$start_middle" variable, switch it to 1 and the slide will start from the middle frame (or the closest frame to the middle, if there aren't an even amount of slides)...
Anthony @afovea 15 Apr, 2009 00:43:40 AM
Hi guys, love this one! Finally getting around to using the tut on the update for my site but am getting the same issue that Taki1 mentioned earlier even with the latest files.
The scrolling works perfectly up the penultimate image and then scrolls back to the beggining (missing the last one obviously) and only displaying a 'prev' button. This then will take you back to missing image... quite odd, and can't see why it's doing it.
Sorry to come back to an old post but wondered if you guys could lend a hand?
Chris 29 Sep, 2009 22:11:52 PM
This script is awesome, I am just curious if there is a way to apply a link to the images being scrolled. applying an HREF will disable the ability to scroll, and scrolling created DIV's throws off the equations and doubles the space (example: 3 pictures... u have to click 3 times to get back to the main image)
Any advice on how to go about this?
Liminal Web Design Cornwall 15 Dec, 2009 21:14:56 PM
How cool is this blog, I found you guys through sohtanaka.com and its pretty awesome guys.
I've been looking at Jquery for a little while now and this is a really handy tutorial.
Thanks
Jonathan 02 Jan, 2010 09:59:55 AM
I'm testing this out, and the updated .js still gets me to the 2nd to the last image and sends it to the 1st img.
Eric 11 Nov, 2010 21:56:32 PM
Hey Guys. Great tutorial. The fact that it is so lightweight makes it much easier to work with.
If possible, would you be able to explain how you would be able to add specific button clicks/thumbnails when clicked will go to a specified frame in the slider?
Regardless of whether or not you'd like to take the time - fantastic tutorial!
Thanks -
- Eric
Edward 26 Feb, 2011 20:13:27 PM
Awesome tutorials especially for the beginners like me :)... thanks for your effort.
2012 © Obox Design
From the Couch is powered by OCMX Live
Rob MacKay 27 Feb, 2009 16:46:36 PM
excelent work dude :) thx for sharing :)