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$defaultViewModevariable in the script
Fixed conflict when placing links inside thumbnail panel
- Minor code optimization
- 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
Also from my comment on how to achieve 5 images in a row instead of 4
How do I take the hovering scroll away so that it only scrolls left and right when clicked. No hovering nessersary for this project as my client doesnt like it much
Thanks for the amazing tutorial. Keep them coming!
Hi, great tutorial. Instead of 4 images, I want five along each row, on the left. How do I achieve this?
Thanks!
very nice! can i use it like other slideshows? (less than fullscreen) thanks!
WooooooooooooW
very Nice…Thanks
The problem with this gallery is that when image is bigger in height. There is no way to scroll image up and down.
I thought to use this gallery for a webcomic but it doesn’t fit because the comic is vertical and no way to scroll up and down…
You can set the $defaultViewMode variable in the script to fit (it displays all image data).
Very nice!!
Does this not work with wordpress? I dropped the folder into the plugin folder and it’s not showing up 🙁
i have a suggestion that would be great if added to this script , i suggest to add categories in the left gallery on the top so users can extract only photos associated to one category each time , mybe we need a mysql table to hold categories and subcategories info and also anther table to hold info about each photo in our whole album or database , if you add this , the script will be 1000’s times more popular and have more positive rating.
This is a great code.
I have used it to build a portfolio. You can see how mine turned out:
http:kmphotography.eu
I have included a javascript that reads the screen resolution and if it is less or equal than 1024px it redirects to the mobile version (the second version in your package without the rollover on the left side).
Also if you visit from iOS device i have included a script to scroll using the accelerometer of the device.
Finally i added also a script to go fullscreen and a menu that loads external pages in colorbox.
Thank you very very much for the great code you have written. It is awesome!!!
Nice design demo….keep it up.
so i am running into an issue.
on this page
http://thebromswedding.info/gallery.html
the images on the right are not showing up.
🙁
when i do it not accessing the internet it works fine.
can you please help me!!!!
Hello Malihu,
This with the Simple jQuery fullscreen image gallery are beautiful plugins for any gallery website.
I just want to know if there is a way to disable the FireFox and Chrome plugin “downloadhelper” from easily downloading all the images. With just two clicks, all images can be downloaded as a batch.
There are some jquery sites out there that don’t get picked up by the plugin so quite curious on how to accomplish this.
Anyway, thank you for your work on this. Almost a year on and it is still highly appreciated. Thank you for your time.
Cory
Hi malihu,
I wrote a module for Drupal 6 Views using your gallery, I’ve added a little feature to tune the color of the background with the image above in “fit” and “original” display modes using html5 canvas. It works quite well! Take a look at:
http://www.quovadiscom.com/content/drupal-views-sideways-plugin
Great work, thanks for sharing it!
Gianluca
Muchas gracias!!
感谢您的分享，效果很超赞哦！！大神，膜拜
Hi All
I’ve tried this script for the first time, looks great. Thank you.
Unfortunatly I’m having some trouble getting it to work online.
For some reason he doesn’t show the pictures on the right side (Offline it works perfectly)
http://www.containerverhuurdesoete.be/fotos.html
Does there need to be any scirpting active on the server?
These are two lines of the images I used:
Any help would be greatly appreciated.
Thx
Hi,
I get a 404 error when I try access your images:
“The requested URL /images/album/2%20(13).jpg was not found on this server.”
Check your images path and/or try renaming your images with filenames containing only alphanumeric, “-” and “_” characters.
amazing work thanks alot really great and its free Cool 🙂
Thanks! Version 2.0 coming soon 😉
ok
Really perfect image gallery. I think, best jquery plugin.
IS there a way i can put “header” kind of links to the left side to easily allow users to navigate across different page/galleries
no doubth its good!
But if there any possibilities to have a title for each large image within a div where i can give the link to any other url or page on web through this title
thanks
Hi there, this is an amazing gallery. I’m having a weird issue. I simply uploaded your source files as a test to my server and i’m getting a weird error.
Here is what I mean:http://whenmylenemetandy.com/sideways_jquery_fullscreen_image_gallery/sideways_jquery_fullscreen_image_gallery_nativescrollbars_clickmode.html
Please let me know if you know what is wrong.
Thanks!
Andrew
This is such a beautiful way to display an image gallery. I love it! Thank you so much for sharing your hard work. I have a project I can use this for.
i need to make it 700 by 460 how do i do that? im kind of new o java. Where in the code would i edit the width and height?
Hi
this is amazing work , thanx for it.
But please suggest how do we add a caption below the full screen image , about the image which is being displayed . A caption box.
Pls suggest.
thank you.
Hi malihu!!! What a great piece of work!! Thanks a lot for it. I have two questions, I hope you can help me with that.
1. Is there a way to include information of the image like the name?
2. I notice that the the $defaultViewMode=”fit” only works if the toolbar object exists in the customScrollBox. Is there a way that this object doesn’t appears and the interface works in fit mode from the beginning?
Thanks a lot, Great Work!!!!
hi, i’m working with your plugin and i wonder how to disable looping after clicking the last image
Great, and thanks for sharing it under the CC
I have implemented it on my site and tweaked it a little. I noted that you are working on an update so, i have a suggestion: Is it possible to pre-load the next image before it it kicked? Many users would benefit from it as the images are displayed faster.
have a nice day
Seb
* clicked
I’ll definitely add such feature on the next version of the gallery 😉 Thanks for the feedback
Hi Malihu,
Not sure if you are still answering anything on here, but in your replies you mentioned that you were thinking of reworking this so that it was more ipad / mobile friendly. I was wondering if you ended up doing that, since I’m thinking of using this for a friend’s website and she really wants it to be accessible via ipad as well.
Thanks!
-Shayne
Hello Shayne,
I plan on updating the gallery within next month.
Hi amazing slider one question how re-size or fix complete slider to width=”800px”; and Height=”500px”; any one help me how to size fix where i am changing to adjust size thanks