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

Pages: 1 2


273 Comments

Post a comment

Comments pages: 1 5 6 7

  1. 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
  2. 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