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 4 7

  1. Akos Kovacs
    Posted on May 8, 2011 at 12:04 Permalink

    This is anoter masterpiece! I have the same suggestion how to further improve this product. If you may include a separate on the top EXIF information box, that would be really a useful feature for every photographers.

    There are already working php codes to extract EXIF data from pictures, but usually the most frequently used fields are the Exposure time / F number / ISO speed.

    Reply
  2. Ooblu
    Posted on May 4, 2011 at 19:06 Permalink

    Very nice gallery. I’m working to implement it in Drupal 7 and I’m getting there.

    Just one question.
    Is it possible to load a full page instead of the large image?

    Thx

    Reply
    • malihu
      Posted on May 26, 2011 at 03:40 Permalink

      Not out of the box. This gallery script is developed to load images and to turn it to an ajax-loading html app would need some modification on the loading handler functions.

      Reply
  3. çorum köyleri
    Posted on April 28, 2011 at 13:56 Permalink

    hi

    how to drag big photos ? about

    800×1500 px ?

    Reply
  4. Rama Diouf
    Posted on April 26, 2011 at 07:52 Permalink

    I’ve just test your script for my website and change it a little to my needs. Thank you !
    Here it is, if you want to take a look 😉
    http://book.ramadiouf.com/

    – more updates soon – 😉

    Reply
    • FEarBG
      Posted on September 10, 2011 at 18:51 Permalink

      Hello…

      How did you do the mouse movement view ?

      Reply
      • Rama Diouf
        Posted on February 20, 2012 at 15:51 Permalink

        So sorry, I’m sooo late to answer ^^’

        //Use mouse to move the image up and down $bg.bind('mousemove',function(e){ var $mouseCoords = (e.pageY - this.offsetTop); var $mousePercentY = $mouseCoords/$(document).height(); var $top = ($mousePercentY*$bgimg.height()); if ($top < 0){$top = 0;} $(document).scrollTop(0); $bg.scrollTop($top); });

        Reply
        • rabab
          Posted on October 7, 2012 at 00:10 Permalink

          i had tried but i could not add more thumbs images, seems only limited number of images can be displays on left side.

          Reply
  5. Kalman
    Posted on April 25, 2011 at 22:31 Permalink

    Where can I find the .thumb class defintion?

    Reply
    • Rama Diouf
      Posted on April 26, 2011 at 07:57 Permalink

      In the css : #customScrollBox a.thumb_link

      By the way, I add scrollable pictures, overlay, next image button, and so on 😉
      Users of this script, feel free to take some source code with you !

      Reply
  6. Ryan Ritchie
    Posted on April 15, 2011 at 01:12 Permalink

    This gallery is amazing. I have already started to fiddle with the code and stuff but i was wondering if you could help me please. How would i show an iframe instead of the large image. ? ? ? ? ? ? ?

    Any help would be much appreciated. 🙂

    Ryan

    Reply
  7. Cyrus
    Posted on April 10, 2011 at 17:58 Permalink

    Great design my friend and something I had actually in mind. Please write to me to the email provided, as I need to talk to you. Please do so ASAP,

    Thanks

    Reply
  8. Matthew
    Posted on April 8, 2011 at 01:05 Permalink

    Is there a way to implement multiple galleries?

    Reply
    • malihu
      Posted on April 9, 2011 at 06:58 Permalink

      The easiest way is to link different html files for each gallery since having all galleries under a single page, requires ajax calls, extra image loaders and re-calling the custom scrollbar function to adjust the new content.

      Reply
  9. alinaki
    Posted on March 20, 2011 at 15:31 Permalink

    Geia sou, Malihu

    wonderfull gallery, i’ve been searching for something like that to change the flash one i had.
    here you have the link to see how it looks , i made the background a little darker.

    thanks a lot for sharing, i just love it…

    alinaki

    Reply
    • malihu
      Posted on March 20, 2011 at 17:55 Permalink

      Geia sou alinaki,

      Thanks a lot for posting your link and your comments 🙂

      Reply
      • Matthew
        Posted on April 7, 2011 at 03:50 Permalink

        I love this so much. Quick question however. How would I implement multiple galleries. Say I have a navbar that is centered and I click on one of the buttons for that portfolio and have it switch.

        Maybe it would be easier to have it link to a new html file for each gallery instead of having it all in just one page.

        Anyways, thanks for any answer.

        Reply
  10. Mario Sánchez
    Posted on March 19, 2011 at 22:18 Permalink

    Hi again!

    I’m sorry, but I already realized how to change it… I was just not paying enough attention, the syntax was very clear about it! 🙂

    Thanks!
    Mario.

    Reply
  11. Mario Sánchez
    Posted on March 19, 2011 at 22:09 Permalink

    Hi Malihu!

    I’m in love with your sideways gallery, I think it’s very elegant yet functional and easy to use! I have been working with it these latest days to create a new version of my portfolio site. I have been investigating the js code but I’m very green on this so I have not been able to realize what should I do to put the Fit View Mode as the default one. Is it possible? Could you bring any tips on this, please?

    Thank you very much beforehand! 🙂
    Mario.

    Reply
  12. Nick
    Posted on February 25, 2011 at 19:35 Permalink

    Hi Malihu,

    Any chance you could explain how one might alter the “fade” transition effect between images, in favor of a “sliding” effect, which slides the images out from right-to-left?

    Let me know if this is possible. Thanks so much!

    Reply
    • malihu
      Posted on February 26, 2011 at 14:37 Permalink

      Hi Nick,

      Inside script, find (line: 247):
      LargeImageLoad($bgimg);
      and comment it:
      //LargeImageLoad($bgimg);

      Still inside script, find (line: 274):
      $this.fadeIn("slow"); //fadein background image
      and change it to:
      $this.show("slide",{direction:"right"},1000);
      changing the 1000 value (milliseconds) to whatever you want 😉

      Reply
      • Nick
        Posted on March 1, 2011 at 22:56 Permalink

        Malihu,

        You are the man.
        Thanks so much bro!
        Once I’ve implemented this I’ll share…the site is gonna be rather sick!

        Reply
  13. Hannah Pycroft
    Posted on February 11, 2011 at 12:30 Permalink

    Absolutely love this! spent so long trying to find something similar and couldn’t find anything near as stylish…until now!

    Was wondering whether it would be possible to use full page videos instead of the images?

    any help greatly appreciated! 🙂

    Reply
    • malihu
      Posted on February 12, 2011 at 16:14 Permalink

      Thank you for your comments Hannah 🙂
      At the moment you cannot simply load video instead of images. It would require a totally different code for either html5 or flash video. I might create a video gallery based on sideways when I get some time tho 😉

      Reply
  14. stewart
    Posted on February 10, 2011 at 16:51 Permalink

    hi malihu,
    great script. question: when i load the page for the first time, there’s no “click for next image” button/function. i have to click on a thumbnail first to make it possible to click through the big images.
    how can i tweak the code in a way that the “click for next image” function works when the page loads, without clicking a thumbnail first?
    thanks a lot!
    stew

    Reply
  15. Ravi
    Posted on February 8, 2011 at 08:16 Permalink

    Thank you for this awesome script, I want to implement it in my gallery.

    I am new to jQuery, please help me to implement these:
    1.first image clickable to load the next image
    2.previous image navigation

    Thank you
    Ravi

    Reply
  16. Dasha
    Posted on February 5, 2011 at 17:26 Permalink

    It’s impressive!)

    Reply
  17. Jon
    Posted on January 25, 2011 at 21:10 Permalink

    one of the best galleries i’ve seen. is there a way to have panels slide out from the right?

    Reply
  18. Enrico
    Posted on January 25, 2011 at 09:28 Permalink

    Beautiful,
    You can enable full mode in some way the image scroll vertically to be able to see the whole picture?
    Or enable the sidebar to the photo instead of thumbnails?
    (bear with me for writing, I’m Italian!)

    Reply
    • malihu
      Posted on January 25, 2011 at 09:38 Permalink

      At the moment you can only see the whole picture in fit mode (or normal if your images are small enough). When I find some time, I might implement a scrollbar on the large image (I can’t promise tho). Thanks for the suggestion 🙂

      Reply
      • egiova
        Posted on July 9, 2011 at 20:18 Permalink

        For you to be able to scroll the whole image, just change here:
        #bg position:fixed to absolute, it does the trick.
        I tested (Chrome12, FF4, IE9) this with a much smaller gallery, and it works very well, until now I didn’t found any downside.

        Thanks so much for sharing, I’m amazed by your (and your cats) kindness. If, in the real world, everybody will be like you, Hell will be a forgotten word by now. Thanks again.

        Reply
  19. Brett Widmann
    Posted on January 16, 2011 at 05:06 Permalink

    This is a very nice gallery. I think it’ll look great for all my photos.

    Reply
  20. security
    Posted on December 19, 2010 at 17:03 Permalink

    thanks Good woork..

    Reply
  21. Ashish
    Posted on December 17, 2010 at 05:21 Permalink

    First of all, thanks for all your online support in the jquery, The things are good and working in the nice manner

    I am having problem when I use this in internet explorer 5 & 6. It was just when I was checking it cross browser testing. I am manipulating your code somewhat to support that browsers, but I need some advice from you regarding that.

    Thank you

    Reply
    • malihu
      Posted on December 17, 2010 at 11:00 Permalink

      Hello Ashish,
      Thanks for your comments 🙂

      The thing is, I do not support or check any of the scripts, plugins etc. on old browsers, especially IE5 or IE6.

      I believe that the less we developers support these browsers, the more people will upgrade to modern ones, thus making our job and the web itself much better.

      I think that anyone browsing the web with IE5 or IE6 (or Firefox 2 for that matter) misses most web features anyway and certainly doesn’t expect to see my scripts which for example may utilize CSS3 etc.

      In my opinion I help my community and online users a lot more by not supporting old browsers.

      Reply
      • Ashish
        Posted on December 17, 2010 at 16:08 Permalink

        Thanks for your quick reply,

        I am working (with my team) on the project “Future Generation Web application” , and hence I am forced to check the portability on different platforms and even on hand held mobile devices (3G enabled). I will inform you when I’m completed with that. I was very much close to jQuery and I was very interested other java scripts (which provides platform independence).

        Please keep up your good work of sharing the knowledge, I’ve studied many things from your code.

        keep smilling 🙂

        Reply
  22. el barla
    Posted on December 14, 2010 at 13:13 Permalink

    Par mi ła xe un ceso….

    Reply
  23. Bonnie
    Posted on December 8, 2010 at 09:56 Permalink

    Aloha,
    Is there any way this will load an mpeg or avi?

    Great work!!

    Reply
    • malihu
      Posted on December 9, 2010 at 18:32 Permalink

      Aloha 🙂

      It’ll need some additional code and modifications especially for html5 video. I might give a go when I get some time.

      Reply
  24. jimmy
    Posted on November 26, 2010 at 19:57 Permalink

    lovely work…
    i have a directory of images that my website users get to upload it from my website.
    i want to use this to automaticly pull the images from the directory, images are all auto named by the script im using which is in php.

    how can i pull those images and show them on this, instead of adding images one by one, this if you further it with wordpress or even integrate an admin area so it is full galery, you can sell alot of copies, i can see the huge demand and i assure you you can sell at least 500 copies at $15.

    If your interested please drop me an email to discuss this potential.

    All the best,
    Keep up the good work, your defo very good and experimental.

    Reply
  25. daniel
    Posted on November 12, 2010 at 19:10 Permalink

    Hello, just let me tell you great gallery there, I just found it and I’m trying to play with it, I’m not very proficient in the design stuff, CSS mainly.

    Is there a way to add a in front of the full screen image, let say, in the middle right, I’m thinking not as an image gallery only, but as a kind of poetry like site that has a small poem in that div plus the bg image to reinforce the idea.

    Again awesome gallery, keep up the good work.

    Reply
    • malihu
      Posted on November 14, 2010 at 19:45 Permalink

      Yes there is. In the html you can add a div with your content right above the image background (#bgimg) and style it with: position:absolute and z-index:3 and give it the left and top position you want.

      Reply
      • Villa Brayner
        Posted on February 15, 2011 at 16:08 Permalink

        Awesome job!

        Is there a way to add a caption for each image in gallery?

        By the way, this is the best fullscreen gallery i’ve ever seen.
        Thanks and sorry for the bad english.

        Reply
      • malihu
        Posted on February 15, 2011 at 16:29 Permalink

        @Villa Brayner
        Hi, I’ve let the desription of each image to be the title attribute so it’s currently displayed as native browser tooltip.
        I could definitely try to implement an image caption that’ll derive from the title attribute of the thumbnail. I’ll give it go when I get some time available and let you know.

        Reply
      • bin
        Posted on June 5, 2011 at 21:17 Permalink

        Great Job!!!!
        The best gallery I’ve ever seen so far!

        I am also add an image caption for each images in gallery, PLEASE let me know if you got time to implement that.

        Cheers

        Reply
  26. hector
    Posted on November 12, 2010 at 00:09 Permalink

    is great i try to make external link and i do the
    1) Add a class to all the ancor links of images (a class=”classname”)

    2)Find “$outer_container_a=$(“#outer_container a”);” in the script and add your class name to the ancor selector:
    e.g. “$outer_container_a=$(“#outer_container a.classname”);
    but also open the photos on other window not as you make it

    Reply
    • malihu
      Posted on November 12, 2010 at 09:09 Permalink

      Can you post a link to your code so I can check it?

      Reply
  27. Mary
    Posted on November 7, 2010 at 22:07 Permalink

    Hi…i like this gallery but i have a question.
    Is it possible to integrate with WordPress?…and if yes, how?…do i need to make a page template as an “external” page?
    Thanks

    Reply
    • malihu
      Posted on November 8, 2010 at 02:09 Permalink

      Hello Mary,

      I don’t have much experience with wp development so I think you should probably make an external page template.

      Reply
      • Mary
        Posted on November 8, 2010 at 11:01 Permalink

        Hi Malihu…ok, thankx anyway. 🙂

        Bye,
        M

        Reply
  28. Nate
    Posted on November 4, 2010 at 14:57 Permalink

    Is it possible to place links in the html? I have not been able to make links work.

    Reply
    • malihu
      Posted on November 5, 2010 at 02:24 Permalink

      Ah, not really… You need to do some minor tweeking:

      1) Add a class to all the ancor links of images (a class=”classname”)

      2)Find “$outer_container_a=$(“#outer_container a”);” in the script and add your class name to the ancor selector:
      e.g. “$outer_container_a=$(“#outer_container a.classname”);

      This should do the trick.

      Reply
      • Nate
        Posted on November 5, 2010 at 04:00 Permalink

        It worked!
        Thank you so much.

        Reply
  29. Jim
    Posted on November 2, 2010 at 22:45 Permalink

    Is it possible to disable the “lastImageReached” function and let it go back to the first image instead?

    Awesome gallery and pics btw 🙂

    Reply
  30. Nate
    Posted on October 31, 2010 at 01:42 Permalink

    Question from a novice.
    How would you make this work with images that have various aspect ratio’s?

    Reply
    • malihu
      Posted on October 31, 2010 at 15:18 Permalink

      Hello Nate,

      The aspect ratio and size of the images does not affect this script. Each image is scaled via the “FullScreenBackground” function according to window dimensions so it doesn’t really matter if your images are landscape, portrait or both.

      You’ll notice that landscape images are best viewed in “full” view mode since the vast majority of displays and resolutions are widescreen. For the same reason portraits are best viewed in “fit” mode, simply because most of the image info is lost (top and bottom) since you only get to see a relatively small portion of the actual image.

      Reply
      • wan
        Posted on April 4, 2012 at 04:19 Permalink

        Love it!
        Can you point me how to tweak to make 100% width and overflow y when picture is portrait.
        tx

        Reply

Comments pages: 1 2 3 4 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