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.
http://opensource.org/licenses/MIT

Pages: 1 2


337 Comments

Post a comment

Comments pages: 1 2 3 4 5 6

  1. Richard
    Posted on August 10, 2012 at 16:15 Permalink

    Hi, works a treat apart from ipad?

    Anyone have a fix?

    Thanks.

    Reply
  2. CW
    Posted on August 7, 2012 at 00:49 Permalink

    Is there any easy way to get the images to change every x amount of seconds?

    Reply
    • malihu
      Posted on August 7, 2012 at 01:18 Permalink

      Not at the moment. I’ll include such feature on a future update.

      Reply
    • LX
      Posted on November 14, 2012 at 18:03 Permalink

      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 GALLERY

      I 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.preventDefault in 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.

      Reply
      • malihu
        Posted on November 14, 2012 at 18:09 Permalink

        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!

        Reply
        • LX
          Posted on November 14, 2012 at 19:27 Permalink

          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

          Reply
      • Rico
        Posted on December 19, 2012 at 12:33 Permalink

        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!

        Reply
      • elena s
        Posted on July 16, 2013 at 15:38 Permalink

        thank you veeeeery much you are great!
        you just save my life with that adding! <3

        malihu, thanks to you too, OF COURSE!

        Reply
  3. Jon
    Posted on July 29, 2012 at 20:02 Permalink

    The ajax.googleapis/ajax/libs… script is causing me problems

    <!-- //Javascript code goes here for now $(function() { $( "#tabs" ).tabs(); }); -->

    Reply
  4. Jon
    Posted on July 29, 2012 at 19:59 Permalink

    This script tag seems to be the culprit of might site breaking.

    Reply
  5. Jon
    Posted on July 29, 2012 at 19:11 Permalink

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

    Reply
  6. xarkan
    Posted on July 25, 2012 at 03:51 Permalink

    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

    Reply
  7. Ashel
    Posted on July 19, 2012 at 06:44 Permalink

    Awesome!!!

    Reply
  8. Cbas
    Posted on June 30, 2012 at 23:51 Permalink

    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.

    Reply
  9. Iwan
    Posted on June 27, 2012 at 01:38 Permalink

    Great Script you wrote man!!
    Is it possible to use vimeo urls or iframes?
    I hope so 🙂

    Best

    Reply
    • malihu
      Posted on June 27, 2012 at 10:06 Permalink

      No, just images

      Reply
  10. jvdjay
    Posted on June 22, 2012 at 02:14 Permalink

    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

    Reply
  11. Marzia
    Posted on June 20, 2012 at 17:49 Permalink

    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

    Reply
    • Marzia
      Posted on July 3, 2012 at 12:30 Permalink

      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.

      Reply
      • malihu
        Posted on July 3, 2012 at 14:40 Permalink

        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.

        Reply
        • Marzia
          Posted on July 9, 2012 at 11:01 Permalink

          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

          Reply
  12. sebastian
    Posted on June 11, 2012 at 07:33 Permalink

    Tutorial is excellent, thanks a lot.. Can i add “auto play” options too?
    Could anybody please explain how can i add “auto play” function??

    Reply
    • Big Chris
      Posted on December 19, 2012 at 11:14 Permalink

      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 a click 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…

      Reply
  13. Szymon
    Posted on June 6, 2012 at 21:11 Permalink

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

    Reply
    • LX
      Posted on November 14, 2012 at 17:25 Permalink

      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.

      Reply
      • Theo Jacobs
        Posted on August 19, 2015 at 23:29 Permalink

        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.

        Reply
  14. Tonda
    Posted on June 1, 2012 at 23:35 Permalink

    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.

    Reply
  15. steve
    Posted on May 23, 2012 at 09:37 Permalink

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

    Reply
    • steve
      Posted on May 23, 2012 at 14:04 Permalink

      Nevermind!!! Got it to work, just removed all if last/first codes and works like a charm now with seperate galleries!

      Reply
      • Nina
        Posted on June 11, 2012 at 19:31 Permalink

        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.

        Reply
  16. Shan
    Posted on May 15, 2012 at 22:58 Permalink

    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!

    Reply
    • René
      Posted on September 29, 2012 at 23:00 Permalink

      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 🙂

      Reply
      • LX
        Posted on November 14, 2012 at 17:37 Permalink

        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.

        Reply
  17. Keeby
    Posted on May 15, 2012 at 17:07 Permalink

    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,

    Reply
    • malihu
      Posted on May 15, 2012 at 19:24 Permalink

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

      Reply
      • Keeby
        Posted on May 17, 2012 at 10:11 Permalink

        Cheers very much man!

        Reply
      • Keeby
        Posted on May 17, 2012 at 10:15 Permalink

        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.

        Reply
  18. Dafa
    Posted on April 29, 2012 at 05:43 Permalink

    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!

    Reply
  19. Vern
    Posted on April 28, 2012 at 22:24 Permalink

    This is a great gallery, would it be possible to incorporate a HTML5 fullscreen option. like pressing F11. Then it would be awesome.

    Reply
  20. Ingo
    Posted on April 27, 2012 at 19:21 Permalink

    AWESOME – WOW

    Reply
  21. Mayur
    Posted on April 26, 2012 at 09:45 Permalink

    Can we open the gallery in light box or popup?

    Reply
  22. Christian Carlson
    Posted on April 18, 2012 at 19:47 Permalink

    This is sick. Anyone able to get the thumbnail scrolling to work on iPad?

    Reply
  23. Tonda
    Posted on April 12, 2012 at 13:27 Permalink

    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.

    Reply
  24. William
    Posted on March 14, 2012 at 21:14 Permalink

    Nothing but AWESOME.

    i olny can say, congratulations!

    Reply
  25. Sandra
    Posted on February 20, 2012 at 01:56 Permalink

    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

    Reply
  26. mauro
    Posted on February 17, 2012 at 13:40 Permalink

    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

    Reply
  27. Philippine Christian
    Posted on February 14, 2012 at 10:46 Permalink

    Im really appreciate your tutorial thanks for including it on your jquery fullscreen gallery…Mabuhay!!! Cheers!

    Reply
  28. Guilherme Velloso
    Posted on February 2, 2012 at 13:45 Permalink

    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.

    Reply
  29. Brad Schafer
    Posted on January 28, 2012 at 03:25 Permalink

    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.

    Reply
  30. adam
    Posted on January 16, 2012 at 16:32 Permalink

    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

    Reply

Comments pages: 1 2 3 4 5 6

Post a comment

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