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.


  • 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


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

Pages: 1 2


Post a comment

Comments pages: 1 5 6 7

  1. gadhafi
    Posted on July 4, 2023 at 13:36 Permalink

    First slide not working, works only after hit on any other thumb then next image working, on load image stays not changing

  2. Mike G
    Posted on March 29, 2021 at 19:38 Permalink

    Could this be modified to show video?

  3. john
    Posted on July 8, 2019 at 00:19 Permalink

    Is there any way to add code to make this an automated slideshow? Thank you

  4. Julien
    Posted on January 18, 2019 at 03:37 Permalink

    Very nice piece of code, thank you!

    I adapted it to remove the hover’ing (quite headache inducing) among other small improvements.

    You can click on “iCover 2” here as an example:

  5. Sambasiva Balaji
    Posted on December 25, 2018 at 13:35 Permalink

    good template for responsive mode of image gallery

  6. Odevvebilim
    Posted on August 14, 2018 at 03:45 Permalink

    Very good thank…

  7. Agustin
    Posted on August 9, 2018 at 17:32 Permalink

    Hi! this is an awesome template! thanks a lot.

    I’d like to fit this inside a div instead of using it fullscreen (because i want a banner to be on top of it all the time) ¿Is there a way to do so?

  8. Ideas Launcher SAS
    Posted on July 25, 2018 at 02:40 Permalink

    Great and usefull for web development and grafic arts in web sites, very important tool. thx from colombia.

  9. bitxel
    Posted on July 13, 2017 at 03:04 Permalink

    Beautiful work, downloading, thank you

  10. Dobro
    Posted on March 31, 2017 at 19:33 Permalink

    Hello ,
    How do I view images in a folder ?

    I upload my image folder
    But how can I tell SideWays to view them?


    • Flash Buddy
      Posted on March 12, 2019 at 18:27 Permalink

      You don’t specify an image folder, but rather edit the html pages to replace the existing path to your folder and images. ex:

  11. Trevor
    Posted on August 25, 2016 at 07:19 Permalink

    I cant seem to have this exactly as you do, all the png’s wont load. Do I need to make them special?

  12. Shojib
    Posted on November 23, 2015 at 22:41 Permalink

    Awesome tool …….

  13. Giovanni
    Posted on August 15, 2015 at 15:51 Permalink

    It’s beautiful, but how can I insert a comment for each of images?

  14. Mike
    Posted on August 12, 2015 at 11:17 Permalink

    Hey there, Your work is last I found an image gallery that I can use in my project..thanks so much keep up! God bless!


Comments pages: 1 5 6 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>