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

  1. LX
    Posted on July 13, 2015 at 13:35 Permalink

    Hey guys,

    I discovered that the alternative version states that you can use the native scrollbars, but if i open the gallery menu and move the pointer over to the scrollbar the gallery menu slides back off-canvas. so it doesn’t really let you see where you scrolling to. As it opens on click, it should be easy to also make it close on click to avoid that “bug”.

    Otherwise nice work and a pretty stylish image gallery.

    Reply
  2. lucia
    Posted on May 19, 2015 at 16:45 Permalink

    I really enjoy your work, the images are amazing.
    They’re from another “planet”

    Reply
  3. Chris
    Posted on March 19, 2015 at 19:13 Permalink

    Also have one question. What part of the code is responsible for next image change on click. Is it possible to change such a behavior and maybe import some click on button option?

    Thx

    Reply
  4. Chris
    Posted on March 19, 2015 at 18:34 Permalink

    Great job.!
    Fantastic gallery that I use for my portfolio…
    with some code adapting.

    http://www.bydesigno.com

    Reply
  5. Barigye Kevin
    Posted on December 28, 2014 at 14:28 Permalink

    Amazing work man

    Reply
  6. Mohsen
    Posted on October 19, 2014 at 20:17 Permalink

    Hi .
    so beautiful and very amazing photo gallery.
    Thanks.

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

    Hi .
    so beautiful and amazing photo gallery.
    Thanks.

    Reply
  8. 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
  9. Thang
    Posted on April 25, 2014 at 09:29 Permalink

    auto change where propertise?
    i can auto change images onload

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

    Great work, may you be supported from many sides.

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

    Very usefull Thanks a lot

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

    Excellent work, thanks !

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

    The best gallery functionality, I’ve ever seen.

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

    very nice, thank you….

    Reply
  15. 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
  16. طراحی سایت
    Posted on November 11, 2013 at 15:53 Permalink

    very nice gallery! I suggest you add in the github

    Reply
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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 😀

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

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

    Reply
  23. 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
  24. 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
  25. samina
    Posted on June 8, 2013 at 10:46 Permalink

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

    Reply
  26. 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
  27. 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
  28. Jive
    Posted on May 22, 2013 at 09:58 Permalink

    Awesome Gallery.

    Question is this possible to integrate on WordPress?

    Thanks.

    Reply
  29. 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
  30. 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

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

css.php