This website uses cookies to personalise ads and to analyse traffic ok
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

280 Comments

Post a comment

Comments pages: 1 … 5 6 7

  1. Odevvebilim
    Posted on August 14, 2018 at 03:45 Permalink

    Very good thank…

    Reply
  2. Agustin
    Posted on August 9, 2018 at 17:32 Permalink

    Hi! this is an awesome template! thanks a lot.

    I’d like to fit this inside a div instead of using it fullscreen (because i want a banner to be on top of it all the time) ¿Is there a way to do so?

    Reply
  3. Ideas Launcher SAS
    Posted on July 25, 2018 at 02:40 Permalink

    Great and usefull for web development and grafic arts in web sites, very important tool. thx from colombia.

    Reply
  4. bitxel
    Posted on July 13, 2017 at 03:04 Permalink

    Beautiful work, downloading, thank you

    Reply
  5. Dobro
    Posted on March 31, 2017 at 19:33 Permalink

    Hello ,
    How do I view images in a folder ?

    I upload my image folder
    But how can I tell SideWays to view them?

    Thanks

    Reply
  6. Trevor
    Posted on August 25, 2016 at 07:19 Permalink

    I cant seem to have this exactly as you do, all the png’s wont load. Do I need to make them special?

    Reply
  7. Shojib
    Posted on November 23, 2015 at 22:41 Permalink

    Awesome tool …….

    Reply
  8. Giovanni
    Posted on August 15, 2015 at 15:51 Permalink

    It’s beautiful, but how can I insert a comment for each of images?

    Reply
  9. Mike
    Posted on August 12, 2015 at 11:17 Permalink

    Hey there, Your work is great..at last I found an image gallery that I can use in my project..thanks so much keep up! God bless!

    Reply

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