This website uses cookies to personalise ads and to analyse traffic ok
web design

Simple jQuery fullscreen image gallery

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

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

Pages: 1 2


338 Comments

Post a comment

Comments pages: 1 2 3 4 6

  1. Sigrun
    Posted on May 10, 2011 at 13:08 Permalink

    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…..

    Reply
  2. Akos Kovacs
    Posted on May 8, 2011 at 11:51 Permalink

    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.

    Reply
    • EdB
      Posted on September 12, 2012 at 09:36 Permalink

      I would like to display the EXIF info too. Has anyone done that?

      EdB

      Reply
  3. Ani
    Posted on May 8, 2011 at 09:46 Permalink

    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..

    Reply
  4. Joachim Shotter
    Posted on May 6, 2011 at 14:24 Permalink

    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

    Reply
    • malihu
      Posted on June 7, 2011 at 12:31 Permalink

      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 😉

      Reply
  5. Joachim Shotter
    Posted on May 6, 2011 at 13:11 Permalink

    Some amazing script here. Love it. Perfect. Very impressed and so simple to implement. Thanks very much for sharing 🙂

    Reply
  6. Fausto Torres
    Posted on May 2, 2011 at 13:54 Permalink

    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.

    Reply
  7. Artist in austin
    Posted on April 29, 2011 at 17:58 Permalink

    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

    Reply
  8. Nick
    Posted on April 28, 2011 at 18:36 Permalink

    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!

    Reply
  9. Alex
    Posted on April 26, 2011 at 20:35 Permalink

    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 !

    Reply
  10. Werner
    Posted on April 23, 2011 at 23:01 Permalink

    Thanks again for a great script. Is there a simple way to implement a vertical thumbnail scroller with this gallery?

    Reply
  11. Andrew
    Posted on April 21, 2011 at 10:09 Permalink

    Hi,
    your gallery is very NICE!
    I will ask, if is any chance to enable auto slideshow (switching images) after load?

    Thx 🙂

    Reply
  12. Cipo
    Posted on April 14, 2011 at 18:03 Permalink

    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

    Reply
    • FEarBG
      Posted on September 10, 2011 at 18:57 Permalink

      I am looking for the same thing.. Anyone ?

      Reply
  13. Tester
    Posted on April 8, 2011 at 19:07 Permalink

    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!

    Reply
    • malihu
      Posted on April 9, 2011 at 06:46 Permalink

      Inside script change:
      $defaultViewMode="full";
      to
      $defaultViewMode="original";

      Reply
      • Tester
        Posted on April 9, 2011 at 06:57 Permalink

        What a dummie 😀 Thanks !!!

        Reply
  14. Nick
    Posted on April 2, 2011 at 08:27 Permalink

    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!

    Reply
  15. Deon
    Posted on April 1, 2011 at 09:03 Permalink

    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.

    Reply
  16. Arthur
    Posted on March 27, 2011 at 09:59 Permalink

    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!

    Reply
    • uceceo
      Posted on March 29, 2011 at 11:37 Permalink

      also is there a solution to replace the fade transition with a horizontal scroll left and right for the next and previous image respectively?

      Reply
      • Nick
        Posted on April 2, 2011 at 08:43 Permalink

        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.

        Reply
      • Nick
        Posted on April 2, 2011 at 08:45 Permalink
  17. josh.
    Posted on March 25, 2011 at 09:39 Permalink

    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.

    Reply
    • malihu
      Posted on March 25, 2011 at 13:44 Permalink

      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.

      Reply
  18. StefanDG
    Posted on March 15, 2011 at 02:21 Permalink

    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!

    Reply
    • malihu
      Posted on March 15, 2011 at 04:08 Permalink

      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]-->

      Reply
      • StefanDG
        Posted on March 15, 2011 at 10:59 Permalink

        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!

        Reply
  19. Nick
    Posted on March 9, 2011 at 16:39 Permalink

    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!

    Reply
  20. jessej
    Posted on March 7, 2011 at 19:35 Permalink

    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

    Reply
  21. Kevin
    Posted on March 7, 2011 at 05:13 Permalink

    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!

    Reply
  22. Srky
    Posted on March 2, 2011 at 02:28 Permalink

    Thank you so much for this awesome gallery!

    Only question I have is what licence is it under?

    Reply
  23. D Raja
    Posted on February 24, 2011 at 22:51 Permalink

    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?

    Reply
    • malihu
      Posted on February 26, 2011 at 15:12 Permalink

      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.

      Reply
      • D Raja
        Posted on February 28, 2011 at 08:14 Permalink

        Hi malihu,

        Thank You for your reply.

        It works beautifully
        Thanks a ton

        Reply
  24. Alex
    Posted on February 14, 2011 at 12:29 Permalink

    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); }

    Reply
    • malihu
      Posted on February 14, 2011 at 17:56 Permalink

      Thanks a ton for posting the autoplay code 🙂 I’ll check and implement it as soon as possible 😉

      Reply
      • lplugo
        Posted on February 15, 2011 at 16:45 Permalink

        It’s working only need a pause button.

        Reply
      • Alessio
        Posted on September 15, 2011 at 01:30 Permalink

        Hi,
        could you advice me what code i have to insert for a “pause” button?
        Thank you very much!
        Alessio

        Reply
      • Marnie Nickelson
        Posted on April 14, 2012 at 06:51 Permalink

        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!

        Reply
  25. fagan
    Posted on February 5, 2011 at 07:33 Permalink

    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

    Reply
    • malihu
      Posted on February 5, 2011 at 17:11 Permalink

      Hello! By cross dissolve you mean cross fading images or pixel dissolve transition effect?

      Reply
      • fagan
        Posted on February 7, 2011 at 07:57 Permalink

        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

        Reply
      • fagan
        Posted on February 7, 2011 at 08:01 Permalink

        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.

        Reply
    • malihu
      Posted on February 7, 2011 at 13:24 Permalink

      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.

      Reply
      • fagan
        Posted on February 7, 2011 at 15:21 Permalink

        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.

        Reply
    • malihu
      Posted on February 8, 2011 at 13:23 Permalink

      Sure, please send me an e-mail with details

      Reply
      • Nick
        Posted on April 14, 2011 at 01:25 Permalink

        Hi Malihu,

        Did a fade effect ever get implemented? Would love to add that in on one of my sites.

        Let me know, thanks!

        Reply
      • malihu
        Posted on April 14, 2011 at 08:57 Permalink

        @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.

        Reply
  26. Wim
    Posted on February 3, 2011 at 12:01 Permalink

    Hi,

    very nice, thanks for sharing your knowledge.
    Question. Does this also work on iPad?

    Reply
    • malihu
      Posted on February 3, 2011 at 12:17 Permalink

      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.

      Reply
      • Wim
        Posted on February 4, 2011 at 14:19 Permalink

        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

        Reply
  27. lplugo
    Posted on January 31, 2011 at 17:55 Permalink

    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.

    Reply
    • malihu
      Posted on February 1, 2011 at 03:27 Permalink

      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 😉

      Reply
      • lplugo
        Posted on February 1, 2011 at 10:52 Permalink

        Thank you Malihu!

        It’s working. Perfect.

        Thanks again!

        Reply
  28. Johan
    Posted on January 28, 2011 at 03:15 Permalink

    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.

    Reply
    • malihu
      Posted on January 28, 2011 at 13:31 Permalink

      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; 😉

      Reply
  29. lplugo
    Posted on January 26, 2011 at 20:10 Permalink

    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?

    Reply
    • malihu
      Posted on January 28, 2011 at 13:12 Permalink

      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);

      Reply
  30. lplugo
    Posted on January 25, 2011 at 11:32 Permalink

    It will be slideshow also? So can auto play?

    Reply
    • malihu
      Posted on January 28, 2011 at 12:56 Permalink

      I might implement an autoplay feature when I get some time. Thanks for the suggestion!

      Reply

Comments pages: 1 2 3 4 6

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php