This website uses cookies to personalise ads and to analyse traffic ok
web design

SIDEWAYS – jQuery fullscreen image gallery

SIDEWAYS – jQuery fullscreen image gallery

A simple, yet elegant fullscreen image gallery created with the jQuery library and CSS. The gallery features fullscreen images in various modes and custom scrollbars.

SIDEWAYS image gallery is made by implementation of some previous scripts and tutorials posted on this blog and some (minor) CSS3. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin.

I’ve included the complete gallery code on page 2 of this post.

Changelog

  • Nov 20, 2010
    • Minor code optimization
      Loading new image with different dimensions updates correctly
      Clicking on final image loads the first one (looping)
      Added original view mode option (no image scale)
      Change default view mode quickly by setting $defaultViewMode variable in the script
      Fixed conflict when placing links inside thumbnail panel
  • Oct 19, 2010
    • Added second script that utilizes native browser scrollbars and click to open panel mode (better suited for touch devices)
  • Sep 26, 2010
    • Script and code have been optimized significantly

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Pages: 1 2


286 Comments

Post a comment

Comments pages: 1 2 3 7

  1. Alec
    Posted on October 26, 2010 at 04:34 Permalink

    Very impressive work. Good job. Keep at it. πŸ™‚

    Reply
  2. Alessio
    Posted on October 15, 2010 at 17:50 Permalink

    THE BEST EVER EVER IMAGE GALLERY!!!!!

    Thanks thanks and one more time thanks
    for sharing it!

    Alessio (aka Vortex) πŸ˜‰

    Reply
    • malihu
      Posted on October 16, 2010 at 05:10 Permalink

      Thanks! You’re very kind πŸ™‚

      Reply
  3. Samuel M
    Posted on October 14, 2010 at 12:48 Permalink

    I’ve just forget to say that I work on Windows 7, Internet Explorer 8.0.

    And on Firefox/IE, there’s an another bug in fit mode, when you make a max vertical window resize (until bgimage disappear) the bgimage is missing when positive resize (for see the picture).

    Reply
  4. Samuel M
    Posted on October 14, 2010 at 12:15 Permalink

    Hi,

    I’ve test your app and the render is globally impressive.
    Now I’ve see an using issue that cause bg image “croping” in fit mode.

    You can reproduce the bug with multiple window resizing (vertical especially).
    I’ve produce a printscreen that show exactly the issue of the problem :
    http://www.myimagespace.com/public/view/full/4708

    Reply
    • malihu
      Posted on October 15, 2010 at 02:32 Permalink

      I haven’t being able to reproduce the bug. I’ve spammed IE with resize and all worked as it should πŸ˜›

      Reply
      • Samuel M
        Posted on October 15, 2010 at 09:04 Permalink

        It’s important to make horizontal resizing only.
        The bug is apppear in your demo page (not on a personnal integration).

        Reply
  5. Jan
    Posted on October 12, 2010 at 11:23 Permalink

    Really great work, but there seems to be a small problem with Google Chrome 6.0.472.63 as it isnΒ΄t possible to click the first image after loading the page (endless loading animation).

    Reply
    • malihu
      Posted on October 12, 2010 at 12:06 Permalink

      Thanks Jan, I’ll check it asap.

      Reply
    • malihu
      Posted on October 13, 2010 at 01:35 Permalink

      Easy fix πŸ˜‰ Post tutorial, demo and download files are updated.

      Seemed that Chrome 6 had an issue loading the same image file (I’ve used the same images more than once for the demo). By first emptying src (attr(“src”, “”)) and then apply the new data fixed the problem (although in a real gallery we wouldn’t even notice since there would be no duplicate images).

      Thanks again for the info

      Reply
      • Jan
        Posted on October 18, 2010 at 17:20 Permalink

        Thanks for fixing the problem. I’ve changed the two lines in my drupal-theme for a gallery project and it works like a charme.

        Reply
  6. Maarten Schraven
    Posted on October 6, 2010 at 14:41 Permalink

    is it possible; if you startup the index page, the slide will not popup? So if you call teh site you online see the big picture and when you go to the left the slide will come out?

    Thanks

    Reply
    • malihu
      Posted on October 6, 2010 at 16:38 Permalink

      Inside the script, look for the “LargeImageLoad” function. Inside this function, find the condition (near the end of the function):

      if($bg.data(“nextImage”) || $bg.data(“lastImageReached”)==”Y”){
      SlidePanels(“close”);
      }

      which is commented as “don’t close thumbs pane on 1st load”. Remove the condition by commenting it and leave SlidePanels function like this:

      //if($bg.data(“nextImage”) || $bg.data(“lastImageReached”)==”Y”){
      SlidePanels(“close”);
      //}

      Reply
  7. Javascript Plugins
    Posted on October 1, 2010 at 03:52 Permalink

    Great ive just added a link from my personal list in
    Javascript Plugins Directory

    Reply
  8. phoheisel
    Posted on September 30, 2010 at 13:03 Permalink

    wow realy n1 work! would like to use it in my image upload service πŸ™‚

    thanks for sharing!

    Reply
    • malihu
      Posted on September 30, 2010 at 13:12 Permalink

      Thanks! Let me know if/when you do πŸ™‚

      Reply
  9. Arnaud
    Posted on September 29, 2010 at 13:07 Permalink

    eh… That’s A W E S O M E !

    Reply
  10. Maarten Schraven
    Posted on September 28, 2010 at 22:15 Permalink

    Hi, i like your gallery very much. I’m trying to make it a template within pixelpost.org. I run into some problems when i want to load the new picture with the click. It does not transport it as a new background, i think this is the problem with jQuery. Do you have a solution?

    http://maartenschraven.com/pixelpost/

    hope you like it, i want to put it up by pixelpost as a new theme with your credits offcourse

    Reply
    • malihu
      Posted on September 29, 2010 at 01:28 Permalink

      Hi Maarten,
      Thanks for your comments. I have updated the script a bit so if you have time, download it again to see if your problem is solved. I see that you load the images via php (e.g. index.php?showimage=31) and I haven’t checked the script in conjunction to php yet. I’ll need to check it further and let you know.

      Reply
      • Maarten Schraven
        Posted on September 29, 2010 at 02:31 Permalink

        Thanks for your quick reply. I tried the new download, but it is not working :-(. The problem is that jquery does not see that there is new data i think. I tought when i publish the tumbnails the same way you do the output will be the same. But somewhere i must let jquery know there is data to click on and then refresh the url bar. If i make the bgimg <a href" then it works but every click will put on the slidebar and that's not the nice way.

        if you have the time to look into it i will appreciate that. But now i called it the night because it's here 1:35 am in the netherlands

        Reply
  11. Michael Pehl
    Posted on September 23, 2010 at 00:21 Permalink

    Impressive work, mate.

    I will modify your code a bit if you are ok with that πŸ˜‰

    Want it a little bit different πŸ™‚

    Will use it on my CookielessDomain blog to show stats.

    Reply
    • malihu
      Posted on September 23, 2010 at 01:22 Permalink

      Modify it as much as you like Michael πŸ˜‰

      Reply
      • Butu
        Posted on September 23, 2010 at 07:14 Permalink

        It really awsome… Very big thanks for your great works. I would love to using it for my portfolio page.

        Reply
  12. ray keilman
    Posted on September 21, 2010 at 17:30 Permalink

    i love this – i use a jquery script to fullscreen the image on my portfolio homepage, but a full gallery is outstanding! i just wish a small bit of the sidebar remained on the screen when it minimized, i don’t know that it’s intuitive enough for the average user to know to drag the mouse pointer off the screen to call it back. plus, like ben mentioned, filling the screen immediately when clicking on a thumbnail was unwanted – i wanted the sidebar to remain onscreen while i clicked through a couple thumbnails then i could manually minimize it when i found the one i wanted to study. that artwork was amazing too, btw!

    Reply
    • malihu
      Posted on September 23, 2010 at 01:33 Permalink

      You do have a point Ray.
      I mostly wanted to make a bit different gallery control-wise. Your suggestions are good and I’ll probably make a second version of this script that’ll rely more on clicking and be better suited for touch devices (as stated earlier).

      Edit: done.

      Reply
  13. keith
    Posted on September 21, 2010 at 16:56 Permalink

    MAD PROPS!!! Beautiful work!

    Reply
  14. jordsta
    Posted on September 21, 2010 at 11:11 Permalink

    This is excellent. I’m gonna see what I can do to make this into a Tumblr theme, if that’s okay with you..

    Reply
    • malihu
      Posted on September 23, 2010 at 01:18 Permalink

      That would be great! If you do, share your URL so we can see the results πŸ™‚

      Reply
  15. web designer gurgaon
    Posted on September 21, 2010 at 09:32 Permalink

    very nice jquery

    Reply
  16. Biju Subhash
    Posted on September 20, 2010 at 21:46 Permalink

    superb…
    great work.. πŸ˜€

    Reply
  17. Foxinni
    Posted on September 20, 2010 at 13:42 Permalink

    This is awesome. Can’t wait to use it.

    Great work!

    Reply
  18. mike
    Posted on September 20, 2010 at 13:29 Permalink

    Wow. Amaizing… one of the best slides

    Reply
  19. Jo
    Posted on September 20, 2010 at 13:28 Permalink

    Nice work.
    But you should definitifly start to cache $(this) and the main divs you constantly using.
    e.g. use:
    var $this = $(this);
    $this.css("display","none"); etc…

    And chain more πŸ™‚

    Reply
    • malihu
      Posted on September 20, 2010 at 13:47 Permalink

      You’re so absolutely right πŸ™‚
      I made this script in a relatively short time (implementing some code I’ve done sometime ago) so I didn’t really optimize the code. I wanted mainly to see what people think of it as a gallery. I’ll revamp the code as soon as possible!

      Edit: done.

      Reply
  20. Antoine LΓ©pΓ©e
    Posted on September 20, 2010 at 13:10 Permalink

    Love it so.. forwarded.

    Keep up the good work πŸ˜‰

    Reply
  21. JIngHoo
    Posted on September 20, 2010 at 03:05 Permalink

    Oh wow, NO way dude that is jsut WAY too cool!

    http://www.online-privacy.eu.tc

    Reply
  22. Ben
    Posted on September 19, 2010 at 20:22 Permalink

    Great concept!
    Some nitpicking crits: Movement in the interface is generally “choppy”, especially when scrolling down through the images, or switching back and forth between “thumbnail” and “big” views. Filling the screen as soon as you click an image without any instruction was an unwanted surprise. Also, I’m not really a fan of some things being rollover and others click. In my opinion, everything should be click, so that it is obvious to users what causes something to happen. I guess I’m just not a fan of rollover in general, haha.
    Just my 2Β’ anyway. Some of this may be browser/rendering engine related.
    (Chrome 6.0.472.55, Mac OS X 10.6.4)

    Also, this has started to happen: http://imgur.com/7DGU6.png

    Reply
    • malihu
      Posted on September 19, 2010 at 23:33 Permalink

      Hello Ben,
      Thanks a lot for your comments and suggestions πŸ™‚

      The “choppy” movement is indeed browser’s js engine related issue. Javascript performance is heavily depended on browser engine as well as memory, tabs already open etc. That’s why sometimes a script performs very well and other times more or less “choppy”.

      Unfortunately javascript animation drops in performance when you try more advanced stuff than fading a tab or sliding a div (especially when animating a fullscreen images or a containers of 20 thumnails, texts etc.).

      In general, I try to keep a balance between effects/animation and performance but sometimes the dark side gets over πŸ˜› I hope I’ll get better πŸ™‚

      This gallery is a lot about mouse movement (that was the idea) and was made primarily for big screens (desktops, laptops etc.) with a pointing device. The only thing that works on click is when you select an image to load which I think is logical. I was thinking to make another version of this gallery (more compatible with touch devices) that works only on click, so I guess I might try it πŸ˜‰

      Regarding your screenshot, I can’t really tell what’s wrong but looks like viewing the image in “FIT” mode (there’s a button over the thumbnails that changes the view mode).

      Thanks again!

      Reply
      • Ben
        Posted on September 20, 2010 at 05:38 Permalink

        Thanks for the quick response!

        I get the feeling that its performance on my machine does have to do with Webkit, as well as my RAM and processing power. Especially after seeing how many commenters called it “smooth” πŸ™‚

        I really like the idea of a gallery suited to large screens and presentations. I hadn’t even thought of that.

        RE: Screenshot, I was in full mode, not fit. The problem was that when the thumbnails moved offscreen, the image didn’t move with it (of course this would fix itself as soon as I resized my browser window or clicked on the image to display the next one). But what you are seeing is all of the image I was able to see – half of it. I can’t replicate it now, oddly enough, but it was definitely full mode since when I resized my browser window even by one pixel, it immediately fixed itself.

        I think it happened when I was playing around with moving my mouse left and right to toggle full-screen and half-screen. At some point that happened, and then it started happening every time I toggled back and forth (the image wouldn’t move, staying at half-screen). I didn’t think to refresh the page to see if it stopped, so I’m not sure if it was something I did in that session to screw it up.

        Reply
      • Ben/EverythingFLA
        Posted on September 22, 2010 at 07:13 Permalink

        Ha I have a question why make a gallery in javascript at all, wouldn’t it be easier just to do it with <a href='http://everythingfla.com/'flash you would have so much more control over making it as slick as you want while with js you need to mainly worry about it working in a list of browsers πŸ˜› ? and i mean it with total respect as i love it that your sharing and i know how much more work it is to reproduce things in JS and then worry about it working on a million browsers.

        Leaving that aside great work πŸ˜‰

        Reply
      • malihu
        Posted on September 23, 2010 at 01:59 Permalink

        Yes I could do it in flash much faster and easier as I’m way more proficient in actionscript and animation. I made this gallery with jquery mainly to explore js potential and just cause it’s fun! I work a lot as flash developer, so doing stuff with other scripting languages feels like holiday to me πŸ˜›

        As far as performance goes, the more effects-the better the flash, but this gallery doesn’t have that many πŸ˜‰

        If you’re interested in flash, you can check some posts I’ve made like FluidGrid gallery and flash image slideshow.

        Reply
  23. Carl Nelson
    Posted on September 19, 2010 at 18:54 Permalink

    Wonderful jQuery work and such a great way to display photos in a rich interactive manner.

    Reply
  24. Jay Philips
    Posted on September 19, 2010 at 18:37 Permalink

    Very nice work. It’s always nice to see how to get people go above and beyond the norm.

    Reply
  25. Philip
    Posted on September 15, 2010 at 15:19 Permalink

    thanks a lot Mano!!!

    you have done an excellent work!!!
    just amazing:)

    all the best!

    Reply
  26. Internet Consultants
    Posted on September 14, 2010 at 16:01 Permalink

    Mind Blowing… Very nice one… thanks so much

    Reply
  27. Mark Boas
    Posted on September 13, 2010 at 19:31 Permalink

    Very cool!

    Just a thought, have you thought about iPad or other touch device support?

    I get a JS error on the iPad and can’t go back to the thumbnails.

    Great work though! Your cats are really very talented πŸ™‚

    Reply
    • malihu
      Posted on September 14, 2010 at 01:43 Permalink

      Thank you all for your comments πŸ™‚

      @Mark
      I haven’t really put any thought or effort for touch devices (ie iPad).

      On this script, the thumbs panel opens on mouse over (jquery hover function) so it’s not really optimized for touch (although changing hover to click should work fine on such a device).

      From what I’ve seen, “hover” state on touch devices acts as “mouse down” (at least in Flash and CSS) so I thought that it should do the same for js… Guess that’s one of the reasons behind jQuery Mobile Project.

      Reply
      • Esen
        Posted on February 28, 2012 at 11:59 Permalink

        Esen
        Posted February 28, 2012 at 11:58 | Permalink

        I really loved your gallery and decide to use it in my friends project. However as you can see from

        http://cigdemozbilenler.com/studio.html

        the link when I try to scroll down the thumb images everything goes up and it’s frustrating how I can’t resolve this issue. I know it is something defo to do with css and it is very easy to fix but i can not get it work.. Please help someone!!!

        Reply
        • Fatmoti
          Posted on August 19, 2012 at 05:23 Permalink

          I had same problem. It is a missing it as at the bottom of the thumb images. there is a div with clear class at top of images as well. Maybe that will help someone later :).

          Reply
          • Fatmoti
            Posted on August 19, 2012 at 05:24 Permalink

            It took out the html oops. It has a P tag with class clear at bottom of thumb images.

  28. Designs Genius
    Posted on September 13, 2010 at 19:15 Permalink

    Super smooth and elegant jQuery image gallery. Beautiful work by by George McGinley Smith and Brandon Aaron.

    Reply
  29. Lakeside Technologies
    Posted on September 13, 2010 at 19:13 Permalink

    Too cool. This image gallery look quite good.

    Reply
  30. Arie Zonshine
    Posted on September 13, 2010 at 02:20 Permalink

    Wow. Amazing work!

    Reply
    • abhishek
      Posted on September 20, 2010 at 11:06 Permalink

      Really amazing

      Reply
    • PortraitPhotog
      Posted on May 28, 2011 at 18:22 Permalink

      Super cool work! Very Nice.
      My images are both landscape and portrait. How would I go about having the option for a fit-screen auto-play slideshow?

      Reply
    • Esen
      Posted on February 28, 2012 at 11:58 Permalink

      I really loved your gallery and decide to use it in my friends project. However as you can see from

      http://cigdemozbilenler.com/studio.html

      the link when I try to scroll down the thumb images everything goes up and it’s frustrating how I can’t resolve this issue. I know it is something defo to do with css and it is very easy to fix but i can not get it work.. Please help someone!!!

      Reply

Comments pages: 1 2 3 7

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php