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

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

Pages: 1 2

286 Comments

Post a comment

Comments pages: Previous 1 … 5 6 7

gadhafi
Posted on July 4, 2023 at 13:36 Permalink

First slide not working, works only after hit on any other thumb then next image working, on load image stays not changing
Reply
Mike G
Posted on March 29, 2021 at 19:38 Permalink

Could this be modified to show video?
Reply
john
Posted on July 8, 2019 at 00:19 Permalink

Is there any way to add code to make this an automated slideshow? Thank you
Reply
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
Reply
Sambasiva Balaji
Posted on December 25, 2018 at 13:35 Permalink

good template for responsive mode of image gallery
Reply
Odevvebilim
Posted on August 14, 2018 at 03:45 Permalink

Very good thank…
Reply
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
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
bitxel
Posted on July 13, 2017 at 03:04 Permalink

Beautiful work, downloading, thank you
Reply
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
- Flash Buddy
  Posted on March 12, 2019 at 18:27 Permalink
  
  You don’t specify an image folder, but rather edit the html pages to replace the existing path to your folder and images. ex:
  
  Reply
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
Shojib
Posted on November 23, 2015 at 22:41 Permalink

Awesome tool …….
Reply
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
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