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
I LOVE this script…. I’ve been playing with it for a bit and trying to get it to work the way I want to…. I have a photography site running WordPress where I really want to use this script on… Here is a link to my test site: http://test.digital-dreaming.com/ One of the things I’ve been doing is working on a plugin for WP… It’s very much on the 1. stage though…. That’s really not why I’m writing here though….
I’ve ran into a small problem with the thumbnails….. I have it placed vertically on the side…. Most of the time they work fine full screen but once I shrink my browser window I can’t scroll up or down til the end/beginning…. I hope I’m making some sense…… I have a feeling that it’s something ridiculously simple and I’m just not seeing it because I’ve stared at it for too long….
Another thing…. In the galleries on my current website the active thumbnail has a different color border around it…… It’s kind of difficult for me to explain (not native English speaking) but if you go here http://digital-dreaming.com/synishorn/born-2/ maybe you can see what I mean…… Pretty much I would like the current photo and thumbnail to match….. if that makes sense…..
This is one of the greatest slide shows I have ever seen on the internet! As an amateur photographer I really appreciate your excellent work. The automatic resize function is particularly useful, and a rarity among the numerous slideshows available.
I have a 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.
I would like to display the EXIF info too. Has anyone done that?
EdB
awesome job dude, i would like to know how can i make a menu bar also invisible on the same page like you have made the slidemenu below..
Hi I have created a gallery using your script so first as I mentioned above thanks very much.
I have a lot of images in the gallery and when you scroll to the far right. Towards the end the thumbnails start to act a bit strange. It seems the length is to long? I made the images smaller so the thumbnail area wouldn’t be so long and it seems to work fine. But my problem is it may get longer again? Is there a fix for this. So you can have unlimited images?
http://kemetdev.applab.net/galleries/57
Thanks in advance
Hello Joachim,
Sorry for such a late reply. Been extremely busy but such late reply takes no excuses, so I can only apologize.
Long story short: There’s a little bug in jquery library preventing proper animation of content longer than 9999 pixels.
The only workaround solution is to add a few lines of code in your document. The how-to is described here:
http://manos.malihu.gr/jquery-custom-content-scroller
Check the section named Scrolling long content and follow the same technique for this script 😉
Some amazing script here. Love it. Perfect. Very impressed and so simple to implement. Thanks very much for sharing 🙂
Hi, love your work…
but, I have a problem… I fixed de thumbs but, and imagine: … I have 90 images, and the thumbs are static and visible when i’m seeing de image, but when i move the mouse to one thumb it scrolls to the coordenate and the cursor gets hover other thumb… It is possible fix that? or simple remove the ‘auto scroller’ and add arrows? I am a bit in a hurry, if you can replay…
thank you so much for your time, and sorry my poor english.
I am currently using your awesome style my tooltip with my gallery, so I already switched the “alt” instead of “title” attributes in the line “var title_attr=$this.children(“img”).attr(“title”);” to displat the alt atribut in the img_tile div . Is there a way to get, store, and display, the title tag when hovering over the image so that it will display title atrribute with the cursor tooltip instead of alt attribute, while still using the alt atrribute to display in the #img_title? Wow that was a confusing mouthful, any help would be very appreciated I feel like I am missing something simple.
Thanks again
http://www.timscottdesigns.com/art-murals.php
hi malihu,
I know I’ve asked this in the past, but I was wondering if you could tell me how to adjust this section of the script to make it so that it fades into the next image, rather than fading to black, and then to the next image:
//switch image function SwitchImage(img){ $preloader.fadeIn("fast"); //show preloader var theNewImg = new Image(); theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload); theNewImg.src = img; }Let me know, and if this is something that takes extensive work I’d be willing to pay for it.
Thanks!
Hello!
Nice gallery!
I’m wondering how i could accomplish this:
When a user click’s on the image title to appear a lightbox or a popup with a external link ?
Thanks !
Thanks again for a great script. Is there a simple way to implement a vertical thumbnail scroller with this gallery?
Hi,
your gallery is very NICE!
I will ask, if is any chance to enable auto slideshow (switching images) after load?
Thx 🙂
Hi Andrew,
On February 14, Alex posted an auto-playing code for this gallery. Check his comment (permalink: http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery#comment-4237)
Hello,
I need to use portrait pictures. In fullscreen is possible to have scroll on mouse move, like this:
http://tympanus.net/Tutorials/FullPageImageGallery/
Thanks,
Cipo
I am looking for the same thing.. Anyone ?
Thanks Mr. Malihu for this useful script well this is a kind of stupid question but … Im using a Jquery script to drag a big image (6000px width / 1800px Height) and this awesome piece of code works like a charm the only problem is that fits/Resize the original size of the image i need to show it in the original fullsize i hope you can help me and thaks again!
Inside script change:
$defaultViewMode="full";to
$defaultViewMode="original";What a dummie 😀 Thanks !!!
Hi Malihu,
I just wanted to thank you again for this awesome script and you’re hard work at keeping up with all of these comments! It’s much appreciated.
I know the requests come frequently here, but I also wanted to ask for the addition of the “cross fading images” technique for the fade effect. That would be an incredible addition to an already amazing script.
Let me know if you think that might be in the works.
Thanks Malihu!
Heya Malihu. Thanks for this and also for other resources you gave us. I should say, I learn JQuery and JavaScript thanks to you.
I tried to mod something in this gallery but I stucked 🙂
How can I achieve to change dynamically maximize button’s href attribute with loaded image’s href and with some class declaration. I want to show maximized images some other way like this.
If it is impossible or you don’t have time for that, I can wrap big image with ‘a href’. But then I stuck again. I can not change the href attribute dynamically 🙁
Thanks again. I’m very grateful.
Hello, malihu, thanks for this great script. Is there a solution to eviter the balck flash(screen) between the transition. I want to say when user click the thumbnail, the image will truns to black, then appear a new image. Could it be FadeIn when the old image FadeOut simultaneous?
thinks for advance!
also is there a solution to replace the fade transition with a horizontal scroll left and right for the next and previous image respectively?
Malihu addressed this here:
In order to implement a slide effect you’d need to include jQuery UI. To do this, inside the head tag of the document add:
right below jQuery library:
Next, inside script, find (line: 202):
$preloader.fadeOut(“fast”,function(){$this.fadeIn(“slow”);});
and change it to:
$preloader.fadeOut(“fast”,function(){$this.show(“slide”,{direction:”right”},1000);});
changing the 1000 value (milliseconds) that represents the sliding animation time, to whatever you want.
better yet, here’s the link – http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery#comment-4327
how to change the speed of scrolling images at bottom? i think it is to fast to scroll. but i cant find what i will change.
The speed of scrolling depends entirely on mouse position, so there’s no scrolling speed value at all. You can only change scroll easing value ($scrollEasing) at the top of the script.
Really great script! However in IE7 and IE8, the maximize/restore button doesn’t seem to work. When I add alert($(theItem).attr(“width”)); to the code before and after it is changed. the same value is being alerted in IE (1419 / 1419). In Firefox it has 2 different values (1920 / 1440). Do you know how to fix this? Thanks in advance!
Hello and thanks 🙂
I’ve tested the script extensively on IE8 (version 8.0.7600) and the demo works as it should (IE8/win7). What version you have?
IE7 is a different story. I usually don’t develop or test on IE7 as among others, has some major issues with browser resize js functions. You can try the following and see if it works:
In the script, change the way window resize function is called, from:
$(window).resize(function() { });to
window.onresize=function(){ }keeping the code inside the function as it is.
Also, in the head tag of the document add:
<!--[if lte IE 7]> <script> window.onresize = null; //patch to prevent infinite loop in IE6 and IE7 </script> <![endif]-->Thanks for the quick reply! I got an email that it didn’t work in IE8 (didn’t test it myself yesterday), but turns out he was using IE7. IE8 works fine indeed. I’ll try the code you gave me. Thanks again!
Hi malihu,
This is a beautiful script, thanks so much for it!
I have one question – I would like to add a “counter” somewhere on screen, that displays which image you are currently viewing (so it would ready “No. 2/9”).
Do you have any idea how I would accomplish this?
Let me know, thanks so much!
Thanks!
Seemed faster to do than describe it 🙂 Get it here:
http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery-imgCounter.zip
Brilliant. Thanks so much Malihu!
Just implemented this and it works great, thanks so much Malihu.
As a follow-up, any idea how to add a leading zero to the index numbers, if they are single digits?
Let me know, and thanks again!
Nice!
Any way to start preloading rest of the full screen images while the user is busy looking at the first ones? That would cut down on waiting time
Check here:
http://stackoverflow.com/questions/476679/preloading-images-with-jquery
THANK you for this plugin! I love it.
I had a question, is there a way to place elements in sub of a large image?
My goal is to have a div box with text only appear when you click that specific image. Do not want it to show on every image/page just a certain image (I hope I made sense haha)
Thank you again!
Thank you so much for this awesome gallery!
Only question I have is what licence is it under?
Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
🙂
great!
where should be attribution placed? on gallery? on footer? in comment on top of source code?
Anywhere you like. A comment in source code is fine 🙂
HI
Thanks for giving us a great jquery image gallery.
I need your help in changing the effect, sliding the image from Right to Left.
Is that possible?
In order to implement a slide effect you’d need to include jQuery UI. To do this, inside the head tag of the document add:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>right below jQuery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>Next, inside script, find (line: 202):
$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});and change it to:
$preloader.fadeOut("fast",function(){$this.show("slide",{direction:"right"},1000);});changing the 1000 value (milliseconds) that represents the sliding animation time, to whatever you want.
Hi malihu,
Thank You for your reply.
It works beautifully
Thanks a ton
Hi! I like very much this plug-in, thanks for sharing. Here is code for autoplay that created for my project. I hope it will be useful. Just place it below the main script
// // yak, 2011-02-14 // add simple slideshow functionality // var slideshow_enabled = true; // enable or disable the slideshow on page load var slideshow_delay = 6000; // slideshow delay in msec. var slideshow_extra_delay = 6000; // slideshow additional delay (when directly clicking on a thumbnail), in msec var slideshow_timeout=false; var slideshow_real_delay=slideshow_delay; if(slideshow_enabled){ var increase_delay_func=function(event){ slideshow_real_delay=slideshow_delay+slideshow_extra_delay; window.clearTimeout(slideshow_timeout); slideshow_timeout=window.setTimeout(slideshow_loop,slideshow_real_delay); }; $("#outer_container a").click(increase_delay_func); slideshow_timeout=window.setTimeout(slideshow_loop,slideshow_real_delay); } function slideshow_loop(){ slideshow_real_delay=slideshow_delay; $nextImageBtn.trigger('click'); slideshow_timeout=window.setTimeout(slideshow_loop, slideshow_real_delay); }Thanks a ton for posting the autoplay code 🙂 I’ll check and implement it as soon as possible 😉
It’s working only need a pause button.
Hi,
could you advice me what code i have to insert for a “pause” button?
Thank you very much!
Alessio
I am also looking to do a pause button, anyone help on that? Pretty please? I love the slide show, and the auto play code helped me a TON. So thanks very much for that!
Hi there!!
Hey bro – is it easy to change the fade out/fade in effect to a cross dissolve?.. if it’s not too much trouble, I’d love to use it. Many thanks from Melbourne.
Fagan
Hello! By cross dissolve you mean cross fading images or pixel dissolve transition effect?
Hello malihu –
to be honest – i’m not entirely sure what the difference is, I’m hoping to achieve a simple dissolve between the 2 images upon loading the next image. Your current version (once a thumb is clicked) fades to a black page with the loading bar is and then fades into the new image.
I would like the process to be – user clicks, then a progress bar runs along the top like this site.. http://www.flashcomponents.net/component/xml_full_screen_photo_gallery/preview/2551.html – then the new image dissolves in from the other image fast. I’m fairy new to coding but your tutorials are helping me out ALOT. thanks so much for investing time into helping others, it’s inspired me to do the same. F
thought I’d check as well.. how do you recommend layering a div on top of this? I would like to add a description and copy etc about the image but have it fade in like the thumbnails once a user ‘clicks’ anywhere on the image. I’ve been trying different methods but I’m stabbing in the dark.
Cross fading images is doable but it’d need some additional work to implement it on the script. Basically you need to load the next/previous image on a different div (e.g. #bg2) with a greater or lower z-index than the #bg and apply fade ins and outs on the 2 divs, depending on which one you want to show each time.
To make it a bit more efficient, you’d need to change the z-index via jquery .css() each time you want to fade it in, so you only fade the div with the greater z-index. This would be better because more than one fade at a time has negative impact on performance.
Unfortunately there is no way to make a percentage loader indicator with javascript (you’d need a server-side lang like PHP, but this is not recommended and best avoided). The link you posted does this cause it’s made entirely with flash.
If I find some time, I might try implementing cross fading images on this script and post an update.
Are you interested in some custom work that I am happy to pay for. I doubt it will take you very long since it’s all based on this script you have already created.
Sure, please send me an e-mail with details
Hi Malihu,
Did a fade effect ever get implemented? Would love to add that in on one of my sites.
Let me know, thanks!
@Nick
Not yet…
I’m really short in time these weeks working on multiple projects.
At the moment, the little time I get to update the blog usually goes to answering user questions and comments (which seems like a full-time job in itself).
When I get some time to implement such a feature, I’ll post an update here.
Hi,
very nice, thanks for sharing your knowledge.
Question. Does this also work on iPad?
Thanks!
The scroller works on mouse move so it won’t work so well (if at all) on ipad. In general, only click events work on ipads, so it’s very limiting on what you can do. A version of this gallery for touch devices (like ipad) should have a totally different scroller.
Hi Malihu!
Thank you for you reply. However i encountered a small problem: When I run your demo file in internet explorer 7, when i click the next image button, the currently displayed image shuffles for a sec to the right of the browser window. It doesn’t happen in internet explorer 8.
Do you have any suggestions of how to fix this?
W
Hello Malihu,
I loaded 150 pictures into the gallery and the thumbnail scroll is very strange.
At the left of the monitor is working fine but when I moving the mouse to the right on it, it’s getting to be faster and just running around.
Hey lplugo! There’s a known jquery bug that prevents animate values over 9999 pixels. I believe that your problem is due to that bug.
I’ve posted a quick fix on some other posts about this. Please check http://manos.malihu.gr/jquery-thumbnail-scroller. At the end of the post you can read the solution and implement it in the script 😉
Thank you Malihu!
It’s working. Perfect.
Thanks again!
Hello!
I was wondering if it’s possible to disable the thumbnails and just use the navigational arrows.
Thank you so much for sharing this and everything else on your site. I purely use html/css, but you have inspired me to start learning jQuery/Javascript.
Hello Johan and thank you for your comments 🙂
If you want to disable thumbnails, do the following:
a) In css, add display:none; to #thumbnails_wrapper
b) Inside script, comment the code block from:
//thumbnail scroller...untill:
...$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity); } );c) Still inside the script, find the window resize function and comment the lines:
$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); var newWidth=$outer_container.width(); $thumbScroller.css("width",newWidth); sliderWidth=newWidth; $placement=findPos($the_outer_container);To enable thumbnails just un-comment the code and remove display:none; 😉
Hi,
It works fine and I made a lots of tricks with my page.
I have maybe my last question:
When the page loaded the thumb scroller is showing and hidden only after the mouse was on.How is possible to auto hide it?
The thumbs scroller is initially visible in order to help users see the thumbnails area, so In my opinion, hiding the thumbnails on page load, might have a negative impact on user experience.
If you still want to hide it, find the line inside the script:
$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);and change it to:
$thumbnails_wrapper.fadeTo(fadeSpeed, 0);It will be slideshow also? So can auto play?
I might implement an autoplay feature when I get some time. Thanks for the suggestion!