Simple jQuery fullscreen image gallery
A fullscreen image gallery made with jQuery and CSS. The gallery features fullscreen images in various modes and custom thumbnail scrolling script.
The gallery was made by a combination of some previous scripts and tutorials posted on this blog. The images used on the demo are artwork of Tobias Roetsch.
Customization
The $defaultViewMode variable within the script, allows you to change the default images view mode. You can set the value to:
normal– images fit in window (all image data is visible)full– images expand to window size (fullscreen)original– images keep their original sizes (centered on the screen)
The rest of configuration options you can set within the script are:
$tsMargin– first and last thumbnail margin (for better cursor interaction)$scrollEasing– scroll easing amount (0 for no easing)$scrollEasingType– scroll easing type$thumbnailsContainerOpacity– thumbnails area default opacity$thumbnailsContainerMouseOutOpacity– thumbnails area opacity on mouse out$thumbnailsOpacity– thumbnails default opacity$nextPrevBtnsInitState– next/previous image buttons initial state (“hide” or “show”)$keyboardNavigation– enable/disable keyboard navigation (“on” or “off”)
I’ve included the complete gallery code on page 2 of this post.
Changelog
- Jan 23, 2011
- Gallery features next/previous image functionality via buttons and keyboard arrows
Thumbnails scrolling function has been optimized significantly
- Gallery features next/previous image functionality via buttons and keyboard arrows
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
Hi, works a treat apart from ipad?
Anyone have a fix?
Thanks.
Is there any easy way to get the images to change every x amount of seconds?
Not at the moment. I’ll include such feature on a future update.
Let’s say this is buying time for malihu and the future update. I know we are all busy with projects and life. So feel free to use my quick modification/addition to the script.
Just Add the code snippet at the end of malihu’s script.
Here we go:
// START: AUTO-PLAY IMAGE GALLERY var interval = 5000; // sets the interval between switching images var playtime; // combines the switch to next image and the interval // start the slideshow play(); // function to start the slideshow function play(){ StartSlideshow(); playtime = setInterval(StartSlideshow,interval) } // function to stop the slideshow function StopSlideshow(){ clearTimeout(playtime); } // switch to the next image function StartSlideshow(){ SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); } // stop the slideshow $('a').bind('click',function(e){ StopSlideshow(); e.preventDefault(); }); // END: AUTO-PLAY IMAGE GALLERYI kept it very simple. The slideshow will stop just after clicking any “a”-link.
I didn’t include a start/stop function as i did not need it, but it should be easy to modify the code to include such functionality. Just define a class instead of “a” and call a second function to start the slideshow again.
The code snippet should be pretty much self-explaining.
Important: Before someone bumps into this problem!
If you use other navigation elements or links besides them provided by the image gallery, you need to drop the
e.preventDefaultin this example. Otherwise it will prevent additional individual links/navigation elements from working properly.Please change the following part of the code from:
// stop the slideshow $('a').bind('click',function(e){ StopSlideshow(); e.preventDefault(); });to this(by leaving out the
e.preventDefault):// stop the slideshow $('a').bind('click',function(){ StopSlideshow(); });or define all style-elements that are allowed to stop the slide show, for example the thumbnails and the next-prev buttons:
// stop the slideshow $('#outer_container a, .nextImageBtn, .prevImageBtn').bind('click',function(e){ StopSlideshow(); e.preventDefault(); });As I said before its used for a project and was fine for me as I didn’t use any other navigation elements/links.
Thanks a ton for your codes 🙂
I’ll work heavily on this gallery and its thumbnail scroller in a few weeks. I’m currently updating the custom scrollbar plugin and sideways gallery which is very time consuming, so updates can get a bit slow… Thanks again!
You’re welcome. I appreciate you work with both scripts and feel honored to add a small modification that might help fellow developers.
If you don’t mind please add the changes I suggested in the second reply to my first reply/post.
Cheers from Cape Town,
LX
This is fantastic… Thank you! I wonder though, is there a way to delay the first change of image until the first image actually loads?
Since the first image takes a few seconds to load, it is only displayed very briefly before it transitions to the next slide.
I’m very new to php, but I guess there is a sleep() or .setTimeout function that may be able to do this but I haven’t been able to make it work.
Please Help!
thank you veeeeery much you are great!
you just save my life with that adding! <3
malihu, thanks to you too, OF COURSE!
The ajax.googleapis/ajax/libs… script is causing me problems
<!-- //Javascript code goes here for now $(function() { $( "#tabs" ).tabs(); }); -->This script tag seems to be the culprit of might site breaking.
I want to scale down your image gallery so that is fits inside my tabbed website. Right now when I add the code it breaks the website . What properties should I change in my code or your code to make it fit inside my div
#wrapper{
width:950px;
margin-left:auto;
margin-right:auto;
}
#tabs{
overflow:hidden;
margin-top:50px;
width:950px;
margin-left:auto;
margin-right:auto;
}
Hello,
How do the preloader only loads once per picture and not be repeated in each see that Let us review the already loaded?
Thanks
Awesome!!!
This is an awesome gallery! Having a problem with it though – everything loads fine, but whenever an arrow or thumbnail is clicked, the next image never loads. It just displays the loading icon forever – same problem in all browsers. My images are all 1440×1080, so it shouldn’t be a size issue. Here is the faulty page: http://sebastianbiermanlytle.com/galleries/dm-photos.htm
The strange part is that the code on this page is identical: http://sebastianbiermanlytle.com/galleries/photos.htm, and your gallery works just fine. I’ve been checking for discrepancies but haven’t found any.
I get “Internal Server Error” when I try to access directly the file: http://sebastianbiermanlytle.com/galleries/_dm-photos/lionfish4.jpg so the script cannot load it.
Ahh yeah, looks like Dreamweaver never uploaded the images, only the thumbnails.. Thanks for the help – I’ll link back to this page in my acknowledgments
Great Script you wrote man!!
Is it possible to use vimeo urls or iframes?
I hope so 🙂
Best
No, just images
Ok thnx! 🙂
It wont play well ajax calls to load the images into the content divs. when i do that it doesnt show up in the thumbnail panel
Hi Malihu, excellent work! Is what I was looking for!! Only wondering if I can link the js externally. I did it with css but it doesn’t work with js because probably the functions need to be “called” or onloaded in the body (sorry I don’t know javascript…just guessing and using terminology not properly…). The reason is I need to use the gallery in more than 20 pages in the same website (3 thumbs in each page) and if I have to repeat it in each page I fear that the navigation could be slowered . Any suggestion? Any help would be greatly appreciated! Thank you. Marzia
well, probably my request was not worthy to be answered (I understand I should know at least the basics) but I’m stuck here and I need to solve the problem somehow. Please, I only ask you if it possible to link the code outside (yes or no) so I may start researching how to do it myself or involve someone else expert to do it for me. Thank you Mahilu, you answer wiil be greatly appreciated.
Hello Marzia,
The archive below contains the demo gallery that loads the script externally:
http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery-external-js.zip
Sorry for late replies. It’s not that requests are not worthy, it’s that I get a lot of them.
Thanks from the heart maihilu! I noticed it seems that you just took the code outside and linked normally. Now I have to check what I did wrong the first time and if there any other js codes (in my page) conflicting with it. I’l let you know. Thank you again. Marzia
Tutorial is excellent, thanks a lot.. Can i add “auto play” options too?
Could anybody please explain how can i add “auto play” function??
I wrote a couple of functions that allow a “timed” gallery to act like a slideshow. When you click “play” the toolbar button changes from “play” to “pause” and automatically hides the thumbnail bar. I have also added a button to “hide thumbnails” manually.
var timer; $($autoLoopBtn).click(function(event){ event.preventDefault(); if($($autoLoopBtn).hasClass('start')){ $thumbnailsContainerMouseOutOpacity=0; $('.loopBtn > img').attr('src','loop-disabled-icon.png').attr('title', 'Stop auto-loop'); $thumbnails_wrapper.fadeTo(fadeSpeed, 0); timer = setInterval ( startAuto, $autoDelay ); } else { $thumbnailsContainerMouseOutOpacity=0.8; $('.loopBtn > img').attr('src','loop_icon.png').attr('title', 'Start auto-loop'); $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); stopAuto(); } }); function startAuto(){ $('.loopBtn > img').attr('src','loop-disabled-icon.png').attr('title', 'Stop auto-loop'); $($autoLoopBtn).removeClass('start'); SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); } function stopAuto(){ clearInterval(timer); $('.loopBtn > img').attr('src','loop_icon.png').attr('title', 'Start auto-loop'); $($autoLoopBtn).addClass('start'); }I also modified the
#outer_container aclick event//Clicking on thumbnail changes the background image $("#outer_container a").click(function(event){ event.preventDefault(); stopAuto(); var $this=$(this); GetNextPrevImages($this); GetImageTitle($this); SwitchImage(this); ShowHideNextPrev("show"); });…so that when a thumbnail is clicked it pauses the “auto play” so the large picture can be viewed without it chaning after the pause delay. Simply press “play” from the toolbar again to start it off again…
I was wondering how to make thumbnail container fade out automatically after for example 5 seconds?
i know this the part for fade in and out thumbnail but how to add code like i said before.
For help I would be highly appreciate:)
$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); $thumbnails_wrapper.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("slow", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); } );I know this question is a bit older, but this little code snippet might help somebody concerning the same issue. Just paste it into your javascript code:
// FADE OUT THUMBNAIL SCROLLER AT START setTimeout(function() { $("#thumbnails_wrapper").stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); }, 5000);Change the number at the end(5000=5 seconds) to your preferred fade out time.
Hope this helps.
This code certainly helped, but had one small issue: if you start hovering the thumbnails wrapper within 5 seconds it still fades after 5 seconds, which is a bit confusing.
These adjustments will help:
timer=setTimeout(function() { $("#thumbnails_wrapper").stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); }, 5000);and a bit further down add one line:
function(){ //mouse over var $this=$(this); $this.stop().fadeTo("slow", 1); clearTimeout(timer);This line will stop the timer and the wrapper will stay visible.
Once more. When I (in maximized window) quicky move with mouse totally to left side on thumbs, scrolling is stopped (not on first thumbnail) . On the right side it works ok. Sorry for my English, please. Thanks.
Hi! I have a very important question. I’m designing a portfolio site using this code. Is there anyway to load seperate galleries from the menu? I’ve managed to replace the thumbnails with 2 links, one called gallery 1 and one gallery 2 (the customer doesn’t want thumbnail images, just links that load the big pictures and from there clicking to next and previous images). Gallery 1 should load the large fullscreen images from the folder “img/gallery1” and Gallery 2 should load from “img/gallery2”. That works, but once the large images are loaded, Gallery2 continues after the last image in the gallery2 folder to the gallery1 folder. How I can have only images shown in each folder and not all folders???
Nevermind!!! Got it to work, just removed all if last/first codes and works like a charm now with seperate galleries!
Dear Steve,
What you achieved is exactly what I was looking for mine and my friends galleries.
It would be great if you could share with me the source script with the solution showing the way you made it work, the way you said…
Instead of “Thumb Slideshow Images” > “Image Links” leading to Separate Galleries, that load to Full Screen after clicking…
Thanks in advance,
Nina.
Great gallery! Is it possible to make the Hover function of the thumbnails stay lit after clicking? I would like to highlight the thumbnail that is currently being displayed. Such as, on opening the site, the first thumbnail would have a 100% opacity. Click next, and the second thumbnail would have 100% opacity, while the first thumbnail returns to the dim state. Has anyone else been able to accomplish this effect?
Thanks!
Hello
I know that this message is a little old but did you fixed the thumbnails stay lit after clicking ?
If yes, i’m very interested because i need it too for my website.
Thanks you for the answer 🙂
Try a onclick/click function combined with addClass/removeClass function and modify your stylesheet through setting up two classes(lit/non-lit) using different opacity for each of them.
You can even use/modify the given functions for the mouseover/mouseout events.
Sorry for not posting any code snippet, but I believe you figure that out and learn something new about using Jquery.
this is great, well done, love it!
I really want it to work on iPad, so is there a way to stop the thumbnails moving on hover so that they become static, visible at all times, and allow the user to scroll horizontally (manually)?
Or having thumbnail scroll buttons would be good.
Cheers,
@Christian Carlson and @Keeby
Until I update the gallery, I can only provide you with a link from another user that has done it so you can see his implementation:
http://pritesh.info/vivid-photo-2/richard/
Cheers very much man!
I followed the link but the page appears to function the same with thumbnails moving on hover.
I’ll play around with the code and see if I can figure something out.
Hi
Sweet code! I have 1 issue however with the scroll action, if I move the mouse out of the container and re-enter at another point it calculates a move, which scrolls the intended image away. Does anyone have a way around this?
The ‘problem’ is in the way the following works:
$thumbScroller.mousemove(function(e){
….
});
thx!
This is a great gallery, would it be possible to incorporate a HTML5 fullscreen option. like pressing F11. Then it would be awesome.
AWESOME – WOW
Can we open the gallery in light box or popup?
This is sick. Anyone able to get the thumbnail scrolling to work on iPad?
Great work! But when I quicky move with mouse totally to left side on thumbs, scrolling is stopped (not on first thumbnail) . On the right side it works ok. Sorry for my English, please. Thanks.
Nothing but AWESOME.
i olny can say, congratulations!
Hey there!
very very nice! i really like it! thank you very much!
but i also have a question, but first: sorry for my english 🙂
ok, here is my question:
is it possible, and how, that there will wie shown content over the background image?
the text would also change like the background image. it would be below the shown image title.
i hope you understand what i mean 🙂
it would be really nice, if you could help me.
have a nice day!
sandra
Hi, really great gallery..
i’m just wonder why it doesn’t scale my image in the original view mode but only if i set it on normal!
I’m not so great with jquery and i find really hard set up the script!
Could you help me please?
thanks
Im really appreciate your tutorial thanks for including it on your jquery fullscreen gallery…Mabuhay!!! Cheers!
Hello, congratulations for the excellent tutorial.
I wonder if there is a possibility to make the background images go changing it without clicking next and prev. I want to leave the prev and next but I want the images to change automatically as well.
It would be very grateful if you could help me and thank you in advance.
1. Great plug-in
2. Great images
3. Great plug-in
4. Question:
I noticed this doesn’t currently work well with a Touch device.
Would it be possible to use a timer and swipes events to ‘run the show’..
Here’s the thought…
Swipe from under bottom (max y) up into screen above thumb Y:
UI Comes up for X seconds then fades away.
When UI up.. swipe left right (anywhere on screen) moves the thumbs..
thumb click shows image and fades UI
When UI faded.. swipe left right (anywhere) loads next-prev
When UI up is up..
Swipe from above min UI Y through to bottom (max y) down past screen:
UI Comes fades away.
This should then not be overridden by the new iOS5 notifications gesture, as it originates from inside the app/ui area out.
I think it would really polish this plugin for nearly any device.
Malihu! I hope my maths is good enough to get through the spam filter… I have a question. I’m planning on using this fantastic gallery for a photographer friend of mine and I’ve added a top nav div that works beautifully. Adding an equivalent footer, though, is a real headache! I just can’t seem to produce a bottom div that sits below the #bg no matter how much fiddling I do! At the moment the only way I have found is to reduce the height from 100% but that removes some of the image – no good…
can you help?
Adam