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
This is anoter masterpiece! I have the same suggestion how to further improve this product. If you may include a separate on the top EXIF information box, that would be really a useful feature for every photographers.
There are already working php codes to extract EXIF data from pictures, but usually the most frequently used fields are the Exposure time / F number / ISO speed.
Very nice gallery. I’m working to implement it in Drupal 7 and I’m getting there.
Just one question.
Is it possible to load a full page instead of the large image?
Thx
Not out of the box. This gallery script is developed to load images and to turn it to an ajax-loading html app would need some modification on the loading handler functions.
hi
how to drag big photos ? about
800×1500 px ?
I’ve just test your script for my website and change it a little to my needs. Thank you !
Here it is, if you want to take a look 😉
http://book.ramadiouf.com/
– more updates soon – 😉
Hello…
How did you do the mouse movement view ?
So sorry, I’m sooo late to answer ^^’
//Use mouse to move the image up and down $bg.bind('mousemove',function(e){ var $mouseCoords = (e.pageY - this.offsetTop); var $mousePercentY = $mouseCoords/$(document).height(); var $top = ($mousePercentY*$bgimg.height()); if ($top < 0){$top = 0;} $(document).scrollTop(0); $bg.scrollTop($top); });i had tried but i could not add more thumbs images, seems only limited number of images can be displays on left side.
Where can I find the .thumb class defintion?
In the css : #customScrollBox a.thumb_link
By the way, I add scrollable pictures, overlay, next image button, and so on 😉
Users of this script, feel free to take some source code with you !
This gallery is amazing. I have already started to fiddle with the code and stuff but i was wondering if you could help me please. How would i show an iframe instead of the large image. ? ? ? ? ? ? ?
Any help would be much appreciated. 🙂
Ryan
Great design my friend and something I had actually in mind. Please write to me to the email provided, as I need to talk to you. Please do so ASAP,
Thanks
Is there a way to implement multiple galleries?
The easiest way is to link different html files for each gallery since having all galleries under a single page, requires ajax calls, extra image loaders and re-calling the custom scrollbar function to adjust the new content.
Geia sou, Malihu
wonderfull gallery, i’ve been searching for something like that to change the flash one i had.
here you have the link to see how it looks , i made the background a little darker.
thanks a lot for sharing, i just love it…
alinaki
Geia sou alinaki,
Thanks a lot for posting your link and your comments 🙂
I love this so much. Quick question however. How would I implement multiple galleries. Say I have a navbar that is centered and I click on one of the buttons for that portfolio and have it switch.
Maybe it would be easier to have it link to a new html file for each gallery instead of having it all in just one page.
Anyways, thanks for any answer.
Hi again!
I’m sorry, but I already realized how to change it… I was just not paying enough attention, the syntax was very clear about it! 🙂
Thanks!
Mario.
Hi Malihu!
I’m in love with your sideways gallery, I think it’s very elegant yet functional and easy to use! I have been working with it these latest days to create a new version of my portfolio site. I have been investigating the js code but I’m very green on this so I have not been able to realize what should I do to put the Fit View Mode as the default one. Is it possible? Could you bring any tips on this, please?
Thank you very much beforehand! 🙂
Mario.
Hi Malihu,
Any chance you could explain how one might alter the “fade” transition effect between images, in favor of a “sliding” effect, which slides the images out from right-to-left?
Let me know if this is possible. Thanks so much!
Hi Nick,
Inside script, find (line: 247):
LargeImageLoad($bgimg);and comment it:
//LargeImageLoad($bgimg);Still inside script, find (line: 274):
$this.fadeIn("slow"); //fadein background imageand change it to:
$this.show("slide",{direction:"right"},1000);changing the 1000 value (milliseconds) to whatever you want 😉
Malihu,
You are the man.
Thanks so much bro!
Once I’ve implemented this I’ll share…the site is gonna be rather sick!
Absolutely love this! spent so long trying to find something similar and couldn’t find anything near as stylish…until now!
Was wondering whether it would be possible to use full page videos instead of the images?
any help greatly appreciated! 🙂
Thank you for your comments Hannah 🙂
At the moment you cannot simply load video instead of images. It would require a totally different code for either html5 or flash video. I might create a video gallery based on sideways when I get some time tho 😉
hi malihu,
great script. question: when i load the page for the first time, there’s no “click for next image” button/function. i have to click on a thumbnail first to make it possible to click through the big images.
how can i tweak the code in a way that the “click for next image” function works when the page loads, without clicking a thumbnail first?
thanks a lot!
stew
Thank you for this awesome script, I want to implement it in my gallery.
I am new to jQuery, please help me to implement these:
1.first image clickable to load the next image
2.previous image navigation
Thank you
Ravi
It’s impressive!)
It’s very impressive!)
one of the best galleries i’ve seen. is there a way to have panels slide out from the right?
Beautiful,
You can enable full mode in some way the image scroll vertically to be able to see the whole picture?
Or enable the sidebar to the photo instead of thumbnails?
(bear with me for writing, I’m Italian!)
At the moment you can only see the whole picture in fit mode (or normal if your images are small enough). When I find some time, I might implement a scrollbar on the large image (I can’t promise tho). Thanks for the suggestion 🙂
For you to be able to scroll the whole image, just change here:
#bg position:fixed to absolute, it does the trick.
I tested (Chrome12, FF4, IE9) this with a much smaller gallery, and it works very well, until now I didn’t found any downside.
Thanks so much for sharing, I’m amazed by your (and your cats) kindness. If, in the real world, everybody will be like you, Hell will be a forgotten word by now. Thanks again.
This is a very nice gallery. I think it’ll look great for all my photos.
thanks Good woork..
First of all, thanks for all your online support in the jquery, The things are good and working in the nice manner
I am having problem when I use this in internet explorer 5 & 6. It was just when I was checking it cross browser testing. I am manipulating your code somewhat to support that browsers, but I need some advice from you regarding that.
Thank you
Hello Ashish,
Thanks for your comments 🙂
The thing is, I do not support or check any of the scripts, plugins etc. on old browsers, especially IE5 or IE6.
I believe that the less we developers support these browsers, the more people will upgrade to modern ones, thus making our job and the web itself much better.
I think that anyone browsing the web with IE5 or IE6 (or Firefox 2 for that matter) misses most web features anyway and certainly doesn’t expect to see my scripts which for example may utilize CSS3 etc.
In my opinion I help my community and online users a lot more by not supporting old browsers.
Thanks for your quick reply,
I am working (with my team) on the project “Future Generation Web application” , and hence I am forced to check the portability on different platforms and even on hand held mobile devices (3G enabled). I will inform you when I’m completed with that. I was very much close to jQuery and I was very interested other java scripts (which provides platform independence).
Please keep up your good work of sharing the knowledge, I’ve studied many things from your code.
keep smilling 🙂
Par mi ła xe un ceso….
Aloha,
Is there any way this will load an mpeg or avi?
Great work!!
Aloha 🙂
It’ll need some additional code and modifications especially for html5 video. I might give a go when I get some time.
lovely work…
i have a directory of images that my website users get to upload it from my website.
i want to use this to automaticly pull the images from the directory, images are all auto named by the script im using which is in php.
how can i pull those images and show them on this, instead of adding images one by one, this if you further it with wordpress or even integrate an admin area so it is full galery, you can sell alot of copies, i can see the huge demand and i assure you you can sell at least 500 copies at $15.
If your interested please drop me an email to discuss this potential.
All the best,
Keep up the good work, your defo very good and experimental.
Hello, just let me tell you great gallery there, I just found it and I’m trying to play with it, I’m not very proficient in the design stuff, CSS mainly.
Is there a way to add a in front of the full screen image, let say, in the middle right, I’m thinking not as an image gallery only, but as a kind of poetry like site that has a small poem in that div plus the bg image to reinforce the idea.
Again awesome gallery, keep up the good work.
Yes there is. In the html you can add a div with your content right above the image background (#bgimg) and style it with: position:absolute and z-index:3 and give it the left and top position you want.
Awesome job!
Is there a way to add a caption for each image in gallery?
By the way, this is the best fullscreen gallery i’ve ever seen.
Thanks and sorry for the bad english.
@Villa Brayner
Hi, I’ve let the desription of each image to be the title attribute so it’s currently displayed as native browser tooltip.
I could definitely try to implement an image caption that’ll derive from the title attribute of the thumbnail. I’ll give it go when I get some time available and let you know.
Great Job!!!!
The best gallery I’ve ever seen so far!
I am also add an image caption for each images in gallery, PLEASE let me know if you got time to implement that.
Cheers
is great i try to make external link and i do the
1) Add a class to all the ancor links of images (a class=”classname”)
2)Find “$outer_container_a=$(“#outer_container a”);” in the script and add your class name to the ancor selector:
e.g. “$outer_container_a=$(“#outer_container a.classname”);
but also open the photos on other window not as you make it
Can you post a link to your code so I can check it?
Hi…i like this gallery but i have a question.
Is it possible to integrate with WordPress?…and if yes, how?…do i need to make a page template as an “external” page?
Thanks
Hello Mary,
I don’t have much experience with wp development so I think you should probably make an external page template.
Hi Malihu…ok, thankx anyway. 🙂
Bye,
M
Is it possible to place links in the html? I have not been able to make links work.
Ah, not really… You need to do some minor tweeking:
1) Add a class to all the ancor links of images (a class=”classname”)
2)Find “$outer_container_a=$(“#outer_container a”);” in the script and add your class name to the ancor selector:
e.g. “$outer_container_a=$(“#outer_container a.classname”);
This should do the trick.
It worked!
Thank you so much.
Is it possible to disable the “lastImageReached” function and let it go back to the first image instead?
Awesome gallery and pics btw 🙂
Thanks!
To loop back to first image when last one is reached, the code needed some minor modifications inside the image load and click functions. Check it and get the code here:
http://manos.malihu.gr/tuts/sideways_jquery_fullscreen_image_gallery_loop.html
Question from a novice.
How would you make this work with images that have various aspect ratio’s?
Hello Nate,
The aspect ratio and size of the images does not affect this script. Each image is scaled via the “FullScreenBackground” function according to window dimensions so it doesn’t really matter if your images are landscape, portrait or both.
You’ll notice that landscape images are best viewed in “full” view mode since the vast majority of displays and resolutions are widescreen. For the same reason portraits are best viewed in “fit” mode, simply because most of the image info is lost (top and bottom) since you only get to see a relatively small portion of the actual image.
Love it!
Can you point me how to tweak to make 100% width and overflow y when picture is portrait.
tx