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
Very impressive work. Good job. Keep at it. 🙂
THE BEST EVER EVER IMAGE GALLERY!!!!!
Thanks thanks and one more time thanks
for sharing it!
Alessio (aka Vortex) 😉
Thanks! You’re very kind 🙂
I’ve just forget to say that I work on Windows 7, Internet Explorer 8.0.
And on Firefox/IE, there’s an another bug in fit mode, when you make a max vertical window resize (until bgimage disappear) the bgimage is missing when positive resize (for see the picture).
Hi,
I’ve test your app and the render is globally impressive.
Now I’ve see an using issue that cause bg image “croping” in fit mode.
You can reproduce the bug with multiple window resizing (vertical especially).
I’ve produce a printscreen that show exactly the issue of the problem :
http://www.myimagespace.com/public/view/full/4708
I haven’t being able to reproduce the bug. I’ve spammed IE with resize and all worked as it should 😛
It’s important to make horizontal resizing only.
The bug is apppear in your demo page (not on a personnal integration).
Really great work, but there seems to be a small problem with Google Chrome 6.0.472.63 as it isn´t possible to click the first image after loading the page (endless loading animation).
Thanks Jan, I’ll check it asap.
Easy fix 😉 Post tutorial, demo and download files are updated.
Seemed that Chrome 6 had an issue loading the same image file (I’ve used the same images more than once for the demo). By first emptying src (attr(“src”, “”)) and then apply the new data fixed the problem (although in a real gallery we wouldn’t even notice since there would be no duplicate images).
Thanks again for the info
Thanks for fixing the problem. I’ve changed the two lines in my drupal-theme for a gallery project and it works like a charme.
is it possible; if you startup the index page, the slide will not popup? So if you call teh site you online see the big picture and when you go to the left the slide will come out?
Thanks
Inside the script, look for the “LargeImageLoad” function. Inside this function, find the condition (near the end of the function):
if($bg.data(“nextImage”) || $bg.data(“lastImageReached”)==”Y”){
SlidePanels(“close”);
}
which is commented as “don’t close thumbs pane on 1st load”. Remove the condition by commenting it and leave SlidePanels function like this:
//if($bg.data(“nextImage”) || $bg.data(“lastImageReached”)==”Y”){
SlidePanels(“close”);
//}
Great ive just added a link from my personal list in
Javascript Plugins Directory
wow realy n1 work! would like to use it in my image upload service 🙂
thanks for sharing!
Thanks! Let me know if/when you do 🙂
eh… That’s A W E S O M E !
Hi, i like your gallery very much. I’m trying to make it a template within pixelpost.org. I run into some problems when i want to load the new picture with the click. It does not transport it as a new background, i think this is the problem with jQuery. Do you have a solution?
http://maartenschraven.com/pixelpost/
hope you like it, i want to put it up by pixelpost as a new theme with your credits offcourse
Hi Maarten,
Thanks for your comments. I have updated the script a bit so if you have time, download it again to see if your problem is solved. I see that you load the images via php (e.g. index.php?showimage=31) and I haven’t checked the script in conjunction to php yet. I’ll need to check it further and let you know.
Thanks for your quick reply. I tried the new download, but it is not working :-(. The problem is that jquery does not see that there is new data i think. I tought when i publish the tumbnails the same way you do the output will be the same. But somewhere i must let jquery know there is data to click on and then refresh the url bar. If i make the bgimg <a href" then it works but every click will put on the slidebar and that's not the nice way.
if you have the time to look into it i will appreciate that. But now i called it the night because it's here 1:35 am in the netherlands
Impressive work, mate.
I will modify your code a bit if you are ok with that 😉
Want it a little bit different 🙂
Will use it on my CookielessDomain blog to show stats.
Modify it as much as you like Michael 😉
It really awsome… Very big thanks for your great works. I would love to using it for my portfolio page.
i love this – i use a jquery script to fullscreen the image on my portfolio homepage, but a full gallery is outstanding! i just wish a small bit of the sidebar remained on the screen when it minimized, i don’t know that it’s intuitive enough for the average user to know to drag the mouse pointer off the screen to call it back. plus, like ben mentioned, filling the screen immediately when clicking on a thumbnail was unwanted – i wanted the sidebar to remain onscreen while i clicked through a couple thumbnails then i could manually minimize it when i found the one i wanted to study. that artwork was amazing too, btw!
You do have a point Ray.
I mostly wanted to make a bit different gallery control-wise. Your suggestions are good and I’ll probably make a second version of this script that’ll rely more on clicking and be better suited for touch devices (as stated earlier).
Edit: done.
MAD PROPS!!! Beautiful work!
This is excellent. I’m gonna see what I can do to make this into a Tumblr theme, if that’s okay with you..
That would be great! If you do, share your URL so we can see the results 🙂
very nice jquery
superb…
great work.. 😀
This is awesome. Can’t wait to use it.
Great work!
Wow. Amaizing… one of the best slides
Nice work.
But you should definitifly start to cache $(this) and the main divs you constantly using.
e.g. use:
var $this = $(this);$this.css("display","none");etc…And chain more 🙂
You’re so absolutely right 🙂
I made this script in a relatively short time (implementing some code I’ve done sometime ago) so I didn’t really optimize the code. I wanted mainly to see what people think of it as a gallery. I’ll revamp the code as soon as possible!
Edit: done.
Love it so.. forwarded.
Keep up the good work 😉
Super smooth and elegant jQuery image gallery, Just a thought, have you thought about iPad or other touch device support?
Oh wow, NO way dude that is jsut WAY too cool!
http://www.online-privacy.eu.tc
Great concept!
Some nitpicking crits: Movement in the interface is generally “choppy”, especially when scrolling down through the images, or switching back and forth between “thumbnail” and “big” views. Filling the screen as soon as you click an image without any instruction was an unwanted surprise. Also, I’m not really a fan of some things being rollover and others click. In my opinion, everything should be click, so that it is obvious to users what causes something to happen. I guess I’m just not a fan of rollover in general, haha.
Just my 2¢ anyway. Some of this may be browser/rendering engine related.
(Chrome 6.0.472.55, Mac OS X 10.6.4)
Also, this has started to happen: http://imgur.com/7DGU6.png
Hello Ben,
Thanks a lot for your comments and suggestions 🙂
The “choppy” movement is indeed browser’s js engine related issue. Javascript performance is heavily depended on browser engine as well as memory, tabs already open etc. That’s why sometimes a script performs very well and other times more or less “choppy”.
Unfortunately javascript animation drops in performance when you try more advanced stuff than fading a tab or sliding a div (especially when animating a fullscreen images or a containers of 20 thumnails, texts etc.).
In general, I try to keep a balance between effects/animation and performance but sometimes the dark side gets over 😛 I hope I’ll get better 🙂
This gallery is a lot about mouse movement (that was the idea) and was made primarily for big screens (desktops, laptops etc.) with a pointing device. The only thing that works on click is when you select an image to load which I think is logical. I was thinking to make another version of this gallery (more compatible with touch devices) that works only on click, so I guess I might try it 😉
Regarding your screenshot, I can’t really tell what’s wrong but looks like viewing the image in “FIT” mode (there’s a button over the thumbnails that changes the view mode).
Thanks again!
Thanks for the quick response!
I get the feeling that its performance on my machine does have to do with Webkit, as well as my RAM and processing power. Especially after seeing how many commenters called it “smooth” 🙂
I really like the idea of a gallery suited to large screens and presentations. I hadn’t even thought of that.
RE: Screenshot, I was in full mode, not fit. The problem was that when the thumbnails moved offscreen, the image didn’t move with it (of course this would fix itself as soon as I resized my browser window or clicked on the image to display the next one). But what you are seeing is all of the image I was able to see – half of it. I can’t replicate it now, oddly enough, but it was definitely full mode since when I resized my browser window even by one pixel, it immediately fixed itself.
I think it happened when I was playing around with moving my mouse left and right to toggle full-screen and half-screen. At some point that happened, and then it started happening every time I toggled back and forth (the image wouldn’t move, staying at half-screen). I didn’t think to refresh the page to see if it stopped, so I’m not sure if it was something I did in that session to screw it up.
Ha I have a question why make a gallery in javascript at all, wouldn’t it be easier just to do it with <a href='http://everythingfla.com/'flash you would have so much more control over making it as slick as you want while with js you need to mainly worry about it working in a list of browsers 😛 ? and i mean it with total respect as i love it that your sharing and i know how much more work it is to reproduce things in JS and then worry about it working on a million browsers.
Leaving that aside great work 😉
Yes I could do it in flash much faster and easier as I’m way more proficient in actionscript and animation. I made this gallery with jquery mainly to explore js potential and just cause it’s fun! I work a lot as flash developer, so doing stuff with other scripting languages feels like holiday to me 😛
As far as performance goes, the more effects-the better the flash, but this gallery doesn’t have that many 😉
If you’re interested in flash, you can check some posts I’ve made like FluidGrid gallery and flash image slideshow.
Wonderful jQuery work and such a great way to display photos in a rich interactive manner.
Very nice work. It’s always nice to see how to get people go above and beyond the norm.
thanks a lot Mano!!!
you have done an excellent work!!!
just amazing:)
all the best!
Mind Blowing… Very nice one… thanks so much
Very cool!
Just a thought, have you thought about iPad or other touch device support?
I get a JS error on the iPad and can’t go back to the thumbnails.
Great work though! Your cats are really very talented 🙂
Thank you all for your comments 🙂
@Mark
I haven’t really put any thought or effort for touch devices (ie iPad).
On this script, the thumbs panel opens on mouse over (jquery hover function) so it’s not really optimized for touch (although changing hover to click should work fine on such a device).
From what I’ve seen, “hover” state on touch devices acts as “mouse down” (at least in Flash and CSS) so I thought that it should do the same for js… Guess that’s one of the reasons behind jQuery Mobile Project.
Esen
Posted February 28, 2012 at 11:58 | Permalink
I really loved your gallery and decide to use it in my friends project. However as you can see from
http://cigdemozbilenler.com/studio.html
the link when I try to scroll down the thumb images everything goes up and it’s frustrating how I can’t resolve this issue. I know it is something defo to do with css and it is very easy to fix but i can not get it work.. Please help someone!!!
I had same problem. It is a missing it as at the bottom of the thumb images. there is a div with clear class at top of images as well. Maybe that will help someone later :).
It took out the html oops. It has a P tag with class clear at bottom of thumb images.
Super smooth and elegant jQuery image gallery. Beautiful work by by George McGinley Smith and Brandon Aaron.
Too cool. This image gallery look quite good.
Wow. Amazing work!
Really amazing
Super cool work! Very Nice.
My images are both landscape and portrait. How would I go about having the option for a fit-screen auto-play slideshow?
I really loved your gallery and decide to use it in my friends project. However as you can see from
http://cigdemozbilenler.com/studio.html
the link when I try to scroll down the thumb images everything goes up and it’s frustrating how I can’t resolve this issue. I know it is something defo to do with css and it is very easy to fix but i can not get it work.. Please help someone!!!