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
You are free to use, study, improve and modify this script wherever and however you like.
All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.
Donating helps greatly in developing and updating free software and running this blog :)
Pages: 1 2
Great work, may you be supported from many sides.
Very usefull Thanks a lot
Excellent work, thanks !
The best gallery functionality, I’ve ever seen.
very nice, thank you….
Hello,
Thanks for ur sharing this awesome jquery script.
I have a problem need your help!
Can I play the video and image at the same time?
How should I do ?
Thank you so much.
very nice gallery! I suggest you add in the github
Hi,
very nice gallery sir! Is by far better than many premium galleries and is free! Thank you
P.S.
Just a thought… You could add by default one more button that will redirect the user to the previous page. When a user views all the images in a website, usually wants to go back to home to explore more so it would be nice to have that option by default. Just one more button with some history.back(); would be awesome. The gallery is still awesome anyway!
Hi, is it possible to disable the side menu from displaying everytime the page is reloaded/refreshed?
This site seems very interesting to me. Who like technology and linkes codes or web development have to see it.
Sorry for my english: I’m french.
Hi I found your gallery wonderfull and I’m using it on my website. I’ve got just a small problem that I can’t solve: I wonder how to slow down the thumb scrolling, is there any variable I could change ?
Many thanks,
regards François
Hello malihu,
Thanks for sharing it. Only one question about this template … it is possible to add keyboard support ? I mean PgUp/PgDn for scrolling thumbs and Left/Right Arrow for switching between large images … i’m not friend with JavaScript and all my tries end with the same way … reload back original source file 
this template looks really cool
hi can you please help me . i want to auto play how ?
Really great gallery, the best there is!
it has been asked several times, but, was there anyway to add hyperlinks to the background?
Thank you,
regards,
Drew
i am settings your slider in this website http://www.demo.versaceglassesbypost.co.uk/products/?sub=item&id=183810&cid=3155 me display slider in specified area.
plz reply me fast
pl z help me as soon as possible i m waiting your response
Thank you very much for this wonderful slider. is possible we can display in specified area and finish sticky or fix mode?i m not display images in full screen
Sou muito grato, este é o melhor plugin jquery q eu já vi o pessoal muito obrigado ajudou muito
Awesome Gallery.
Question is this possible to integrate on WordPress?
Thanks.
Hi, thank for your nice gallery. I have a problem: I´d like to change group of images (thumbnail) by Ajax after click on thumb-picture . It´works but I can´t figure out, how to tell to engine, that set of thumbs is changed. Can you help me, please?
Hey
This is just brilliant!!
I’m going to use it for a website.. But there’s an issue.
The scrollbar for the image thumbnails (on the left) doesn’t work. On-click, nothing happens.
Help please?
I’m using another jQuery file (Slide Down Menu jQuery) for the navigation.. Is there any conflict?
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
Great work…Amazing Stuff, i want to use this for my website gallery,
I have recently created web on WordPress , I am newbie, Can tell me how to install this on my website
http://www.ridingclub.pl/galeria.html
The pictures of pressing the dough turns on again the same picture.
What that showed up next?
Please reply…
its awesome bro..
I have one doubt regarding the script.Shall we can load the external HTML page without using image.Can you help me in this regard?.
Thanks in advance!!!
First of all, great gallery!
I’m trying to pull the images from a directory with php, but I’m having some troubles.
Only the first full screen image from the ‘space’ folder is pulled from the directory and it is being repeated.
The thumbnails are being displayed just fine.
I hope somebody can help me with this:
//path to directory to scan $directory = "../gallery/imgs/space/"; //path to directory to scan $directoryth = "../gallery/imgs/space/thumbs/"; //get all image files with a .jpg extension. $imagez = glob("" . $directory . "{*.jpg,*.gif,*.png}", GLOB_BRACE); //get all image files with a .jpg extension. $images = glob("" . $directoryth . "{*.jpg,*.gif,*.png}", GLOB_BRACE); //print each file name foreach($imagez as $image) { foreach($images as $imageth) { echo "<a href='$image' / rel="nofollow"></a>"; } }Hi, malihu!
Wow it´s really remakalbe what you did. Is it possible to have external links on each of the BIG Pic on the right?
Best regards
Flo
I´meant remarkable
NO WAYYYYYYYYYYYY
Do you mind hosting the code on github.com??
That way, you can have a nice versioning system.. AND people can help contributing to it!
I could help you out if you need support putting it there
(I dont work for github.. but I use it a lot for my own work. Besides a lot of major opensource software is hosted there because it’s just easy and powerful. twitter-bootstrap, html5 boilerpalte, backbone.js as well as many others are!)
Cheers and Thank a lot bro ^^
I wanted to host code on github.
Especially, since I haven’t use it yet so I’ll need to see how it works etc. Can you help?
The thing is I’m currently re-design this site, working on a new plugin (I’ll post here of course) and I did upgrade my hosting server (due to traffic etc.)… so I’m pretty full at the moment.
It would be awesome if you could help putting the code on github though
I cant get de sideway slider to the right or i am missing something, can you please tell me how i place it to the right side of the screen. Thanks..
Unfortunately at the moment you can’t reposition the slider (at least not without major script editing). I’ll try to find some time to update the script with such feature and post the updated version.
Thanks in advance
This is close to what I’ve been looking for. Props to you sir!
I wanted to have my Site Navigation Menu in the slide box (including images linking to recent entries listed downward), and my main content (such as an article) in the main container.
How would I go about doing this?
When I place an article in the main content area, I can’t scroll down.
Feel free to contact me regarding compensation.
Thanks in advanced.
In this page there is a great example what I’am looking
http://tee-se-itse.hongkong.fi/fi/kasityokalut/kasisahat-ja-terat/g-man-rautasaha/p/186526/
When you click “iso zoomattava kuva” -button you see what I mean. That is a full screen.
How can this is a full screen? You can still see browser toolbars etc. I’m interested real fullscreen image gallery. Like you watch youtube in fullscreen mode.
use this as a link
<A href=# onClick=toggleFullScreen();event.preventDefault()>Click here for Full Screen</a>and this script after the gallery script
<script>var bodyElement=document.getElementById("body"); function toggleFullScreen(){document.fullScreenElement&&null!==document.fullScreenElement||!document.mozFullScreen&&!document.webkitIsFullScreen?document.documentElement.requestFullScreen?document.documentElement.requestFullScreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.webkitRequestFullScreen&&document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):document.cancelFullScreen?document.cancelFullScreen(): document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen()}document.addEventListener("keydown",function(a){13==a.keyCode&&toggleFullScreen()},!1);</script>God!
You kickass.
This is Spectacular
I use jquery dropkick and I have the following problems:
1. I can’t scroll the select form options because it is scrolled the entire page (maybe conflict with the jquery mousewheel)
2. I can’t close the select form only if I click on the select form (if I click anywhere else, the selct form simply don’t close)
http://www.ardf.ro/side/
This is the website where the jquery sideways is used.
Please if you have ideas about this problems, help me out.
Thanks for sharing this great script… good job!! Cheers!
Hello, Amazing slideshow gallery, I ve been looking for this for some time. Im using a wordpress template i like the way i modified it ad Im just using for a home page. I would like to add a link where it goes straight to that gallery. Im sorry for my question, I know it may sound really stuid, but unzipped the zip file and put it in my ftp server, then made a link on my website specifing the url. but it didnt work. I dont know what im doing wrong. I also tried to install the plugin via wordpress plugins add on but it fails to install the plugin.
Im sorry but how can I use your jquery gallery and use it. I have my domain with go dady and im using wordpress. I know how to access via ftp. Could you tell me please. I will really apreciate and I love your slideshow gallery and I will definetly give you credit on my website for your gallery. Thank you so much and talk to you soon.
Hi there.
Thank you very much for this wonderful piece of coding.
I am not so experienced in JQuery or JavaScript and I tried to use my AS3 skills into solving one simple problem : making the default image clickable (as in going to the next one, without selecting a thumbnail) . Apparently my AS3 skills didn’t help. I read all the comments and I saw a similar one with no reply:
@malihu
i posted this awhile back
“Is there any way to keep the gallery in $defaultViewMode=”full” but if the selected image is taller than it is wide automatically switch the defaultViewMode to “fit”?
Do you have any suggestions?
Hi,
this is one great gallery. Thanx a lot for sharing it with us.
I got one wish maybe for the next version. It would be great to have the next image already preloaded, so when clicking a image, the next one would be shown quit instantly.
Best,
Mario.
awesome!! Can I insert some div for image caption and description in it?
Thanks for sharing such an excellent work!! you Rock!!!!
Hi!
Great gallery!
I have a question. How do I start the gallery when the page is loading?
thanks