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
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.
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 🙂 Especially, since I haven’t use it yet so I’ll need to see how it works etc. Can you help?
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
Hi.
Is there a way to put the button “next image”, in the first image of the gallery?
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.
Too cool. This is one of perfect image gallery. It quite good.
I love this script… actually I’m VERY impressed ! congrats & keep up the good work !
doesn’t works with video?
Nope. It’s just an image gallery.
I have no idea how could I install it to a single page.. I´m new at wordpress comunity and don´t understand how to integrate jquery.. Can anybody help me? Thanks!
You kept It smart and simple ! Slick and efficient ! Great job !
By the way, I have a super ego, I’m lazy and nut crusher 😉 so I currently try to enhance your code to be more like a “real jquery plugin” than “just” some js code wandering around. Plus, I port it to Coffeescript (I’m a nut crusher, remember ? ;D ).
You didn’t seam to use any licence for your code, nor a code repo (like sourceforge, github, etc.).
So, here are the questions:
-Do you grant me the right to put the code under something like GPL 3+ or LGPL at least ?
-Do you have any preference for a code repo or can I use github as I wanted in first place ?
Thank you again for this beautiful gallery !
Awesome setup man… 😀
I’ve got this working with BBQ Deep-linking perfectly. Plus im using Drupal 7 to create relationship based galleries that house One Image Per Node image-nodes, this brings commenting ability & super simple gallery/image creation/management etc… im still working on adding more features such as loading the other related content via ajax, but its looking good!
Thanks for the inspiration!
Cheers!
I would love this see the answer to this question because I could use your cleaned up version!
@Jean-cédric T. Thanks for your comments. I give you the right to do anything you want with it (GPL 3, github etc.) as long as you reference the source somewhere 🙂
@josh Great! Thanks for posting this.
gracias por la coleccion y comportatirla! thanks
Hi, Brilliant code, thanks!
Just wanted to check, I’m not great with javascript and their may be a quick solution. Has anyone added a history plugin to the script?
I downloaded this jquery history plugin http://tkyk.github.com/jquery-history-plugin/ but I’m just shooting in the dark trying to get it to work..
Any ideas?
Thanks, Nick
i love this script and i am thinking about redesigning my side with it.
it already has been asked but not answered yet.
is there an option of autoplay? would be very cool
Not at the moment ;(
I’ll try to find some time to implement an auto-play function and post an update here.