SIDEWAYS – jQuery fullscreen image gallery

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

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

Donating helps greatly in developing and updating free software and running this blog 🙂

Pages: 1 2

Tags

image gallery, jquery

282 Comments

Post a comment

Comments pages: Previous 1 … 5 6 7

Julien

Posted on January 18, 2019 at 03:37 Permalink

Very nice piece of code, thank you!

I adapted it to remove the hover’ing (quite headache inducing) among other small improvements.

You can click on “iCover 2” here as an example:

https://www.lddb.com/list.php?format=ld&list=dts&max=250

Sambasiva Balaji

Posted on December 25, 2018 at 13:35 Permalink

good template for responsive mode of image gallery

Odevvebilim

Posted on August 14, 2018 at 03:45 Permalink

Very good thank…

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?

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.

bitxel

Posted on July 13, 2017 at 03:04 Permalink

Beautiful work, downloading, thank you

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

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?

Shojib

Posted on November 23, 2015 at 22:41 Permalink

Awesome tool …….

Giovanni

Posted on August 15, 2015 at 15:51 Permalink

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

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!