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 2 3 4 5 6 7

  1. SSujay
    Posted on July 4, 2012 at 16:54 Permalink

    Great work…Amazing Stuff, i want to use this for my website gallery,
    I have recently created web on WordPress , I am newbie, Can tell me how to install this on my website

  2. shofer
    Posted on June 27, 2012 at 22:58 Permalink

    The pictures of pressing the dough turns on again the same picture.
    What that showed up next?

    Please reply…

  3. Eswaran
    Posted on June 12, 2012 at 13:57 Permalink

    its awesome bro..
    I have one doubt regarding the script.Shall we can load the external HTML page without using image.Can you help me in this regard?.

    Thanks in advance!!!

  4. CMentality
    Posted on May 24, 2012 at 18:03 Permalink

    First of all, great gallery!

    I’m trying to pull the images from a directory with php, but I’m having some troubles.
    Only the first full screen image from the ‘space’ folder is pulled from the directory and it is being repeated.
    The thumbnails are being displayed just fine.

    I hope somebody can help me with this:

    //path to directory to scan $directory = "../gallery/imgs/space/"; //path to directory to scan $directoryth = "../gallery/imgs/space/thumbs/"; //get all image files with a .jpg extension. $imagez = glob("" . $directory . "{*.jpg,*.gif,*.png}", GLOB_BRACE); //get all image files with a .jpg extension. $images = glob("" . $directoryth . "{*.jpg,*.gif,*.png}", GLOB_BRACE); //print each file name foreach($imagez as $image) { foreach($images as $imageth) { echo "<a href='$image' / rel="nofollow"></a>"; } }

  5. Florix222
    Posted on May 14, 2012 at 18:41 Permalink

    Hi, malihu!

    Wow it´s really remakalbe what you did. Is it possible to have external links on each of the BIG Pic on the right?

    Best regards

    • Florix222
      Posted on May 14, 2012 at 18:43 Permalink

      I´meant remarkable 😉

    • john
      Posted on June 2, 2012 at 23:34 Permalink


  6. Piotr
    Posted on May 13, 2012 at 15:06 Permalink

    Do you mind hosting the code on
    That way, you can have a nice versioning system.. AND people can help contributing to it!
    I could help you out if you need support putting it there 🙂

    (I dont work for github.. but I use it a lot for my own work. Besides a lot of major opensource software is hosted there because it’s just easy and powerful. twitter-bootstrap, html5 boilerpalte, backbone.js as well as many others are!)

    Cheers and Thank a lot bro ^^

    • malihu
      Posted on May 14, 2012 at 03:15 Permalink

      I wanted to host code on github.
      The thing is I’m currently re-design this site, working on a new plugin (I’ll post here of course) and I did upgrade my hosting server (due to traffic etc.)… so I’m pretty full at the moment.
      It would be awesome if you could help putting the code on github though 🙂 Especially, since I haven’t use it yet so I’ll need to see how it works etc. Can you help?

  7. slider2nl
    Posted on May 4, 2012 at 22:32 Permalink

    I cant get de sideway slider to the right or i am missing something, can you please tell me how i place it to the right side of the screen. Thanks..

    • malihu
      Posted on May 5, 2012 at 01:08 Permalink

      Unfortunately at the moment you can’t reposition the slider (at least not without major script editing). I’ll try to find some time to update the script with such feature and post the updated version.

  8. Rom
    Posted on March 28, 2012 at 00:01 Permalink

    This is close to what I’ve been looking for. Props to you sir!

    I wanted to have my Site Navigation Menu in the slide box (including images linking to recent entries listed downward), and my main content (such as an article) in the main container.

    How would I go about doing this?

    When I place an article in the main content area, I can’t scroll down.

    Feel free to contact me regarding compensation.
    Thanks in advanced.

  9. erwin
    Posted on March 15, 2012 at 17:14 Permalink

    In this page there is a great example what I’am looking
    When you click “iso zoomattava kuva” -button you see what I mean. That is a full screen.

  10. erwin
    Posted on March 15, 2012 at 17:11 Permalink

    How can this is a full screen? You can still see browser toolbars etc. I’m interested real fullscreen image gallery. Like you watch youtube in fullscreen mode.

    • Sebastian
      Posted on March 8, 2013 at 03:50 Permalink

      use this as a link

      <A href=# onClick=toggleFullScreen();event.preventDefault()>Click here for Full Screen</a>

      and this script after the gallery script

      <script>var bodyElement=document.getElementById("body"); function toggleFullScreen(){document.fullScreenElement&&null!==document.fullScreenElement||!document.mozFullScreen&&!document.webkitIsFullScreen?document.documentElement.requestFullScreen?document.documentElement.requestFullScreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.webkitRequestFullScreen&&document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):document.cancelFullScreen?document.cancelFullScreen(): document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen()}document.addEventListener("keydown",function(a){13==a.keyCode&&toggleFullScreen()},!1);</script>

  11. William
    Posted on March 14, 2012 at 21:20 Permalink


    You kickass.

  12. JL
    Posted on March 1, 2012 at 12:03 Permalink

    This is Spectacular

  13. Olah Marcel
    Posted on February 19, 2012 at 16:23 Permalink

    I use jquery dropkick and I have the following problems:
    1. I can’t scroll the select form options because it is scrolled the entire page (maybe conflict with the jquery mousewheel)
    2. I can’t close the select form only if I click on the select form (if I click anywhere else, the selct form simply don’t close)

    • Olah Marcel
      Posted on February 19, 2012 at 16:26 Permalink
      This is the website where the jquery sideways is used.
      Please if you have ideas about this problems, help me out.

  14. Philippine Christian
    Posted on February 14, 2012 at 10:48 Permalink

    Thanks for sharing this great script… good job!! Cheers!

  15. Ignacio
    Posted on February 14, 2012 at 04:01 Permalink

    Hello, Amazing slideshow gallery, I ve been looking for this for some time. Im using a wordpress template i like the way i modified it ad Im just using for a home page. I would like to add a link where it goes straight to that gallery. Im sorry for my question, I know it may sound really stuid, but unzipped the zip file and put it in my ftp server, then made a link on my website specifing the url. but it didnt work. I dont know what im doing wrong. I also tried to install the plugin via wordpress plugins add on but it fails to install the plugin.
    Im sorry but how can I use your jquery gallery and use it. I have my domain with go dady and im using wordpress. I know how to access via ftp. Could you tell me please. I will really apreciate and I love your slideshow gallery and I will definetly give you credit on my website for your gallery. Thank you so much and talk to you soon.

  16. Dan M
    Posted on February 12, 2012 at 02:19 Permalink

    Hi there.

    Thank you very much for this wonderful piece of coding.
    I am not so experienced in JQuery or JavaScript and I tried to use my AS3 skills into solving one simple problem : making the default image clickable (as in going to the next one, without selecting a thumbnail) . Apparently my AS3 skills didn’t help. I read all the comments and I saw a similar one with no reply:

    I think that the solution is very simple, but I am just not able to see it. If you can drop a short line I would appreciate it very much.
    Keep up the good work and thank you again!

  17. jwack
    Posted on February 5, 2012 at 06:58 Permalink


    i posted this awhile back

    “Is there any way to keep the gallery in $defaultViewMode=”full” but if the selected image is taller than it is wide automatically switch the defaultViewMode to “fit”?

    Do you have any suggestions?

  18. Mario
    Posted on February 2, 2012 at 17:14 Permalink

    this is one great gallery. Thanx a lot for sharing it with us.

    I got one wish maybe for the next version. It would be great to have the next image already preloaded, so when clicking a image, the next one would be shown quit instantly.


  19. Tirumal
    Posted on January 30, 2012 at 15:30 Permalink

    awesome!! Can I insert some div for image caption and description in it?
    Thanks for sharing such an excellent work!! you Rock!!!!

  20. Jeison
    Posted on January 19, 2012 at 21:59 Permalink


    Great gallery!

    I have a question. How do I start the gallery when the page is loading?


  21. Ramiro Modica
    Posted on January 17, 2012 at 20:17 Permalink


    Is there a way to put the button “next image”, in the first image of the gallery?

  22. Miranda Kerr
    Posted on January 4, 2012 at 21:45 Permalink

    This is such a beautiful way to display an image gallery. I love it! Thank you so much for sharing your hard work. I have a project I can use this for.

  23. kewas
    Posted on December 30, 2011 at 21:30 Permalink

    Too cool. This is one of perfect image gallery. It quite good.

  24. Marian
    Posted on December 23, 2011 at 16:38 Permalink

    I love this script… actually I’m VERY impressed ! congrats & keep up the good work !

  25. Wallace Erick
    Posted on December 15, 2011 at 17:28 Permalink

    doesn’t works with video?

    • malihu
      Posted on December 25, 2011 at 15:00 Permalink

      Nope. It’s just an image gallery.

  26. Luke
    Posted on December 3, 2011 at 18:05 Permalink

    I have no idea how could I install it to a single page.. I´m new at wordpress comunity and don´t understand how to integrate jquery.. Can anybody help me? Thanks!

  27. Jean-cédric T.
    Posted on November 28, 2011 at 11:41 Permalink

    You kept It smart and simple ! Slick and efficient ! Great job !

    By the way, I have a super ego, I’m lazy and nut crusher 😉 so I currently try to enhance your code to be more like a “real jquery plugin” than “just” some js code wandering around. Plus, I port it to Coffeescript (I’m a nut crusher, remember ? ;D ).
    You didn’t seam to use any licence for your code, nor a code repo (like sourceforge, github, etc.).

    So, here are the questions:

    -Do you grant me the right to put the code under something like GPL 3+ or LGPL at least ?

    -Do you have any preference for a code repo or can I use github as I wanted in first place ?

    Thank you again for this beautiful gallery !

    • josh
      Posted on December 2, 2011 at 22:42 Permalink

      Awesome setup man… 😀
      I’ve got this working with BBQ Deep-linking perfectly. Plus im using Drupal 7 to create relationship based galleries that house One Image Per Node image-nodes, this brings commenting ability & super simple gallery/image creation/management etc… im still working on adding more features such as loading the other related content via ajax, but its looking good!

      Thanks for the inspiration!


    • alain
      Posted on December 20, 2011 at 21:26 Permalink

      I would love this see the answer to this question because I could use your cleaned up version!

    • malihu
      Posted on December 25, 2011 at 14:58 Permalink

      @Jean-cédric T. Thanks for your comments. I give you the right to do anything you want with it (GPL 3, github etc.) as long as you reference the source somewhere 🙂

      @josh Great! Thanks for posting this.

  28. diseño paginas web
    Posted on November 25, 2011 at 11:23 Permalink

    gracias por la coleccion y comportatirla! thanks

  29. Nick Wiltshire
    Posted on November 23, 2011 at 20:24 Permalink

    Hi, Brilliant code, thanks!

    Just wanted to check, I’m not great with javascript and their may be a quick solution. Has anyone added a history plugin to the script?

    I downloaded this jquery history plugin but I’m just shooting in the dark trying to get it to work..

    Any ideas?

    Thanks, Nick

  30. gentlebird
    Posted on November 22, 2011 at 12:19 Permalink

    i love this script and i am thinking about redesigning my side with it.

    it already has been asked but not answered yet.
    is there an option of autoplay? would be very cool

    • malihu
      Posted on December 11, 2011 at 13:50 Permalink

      Not at the moment ;(
      I’ll try to find some time to implement an auto-play function and post an update here.


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