web design

SIDEWAYS – jQuery fullscreen image gallery

Last updated on Nov 20, 2010 Originally published on September 12, 2010 by , under Templates & web apps.

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.

view demo Alternative demo with native browser scrollbars and click to open panel mode.
download Get all files related to post

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.
http://opensource.org/licenses/MIT

Pages: 1 2

Tags

,

Posts related to this article

Simple jQuery fullscreen image gallery jQuery custom content scroller Fullscreen background image with jQuery

267 Comments

Post a comment

Comments pages: 1 … 4 5 6

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

    Amazing work man

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

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

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

    Hi .
    so beautiful and amazing photo gallery.
    Thanks.

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

    auto change where propertise?
    i can auto change images onload

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

    Great work, may you be supported from many sides.

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

    Very usefull Thanks a lot

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

    Excellent work, thanks !

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

    The best gallery functionality, I’ve ever seen.

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

    very nice, thank you….

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

    very nice gallery! I suggest you add in the github

    Reply
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. kamran
    Posted on June 24, 2013 at 12:14 Permalink

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

    Reply
  19. 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
  20. 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
  21. samina
    Posted on June 8, 2013 at 10:46 Permalink

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

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

    Awesome Gallery.

    Question is this possible to integrate on WordPress?

    Thanks.

    Reply
  25. 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
  26. 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

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