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

You are free to use, study, improve and modify this script wherever and however you like.
Creative Commons License All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.

Pages: 1 2


265 Comments

Post a comment

Comments pages: 1 2

  1. mortezaKazemiTascoo
    Posted on August 30, 2014 at 22:04 Permalink

    Hi .
    so beautiful and amazing photo gallery.
    Thanks.

    Reply
  2. Sergey Romanchuk
    Posted on May 14, 2014 at 15:38 Permalink

    Hello
    Thank you for your gallery.
    I added menu and used as the basis for my personal site – http://www.fotos.eu.pn

    Reply
  3. Thang
    Posted on April 25, 2014 at 09:29 Permalink

    auto change where propertise?
    i can auto change images onload

    Reply
  4. Ahmed Munir
    Posted on April 20, 2014 at 00:14 Permalink

    Great work, may you be supported from many sides.

    Reply
  5. mehmet
    Posted on January 13, 2014 at 13:01 Permalink

    Very usefull Thanks a lot

    Reply
  6. Abdurrahman
    Posted on January 9, 2014 at 00:27 Permalink

    Excellent work, thanks !

    Reply
  7. Asif
    Posted on December 13, 2013 at 14:43 Permalink

    The best gallery functionality, I’ve ever seen.

    Reply
  8. amir sattary
    Posted on December 8, 2013 at 14:36 Permalink

    very nice, thank you….

    Reply
  9. Rex
    Posted on November 15, 2013 at 05:07 Permalink

    Hello,

    Thanks for ur sharing this awesome jquery script.

    I have a problem need your help!

    Can I play the video and image at the same time?

    How should I do ?

    Thank you so much.

    Reply
  10. طراحی سایت
    Posted on November 11, 2013 at 15:53 Permalink

    very nice gallery! I suggest you add in the github

    Reply
  11. Chris V.
    Posted on September 10, 2013 at 13:03 Permalink

    Hi,

    very nice gallery sir! Is by far better than many premium galleries and is free! Thank you :)

    P.S.
    Just a thought… You could add by default one more button that will redirect the user to the previous page. When a user views all the images in a website, usually wants to go back to home to explore more so it would be nice to have that option by default. Just one more button with some history.back(); would be awesome. The gallery is still awesome anyway!

    Reply
  12. alex
    Posted on August 28, 2013 at 06:22 Permalink

    Hi, is it possible to disable the side menu from displaying everytime the page is reloaded/refreshed?

    Reply
  13. Osvaldo
    Posted on July 31, 2013 at 23:16 Permalink

    This site seems very interesting to me. Who like technology and linkes codes or web development have to see it.

    Reply
  14. Milner
    Posted on July 29, 2013 at 18:47 Permalink

    Sorry for my english: I’m french.

    Hi I found your gallery wonderfull and I’m using it on my website. I’ve got just a small problem that I can’t solve: I wonder how to slow down the thumb scrolling, is there any variable I could change ?

    Many thanks,
    regards François

    Reply
  15. Koky
    Posted on July 24, 2013 at 23:07 Permalink

    Hello malihu,
    this template looks really cool ;) Thanks for sharing it. Only one question about this template … it is possible to add keyboard support ? I mean PgUp/PgDn for scrolling thumbs and Left/Right Arrow for switching between large images … i’m not friend with JavaScript and all my tries end with the same way … reload back original source file :D

    Reply
  16. kamran
    Posted on June 24, 2013 at 12:14 Permalink

    hi can you please help me . i want to auto play how ?

    Reply
  17. Drew
    Posted on June 13, 2013 at 10:02 Permalink

    Really great gallery, the best there is!

    it has been asked several times, but, was there anyway to add hyperlinks to the background?

    Thank you,
    regards,
    Drew

    Reply
  18. samina
    Posted on June 8, 2013 at 10:50 Permalink

    i am settings your slider in this website http://www.demo.versaceglassesbypost.co.uk/products/?sub=item&id=183810&cid=3155 me display slider in specified area.
    plz reply me fast

    Reply
  19. samina
    Posted on June 8, 2013 at 10:46 Permalink

    pl z help me as soon as possible i m waiting your response

    Reply
  20. samina
    Posted on June 8, 2013 at 09:53 Permalink

    Thank you very much for this wonderful slider. is possible we can display in specified area and finish sticky or fix mode?i m not display images in full screen

    Reply
  21. fábio
    Posted on May 22, 2013 at 19:57 Permalink

    Sou muito grato, este é o melhor plugin jquery q eu já vi o pessoal muito obrigado ajudou muito

    Reply
  22. Jive
    Posted on May 22, 2013 at 09:58 Permalink

    Awesome Gallery.

    Question is this possible to integrate on WordPress?

    Thanks.

    Reply
  23. Martin
    Posted on May 20, 2013 at 15:34 Permalink

    Hi, thank for your nice gallery. I have a problem: I´d like to change group of images (thumbnail) by Ajax after click on thumb-picture . It´works but I can´t figure out, how to tell to engine, that set of thumbs is changed. Can you help me, please?

    Reply
  24. Abhay
    Posted on May 6, 2013 at 02:53 Permalink

    Hey

    This is just brilliant!!
    I’m going to use it for a website.. But there’s an issue.

    The scrollbar for the image thumbnails (on the left) doesn’t work. On-click, nothing happens.

    Help please?

    I’m using another jQuery file (Slide Down Menu jQuery) for the navigation.. Is there any conflict?

    Reply
  25. Jitendra Shah
    Posted on May 3, 2013 at 22:50 Permalink

    Also from my comment on how to achieve 5 images in a row instead of 4

    How do I take the hovering scroll away so that it only scrolls left and right when clicked. No hovering nessersary for this project as my client doesnt like it much

    Thanks for the amazing tutorial. Keep them coming!

    Reply
  26. Jitendra Shah
    Posted on May 3, 2013 at 22:46 Permalink

    Hi, great tutorial. Instead of 4 images, I want five along each row, on the left. How do I achieve this?

    Thanks!

    Reply
  27. Simone
    Posted on April 28, 2013 at 21:29 Permalink

    very nice! can i use it like other slideshows? (less than fullscreen) thanks!

    Reply
  28. samma20
    Posted on April 22, 2013 at 12:11 Permalink

    WooooooooooooW
    very Nice…Thanks

    Reply
  29. Arseniy Shkljaev
    Posted on April 20, 2013 at 12:36 Permalink

    The problem with this gallery is that when image is bigger in height. There is no way to scroll image up and down.
    I thought to use this gallery for a webcomic but it doesn’t fit because the comic is vertical and no way to scroll up and down…

    Reply
    • malihu
      Posted on April 23, 2013 at 08:56 Permalink

      You can set the $defaultViewMode variable in the script to fit (it displays all image data).

      Reply
  30. Luuk
    Posted on April 3, 2013 at 19:16 Permalink

    Very nice!!

    Reply
  31. Dana
    Posted on March 30, 2013 at 22:46 Permalink

    Does this not work with wordpress? I dropped the folder into the plugin folder and it’s not showing up :(

    Reply
  32. samir
    Posted on March 28, 2013 at 10:50 Permalink

    i have a suggestion that would be great if added to this script , i suggest to add categories in the left gallery on the top so users can extract only photos associated to one category each time , mybe we need a mysql table to hold categories and subcategories info and also anther table to hold info about each photo in our whole album or database , if you add this , the script will be 1000’s times more popular and have more positive rating.

    Reply
  33. Michael
    Posted on March 14, 2013 at 17:23 Permalink

    This is a great code.

    I have used it to build a portfolio. You can see how mine turned out:

    http:kmphotography.eu

    I have included a javascript that reads the screen resolution and if it is less or equal than 1024px it redirects to the mobile version (the second version in your package without the rollover on the left side).

    Also if you visit from iOS device i have included a script to scroll using the accelerometer of the device.

    Finally i added also a script to go fullscreen and a menu that loads external pages in colorbox.

    Thank you very very much for the great code you have written. It is awesome!!!

    Reply
  34. Mayank
    Posted on February 6, 2013 at 19:30 Permalink

    Nice design demo….keep it up.

    Reply
  35. Brandon
    Posted on February 6, 2013 at 04:11 Permalink

    so i am running into an issue.

    on this page

    http://thebromswedding.info/gallery.html

    the images on the right are not showing up.

    :(

    when i do it not accessing the internet it works fine.

    can you please help me!!!!

    Reply
  36. Cory
    Posted on February 5, 2013 at 21:26 Permalink

    Hello Malihu,

    This with the Simple jQuery fullscreen image gallery are beautiful plugins for any gallery website.

    I just want to know if there is a way to disable the FireFox and Chrome plugin “downloadhelper” from easily downloading all the images. With just two clicks, all images can be downloaded as a batch.

    There are some jquery sites out there that don’t get picked up by the plugin so quite curious on how to accomplish this.

    Anyway, thank you for your work on this. Almost a year on and it is still highly appreciated. Thank you for your time.

    Cory

    Reply
  37. Gianluca
    Posted on January 13, 2013 at 17:29 Permalink

    Hi malihu,

    I wrote a module for Drupal 6 Views using your gallery, I’ve added a little feature to tune the color of the background with the image above in “fit” and “original” display modes using html5 canvas. It works quite well! Take a look at:
    http://www.quovadiscom.com/content/drupal-views-sideways-plugin

    Great work, thanks for sharing it!

    Gianluca

    Reply
  38. Flavia
    Posted on January 5, 2013 at 21:27 Permalink

    Muchas gracias!!

    Reply
  39. seven
    Posted on January 5, 2013 at 15:35 Permalink

    感谢您的分享,效果很超赞哦!!大神,膜拜

    Reply
  40. Maarten
    Posted on November 30, 2012 at 19:44 Permalink

    Hi All

    I’ve tried this script for the first time, looks great. Thank you.
    Unfortunatly I’m having some trouble getting it to work online.

    For some reason he doesn’t show the pictures on the right side (Offline it works perfectly)

    http://www.containerverhuurdesoete.be/fotos.html

    Does there need to be any scirpting active on the server?

    These are two lines of the images I used:


    Any help would be greatly appreciated.
    Thx

    Reply
    • malihu
      Posted on December 1, 2012 at 11:34 Permalink

      Hi,
      I get a 404 error when I try access your images:
      “The requested URL /images/album/2%20(13).jpg was not found on this server.”
      Check your images path and/or try renaming your images with filenames containing only alphanumeric, “-” and “_” characters.

      Reply
  41. ayan
    Posted on November 3, 2012 at 19:33 Permalink

    amazing work thanks alot really great and its free Cool :)

    Reply
    • malihu
      Posted on November 3, 2012 at 20:03 Permalink

      Thanks! Version 2.0 coming soon ;)

      Reply
  42. farid
    Posted on October 13, 2012 at 19:49 Permalink

    ok

    Reply
  43. Ali
    Posted on September 29, 2012 at 02:50 Permalink

    Really perfect image gallery. I think, best jquery plugin.

    Reply
  44. M
    Posted on September 27, 2012 at 18:49 Permalink

    IS there a way i can put “header” kind of links to the left side to easily allow users to navigate across different page/galleries

    Reply
  45. rabab
    Posted on September 24, 2012 at 09:12 Permalink

    no doubth its good!
    But if there any possibilities to have a title for each large image within a div where i can give the link to any other url or page on web through this title

    thanks

    Reply
  46. Andrew
    Posted on September 5, 2012 at 16:29 Permalink

    Hi there, this is an amazing gallery. I’m having a weird issue. I simply uploaded your source files as a test to my server and i’m getting a weird error.

    Here is what I mean:http://whenmylenemetandy.com/sideways_jquery_fullscreen_image_gallery/sideways_jquery_fullscreen_image_gallery_nativescrollbars_clickmode.html

    Please let me know if you know what is wrong.

    Thanks!

    Andrew

    Reply
  47. Diseño Paginas Web Bogota
    Posted on September 3, 2012 at 03:28 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.

    Reply
  48. Orion
    Posted on August 30, 2012 at 08:10 Permalink

    i need to make it 700 by 460 how do i do that? im kind of new o java. Where in the code would i edit the width and height?

    Reply
  49. vipul
    Posted on August 27, 2012 at 21:53 Permalink

    Hi

    this is amazing work , thanx for it.

    But please suggest how do we add a caption below the full screen image , about the image which is being displayed . A caption box.

    Pls suggest.

    thank you.

    Reply
  50. Ernesto
    Posted on August 23, 2012 at 00:30 Permalink

    Hi malihu!!! What a great piece of work!! Thanks a lot for it. I have two questions, I hope you can help me with that.
    1. Is there a way to include information of the image like the name?
    2. I notice that the the $defaultViewMode=”fit” only works if the toolbar object exists in the customScrollBox. Is there a way that this object doesn’t appears and the interface works in fit mode from the beginning?
    Thanks a lot, Great Work!!!!

    Reply
  51. Adam
    Posted on August 7, 2012 at 18:18 Permalink

    hi, i’m working with your plugin and i wonder how to disable looping after clicking the last image

    Reply
  52. Sebastian
    Posted on August 6, 2012 at 11:22 Permalink

    Great, and thanks for sharing it under the CC
    I have implemented it on my site and tweaked it a little. I noted that you are working on an update so, i have a suggestion: Is it possible to pre-load the next image before it it kicked? Many users would benefit from it as the images are displayed faster.
    have a nice day
    Seb

    Reply
    • Sebastian
      Posted on August 6, 2012 at 11:23 Permalink

      * clicked

      Reply
    • malihu
      Posted on August 6, 2012 at 17:40 Permalink

      I’ll definitely add such feature on the next version of the gallery ;) Thanks for the feedback

      Reply
  53. Shayne
    Posted on July 21, 2012 at 00:41 Permalink

    Hi Malihu,
    Not sure if you are still answering anything on here, but in your replies you mentioned that you were thinking of reworking this so that it was more ipad / mobile friendly. I was wondering if you ended up doing that, since I’m thinking of using this for a friend’s website and she really wants it to be accessible via ipad as well.

    Thanks!
    -Shayne

    Reply
    • malihu
      Posted on July 21, 2012 at 09:19 Permalink

      Hello Shayne,
      I plan on updating the gallery within next month.

      Reply
  54. furqan
    Posted on July 13, 2012 at 09:00 Permalink

    Hi amazing slider one question how re-size or fix complete slider to width=”800px”; and Height=”500px”; any one help me how to size fix where i am changing to adjust size thanks

    Reply
  55. 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

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

    http://www.ridingclub.pl/galeria.html

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

    Please reply…

    Reply
  57. 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!!!

    Reply
  58. 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>"; } }

    Reply
  59. 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
    Flo

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

      I´meant remarkable ;)

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

      NO WAYYYYYYYYYYYY

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

    Do you mind hosting the code on github.com??
    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 ^^

    Reply
    • 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?

      Reply
  61. 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..

    Reply
    • 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.

      Reply
  62. 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.

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

    In this page there is a great example what I’am looking
    http://tee-se-itse.hongkong.fi/fi/kasityokalut/kasisahat-ja-terat/g-man-rautasaha/p/186526/
    When you click “iso zoomattava kuva” -button you see what I mean. That is a full screen.

    Reply
  64. 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.

    Reply
    • 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>

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

    God!

    You kickass.

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

    This is Spectacular

    Reply
  67. 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)

    Reply
    • Olah Marcel
      Posted on February 19, 2012 at 16:26 Permalink

      http://www.ardf.ro/side/
      This is the website where the jquery sideways is used.
      Please if you have ideas about this problems, help me out.

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

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

    Reply
  69. 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.

    Reply
  70. 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!

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

    @malihu

    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?

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

    Hi,
    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.

    Best,
    Mario.

    Reply
  73. 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!!!!

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

    Hi!

    Great gallery!

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

    thanks

    Reply

Comments pages: 1 2


Post a comment

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>

css.php