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

  1. 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
  2. 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
  3. Simone
    Posted on April 28, 2013 at 21:29 Permalink

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

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

    WooooooooooooW
    very Nice…Thanks

    Reply
  5. 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
  6. Luuk
    Posted on April 3, 2013 at 19:16 Permalink

    Very nice!!

    Reply
  7. 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
  8. 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
  9. 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
  10. Mayank
    Posted on February 6, 2013 at 19:30 Permalink

    Nice design demo….keep it up.

    Reply
  11. 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
  12. 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
  13. 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
  14. Flavia
    Posted on January 5, 2013 at 21:27 Permalink

    Muchas gracias!!

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

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

    Reply
  16. 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
  17. 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
  18. farid
    Posted on October 13, 2012 at 19:49 Permalink

    ok

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

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

    Reply
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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

Comments pages: 1 3 4 5 6 7

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