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


336 Comments

Post a comment

Comments pages: 1 2 3 6

  1. lplugo
    Posted on January 25, 2011 at 11:29 Permalink

    I copied the code again and it is working. hmmm! I’m happy 😀

    Reply
  2. lplugo
    Posted on January 25, 2011 at 04:03 Permalink

    Hi again!

    I have another question. Is it possible to get back the loading picture in full screen mode? Originally this line:

    …because I miss it always when I’m clicking back on previous button.

    Thanks again!

    Reply
    • malihu
      Posted on January 25, 2011 at 09:51 Permalink

      The loading icon is always visible. If the images are cached, they fade in and out almost instantly cause no preloading is needed.

      Reply
      • lplugo
        Posted on January 25, 2011 at 11:07 Permalink

        Perhaps the problem is that the first thumb doesn’t work on slide bar.

        Reply
  3. lplugo
    Posted on January 25, 2011 at 03:48 Permalink

    Hello and thank you. Great job!

    I just trying now the template and I’d like to ask you about the way how to get the portrait pictures in fit height?
    And I have a flash menu bar with backgorund color under text but when I use the gallery template I loose this colour. Do you have any idea to change it?
    Thank you!

    Reply
    • malihu
      Posted on January 25, 2011 at 09:43 Permalink

      Check your flash parameter wmode. It should be window.

      Reply
      • lplugo
        Posted on January 25, 2011 at 10:55 Permalink

        When I change mode to window the landscape pictures don’t fill the browser and it would be great if portrait picture would be resized at the browser height and landscape picture to the width.
        Is it possible?

        Reply
  4. VINIT PRATAP SINGH
    Posted on January 24, 2011 at 13:17 Permalink

    Hi malihu, can we implement slider instead of fade in images & when we press up and down key bottom from keyboard thumbnail slider up and down. Thankyou in advanced for any help.

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

      Hello,
      It would be a completely new script as the code required to do what you suggest, differs a lot from the current one. If I get some time, I might develop a version of this gallery. Thanks for the suggestion!

      Reply
  5. Newb Webdesigner
    Posted on January 20, 2011 at 19:39 Permalink

    Hello and thank you for all of your scripts!
    I am putting together a site with multiple scrollers and a couple of gallery windows. I am not able to get the “normal” defaultViewMode to work on the other gallery windows except on the first mural gallery. Coffee on me for any relief you can bring me for this headache, make that 2 cups. My test page is at http://www.timscottdesigns.com/tester1.html
    – thank you in advance for any help

    Reply
    • Newb Webdesigner
      Posted on January 20, 2011 at 23:08 Permalink

      I figured it out, coffee on me anyhow… cheers!

      Reply
      • malihu
        Posted on January 21, 2011 at 02:02 Permalink

        Thanks! I like the implementation of horizontal scrolling for your galleries 😉

        Reply
  6. rober
    Posted on January 9, 2011 at 21:32 Permalink

    Hi,
    What a lovely gallery , nice job, and thanks alot for sharing.
    I have the same issue that Alec, and I´m praying for your next/prev solution.
    Thanks a lot

    Reply
  7. Alec
    Posted on January 9, 2011 at 19:03 Permalink

    Your’e my hero!

    I would like to learn jquery myself. Perhaps you would know best where I can begin? Do you have a few clear tutorials site for me?

    Reply
  8. Alec
    Posted on January 7, 2011 at 15:02 Permalink

    hi,

    Great slideshow! This is the best solution I could find for a fullscreen slideshow.
    The only thing I am realy missing is the next and the prev. You already said we need tot look at the sideways slideshow. I am new with jquery en experimented a lot with both the slideshow but cant get the next en prev buttoms working.
    I am guessing I first need to load the next image in the script but I don’t even know what I’m doing.
    This is what I’ve made so far. The button is working but there’s no target.. Could you help me further?

    jQuery("#next").click(function () { $bgimg.attr("src", "").attr("src", this); //change image source });

    Reply
    • malihu
      Posted on January 7, 2011 at 18:57 Permalink

      Hello Alec,

      I’m planning to implement a next/previous image function on this gallery, so if you could wait a bit I’ll let you know when it’s ready.

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

      Hi again Alec,
      I’ve finally implemented a next/previous image function on the gallery 🙂

      Reply
  9. Austin Artist
    Posted on December 28, 2010 at 00:07 Permalink

    Your scripts and tutorials are really awesome, thank you for all these great resources! Is there a way to make the images different sizes and and center in the div.? Right now I have a test page set up I am trying to configure at http://www.timscottdesigns.com/test.html

    Reply
    • malihu
      Posted on December 28, 2010 at 00:22 Permalink

      Hello and thanks a lot for your comments 🙂

      The script has the ability to load different image sizes, landscape and/or portraits. Inside the script check the first line:

      //set default images view mode
      $defaultViewMode=”normal”; //full, normal, original

      Setting the “defaultViewMode” variable to “original”, the large images won’t stretch or scale. If the original images width/height is less than the browser window, they’ll be centered inside it.

      Reply
      • Austin Artist
        Posted on December 28, 2010 at 06:51 Permalink

        Thank you for your quick reply. I am trying to center the pictures inside a div smaller than the window size. How do I change the part in the following code to center off of a div instead of the window width and height?

        //Image scale function
        function FullScreenBackground(theItem,imageWidth,imageHeight){
        var winWidth=$(window).width();
        var winHeight=$(window).height();
        if($toolbar.data(“imageViewMode”)!=”original”){ //scale
        var picHeight = imageHeight / imageWidth;
        var picWidth = imageWidth / imageHeight;
        if($toolbar.data(“imageViewMode”)==”full”){ //fullscreen size image mode
        if ((winHeight / winWidth) picHeight) {
        $(theItem).attr(“width”,winWidth);
        $(theItem).attr(“height”,picHeight*winWidth);
        } else {
        $(theItem).attr(“height”,winHeight);
        $(theItem).attr(“width”,picWidth*winHeight);
        };
        }
        $(theItem).css(“margin-left”,(winWidth-$(theItem).width())/2);
        $(theItem).css(“margin-top”,(winHeight-$(theItem).height())/2);
        } else { //no scale
        $(theItem).attr(“width”,imageWidth);
        $(theItem).attr(“height”,imageHeight);
        $(theItem).css(“margin-left”,(winWidth-imageWidth)/2);
        $(theItem).css(“margin-top”,(winHeight-imageHeight)/2);
        }
        }

        Thank you again in advance, you can see what I am talking about at my previous comment link.

        Reply
    • malihu
      Posted on December 28, 2010 at 14:44 Permalink

      Hello again!

      I’ve checked your page. In order to do what you describe, you should do the following:

      a) Open scrthumb2.js and set the defaultViewMode to normal:
      $defaultViewMode=”normal”;

      b) Inside FullScreenBackground function, change the values of the first 2 variables (winWidth and winHeight) so they get the dimensions of bg div instead of window:
      var winWidth=$(“#bg”).width();
      var winHeight=$(“#bg”).height();

      That’s all you need. If you copy-paste the code from this comment, remember to re-type the wordpress quotes 😉

      Reply
      • Austin Artist
        Posted on December 28, 2010 at 17:35 Permalink

        Thank you so much. That is exactly what I was trying to do but had it on original and did not put the quotes around #div. Keep up the great work!!

        Reply
  10. webdesign berlin
    Posted on December 11, 2010 at 01:14 Permalink

    nice tutorial, i have a full size gallery too on my portfolio at http://referenzen.webdesign-portfolio.de/ . hope you enjoy

    Reply
  11. Charles
    Posted on December 2, 2010 at 21:42 Permalink

    Fantastic piece of work! Very fresh approach too.

    One question if I may.
    Is there a way to tie a link (say pointing to a new page) to the big image?

    Again great work.

    Best wishes
    Charles

    Reply
    • malihu
      Posted on December 3, 2010 at 10:02 Permalink

      Hi Charles,
      Yes you can wrap the large background image (img id=bgimg) inside an ancor link. Depending on how you want it to work, you would probably need to add the links addresses to each of your thumbnails (e.g. as a “rel” attribute on their ancor tags) and pass it to the large image when you click them via js.

      If you provide more details I might be able to create a demo variation.
      Thanks for your comments 🙂

      Reply
      • Charles
        Posted on December 3, 2010 at 20:29 Permalink

        Thanks for replying.
        I mean clicking the background image (or maybe the title text which could contain a read more… hot link) might point to a new page with more detail regarding the big image.

        Reply
      • malihu
        Posted on December 4, 2010 at 03:33 Permalink

        Yes, it’s fairly simple 🙂

        You need to wrap the large background image inside an anchor tag with a unique id (e.g. #bgimg_link).
        Next, add a “rel” attribute on each one of the thumbnail links which will hold the additional url you want.
        Finally, inside the script find the #outer_container click function and add a single line of code that’ll get the “rel” attribute of the thumbnail and set it as the href value of the #bgimg_link, for example:
        $(“#bgimg_link”).attr(“href”,$this.attr(“rel”));

        Oh well, I think it’s more simple to do it than describe it… I’ve made a script version here:
        http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery_charles.html

        😉

        Reply
  12. albert
    Posted on November 18, 2010 at 20:19 Permalink

    Hi,
    What a lovely gallery 🙂
    If you could make it accessible by arrow keys I would be very grateful.

    Thank you in advance,
    albert

    Reply
    • malihu
      Posted on January 24, 2011 at 12:36 Permalink

      albert, I updated the script and among others, I’ve added next/previous image navigation via buttons and keyboard arrows 😉

      Reply
  13. Jim
    Posted on November 16, 2010 at 18:20 Permalink

    @malihu: thanks for your quick reply and edit of the code! This site is a great inspiration, will visit regularly!

    Reply
  14. malihu
    Posted on November 15, 2010 at 19:20 Permalink

    I’ll update a bit the code in few days and I’ll try to implement and automate features mentioned in the latest comments. Thanks for the input everyone.

    Edit: Done @mario, @Jim check the new code and re-download updated files.

    Reply
  15. Jim
    Posted on November 15, 2010 at 17:57 Permalink

    Great script! Really like it, great job. I sorta have the same problem as Mario, wanting images to have a fixed size of 1024×768 and centered, instead of fullscreen. Is there a possibility to implement this, on way or another?

    Thanks in advance!

    Reply
  16. mario
    Posted on November 15, 2010 at 03:45 Permalink

    Hello, wonderfull code
    But i have a question:
    I have images in 1680 x 375 and i want the BG div to be the same size as the images (1680×375), so i tried to change the code but the problem i got is when i do it the image shows like 1680×100 px, i don’t know what i’m doing wrong.
    Also i want to set the DIV bg (where the images appear) in the middle of page or wherever i need.

    Thank you in advance
    Mario

    Reply
  17. Yannick
    Posted on November 9, 2010 at 13:29 Permalink

    Hi,

    Your simple gallery is very great, thanks.
    But i wonder if it could be possible to add a semi-transparent description at the bottom of each images?

    Thanks in advance.

    Reply
    • malihu
      Posted on November 14, 2010 at 19:50 Permalink

      Hi Yannick,

      The easiest way is to style #img_title div to how you want your description to look like. This div gets the contents of the title attribute of each image so adding your description to the title attributes will work just fine without any extra coding 😉

      Reply
      • Yannick
        Posted on November 15, 2010 at 12:18 Permalink

        Ok, thanks, I’ll try it.
        Just one thing more, why, when you maximise an image, you can’t scroll up to the top but only to the bottom?

        Reply
      • malihu
        Posted on November 15, 2010 at 19:24 Permalink

        @Yannick
        Actually you should not be able to scroll the image at all. How/where that happens?

        Reply
      • Yannick
        Posted on November 17, 2010 at 13:28 Permalink

        That happens on all my images, when I “Maximize”.
        I can scroll to the top but not to the bottom…

        Regard

        Reply
  18. asdf
    Posted on November 4, 2010 at 19:02 Permalink

    better than supersized 2.0 with the thumbnail navigation…good.

    even good if it have the easing sliding background instead of fade in out.

    Reply
  19. bas moorkens
    Posted on October 30, 2010 at 16:10 Permalink

    Thanks for your reply, i have another problem now however…
    When i load a page, it only displays the loading icon…Not the slideshow.
    But when i refresh the page, it appears just fine. Been messing around with the code but i’m not really good in Jquery so, perhaps you would be so nice to take a look?

    Reply
    • malihu
      Posted on November 4, 2010 at 01:14 Permalink

      Hello,
      Does this happen in a particular browser? e.g. only on Firefox?

      Reply
      • Veronika
        Posted on June 24, 2012 at 17:13 Permalink

        Hello ) Thank you first of all for great job you’ve made.

        I have this problem too. After I placed my pictures, when I load a page I can see only loader on background and buttons. So, to see first pic I need to click next button. Is it possible to make first picture to load same moment the page is loaded?

        Reply
        • Veronika
          Posted on June 24, 2012 at 17:15 Permalink

          I tried on opera and chrome

          Reply
          • malihu
            Posted on June 24, 2012 at 19:37 Permalink

            Does this happen when you check it locally? If yes, try to test it online and see if everything works ok.

  20. bas moorkens
    Posted on October 29, 2010 at 21:33 Permalink

    Hi there, first of , real nice plugin!
    I got it working pretty smooth over here, the only problem that i have, is that the thumbnails dont work :/
    They don’t size down but it shows a piece of the large image at the bottom of the screen instead..
    So i was wondering, could you explain me where you exactly create the thumbnails?
    Thanx in advance!

    Reply
    • malihu
      Posted on October 30, 2010 at 00:18 Permalink

      Hello,
      The thumbnails and the actual size images are located in the same folder (“images”). Notice that thumbnail files have a “_thumb” suffix in the filename. So you need to create the thumbnails for each of your images. Auto-sizing all the images would not be efficient and would affect performance and loading time significantly.

      Reply
  21. Johnny
    Posted on October 29, 2010 at 19:47 Permalink

    Hello !
    you made such good work !

    I wanna know if I could slow down abit the thumbnail scroller ?
    it scroll abit too fast for me !

    Thanks!

    Reply
    • malihu
      Posted on October 29, 2010 at 20:15 Permalink

      Hi Johnny,

      The thumbnails container position depends on the position/movement of the cursor so you can’t really change the scolling “speed”. What you can do thought is play with the ease amount to make movement smoother or more exact. In the script, find the line:
      var animSpeed=600; //ease amount
      and change the 600 (milliseconds) to see the results.

      Reply
      • Victoria Wagman
        Posted on June 25, 2012 at 16:34 Permalink

        Hi!

        1) This gallry is awesome! 🙂
        I’m using it to show off a really gorgeous collection of dresses by Kay Senchai.

        I fiddled with the ease settings, however I think ifI were able to change the initial load, to show the images “as if the mouse were in the middle”, new visitors wouldn’t have the “big surprise” of images moving very fast, when they move the cursor over thumbs the first time they move their mouse to click. Any ideas on how to make it so that the “middle thumbs” are loaded?

        Reply
  22. Onyx808
    Posted on October 28, 2010 at 02:47 Permalink

    is there a way to make it auto scroll? like fade in the next image after 4 secs or so…

    Reply
    • malihu
      Posted on October 29, 2010 at 20:23 Permalink

      Auto scroll implementation requires some additional coding. I’ll see if I can implement it on a future date (I’m a bit short on time at the moment) and let you know.

      Reply
  23. Jamie
    Posted on October 25, 2010 at 10:41 Permalink

    beautiful work you have done here.

    is there a simple way to have the sideshow open straight away in full screen mode, instead of having it as an option. (so it’s always full screen)

    i thank you in advance for your time

    j

    Reply
    • malihu
      Posted on October 26, 2010 at 01:26 Permalink

      Hello Jamie and thanks for your comments.
      To have full screen mode by default add this code in the script:

      $toolbar.data(“imageViewMode”,”full”);

      as the first thing inside $(window).load function.

      Also you should change the upper-right image icon and link in the html by inserting this:

      <a href=”#” title=”Restore” onClick=”ImageViewMode(‘normal’);return false” rel=”nofollow”><img src=”toolbar_n_icon.png” width=”50″ height=”50″ /></a>

      inside the <div id=”toolbar”>

      Reply
  24. Ron Giddings
    Posted on October 22, 2010 at 22:11 Permalink

    I have tried using you terrific ‘Pimp-my-Tooltips’ with this gallery and succeeded in sending the browser’s tooltips to 100000000 millisecond oblivion. Unfortunately, ‘title’ no longer appears in the upper left-hand corner of this image gallery.
    Is there a way to make these two play nice together? Perhaps the gallery can use ‘alt’ or something? I’m new to this adapting scripts stuff and really appreciate your generosity.
    thx

    Reply
    • malihu
      Posted on October 24, 2010 at 15:38 Permalink

      For the gallery to utilize “alt” instead of “title” attributes find the line “var title_attr=$this.children(“img”).attr(“title”);” (commented: get image title attribute) inside the script and simply change “title” to “alt” (e.g. var title_attr=$this.children(“img”).attr(“alt”);). This will also make tooltips plugin work along with the upper-left corner titles 😉

      Reply
      • Ron Giddings
        Posted on October 24, 2010 at 22:16 Permalink

        It works! I can now have a short description of each image in the ‘Title’ and no annoying tooltip popping up. Thank you so very much.

        Reply
  25. marina
    Posted on October 16, 2010 at 07:32 Permalink

    hey
    is there any way to make the thumbs not to fade if you not rolling over them with the mouse?

    Reply
    • malihu
      Posted on October 16, 2010 at 12:48 Permalink

      Hi,
      Yes. To completely disable the fade effect of the thumbs just delete or convert to comment (add “/*” at the beginning and “*/” at the end) this block:

      /* $outer_container.fadeTo(fadeSpeed, 0.8);
      $outer_container.hover(
      function(){ //mouse over
      var $this=$(this);
      $this.stop().fadeTo(“slow”, 1);
      },
      function(){ //mouse out
      var $this=$(this);
      $this.stop().fadeTo(“slow”, 0);
      }
      ); */

      Alternatively, inside the code above you can change the fade-in/out value of the thumbs block for mouse-over and mouse-out by changing the values of 1 and 0 inside $this.stop().fadeTo(“slow”, 1); lines. A value of 1 means no transparency, value 0.5 for semi-transparency, 0 for complete transparency etc.

      Reply
      • Ron Giddings
        Posted on October 19, 2010 at 19:57 Permalink

        I am really enjoying using this elegant gallery (if you care to take a look, it’s at my website address above)
        Is there any way to disable a user’s browser tool-tips though?
        I keep getting the titles of the images popping up over the large images and the thumbnails. I wanted to give image descriptions by putting them into the titles, and it did work, except the tooltips are now huge!
        Help?
        thx

        Reply
        • malihu
          Posted on October 19, 2010 at 22:48 Permalink

          Hi Ron,
          The browser tooltips appear when elements (such as images) have the title attribute (e.g. title=”image title”). If you remove the titles from the images you won’t get any tooltips. I strongly suggest though that if you want a description for images you should leave titles or at least give images alt attributes (e.g. alt=”your description”).

          Reply
  26. Morpheus
    Posted on October 12, 2010 at 06:48 Permalink

    I meant Keyboard arrow keys**

    Reply
    • malihu
      Posted on October 12, 2010 at 12:32 Permalink

      I’ll probably give it a try when I have time. Thanks for the suggestion.

      Edit: Done! (finally…)

      Reply
  27. Morpheus
    Posted on October 12, 2010 at 06:47 Permalink

    Nice… Now only if it had support for arrow keys for navigation prev/next image

    Reply
  28. Werner
    Posted on October 10, 2010 at 07:03 Permalink

    Great code! I’m working on a site using your fullscreen image gallery and one set of images is 1654 by 1654 px, while another is 1654 by 2828 px. The image is centred when it’s fullscreen, which is great; that’s exactly what I want. But while I can scroll down to see the bottom portion of these images (again at fullscreen), I can’t scroll up to see the top. Any suggestions on how best to tweak this?

    Reply
    • malihu
      Posted on October 10, 2010 at 12:24 Permalink

      Hi,
      I need to see an example and the code of what you described in order to help. On this script, by default you see all portion of images (landscape and portrait). If you change the view mode to “maximize” (upper right corner icon) images are displayed in full-size which is ideal for landscape images since the majority of displays and monitors are widescreen.

      Reply
      • Evan
        Posted on December 24, 2011 at 04:22 Permalink

        this is such a killer gallery, thank you. my question is similar to @Werner’s: when “maximized” i can’t scroll vertically, is there a way to include that? also, on your sideways gallery you have an “original” view mode as well and although i see mention of it in the tut and code i couldn’t figure out how to do it (horizontal scroll in this case would be great). thanks again.

        Reply
  29. Angel
    Posted on September 25, 2010 at 19:07 Permalink

    Great tutorial!
    How can I use the function “clicking on large image loads the next one” like in the SIDEWAYS tutorial?
    Thanks a lot

    Reply
    • malihu
      Posted on September 26, 2010 at 02:54 Permalink

      In order to work, it needs extra coding and you can’t just copy the function from the other script. Unfortunately I don’t have time to implement this feature on this gallery at the moment (maybe in the coming weeks). To be honest, it seems a bit overkill to have that feature on this script cause you already have all the thumbs in the same place as the large image.

      Reply
    • malihu
      Posted on January 24, 2011 at 12:40 Permalink

      Angel, I updated the script and added next/previous image navigation via buttons and keyboard arrows 😉

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

        You can also just added the “nextImageBtn” link around the large image in your HTML. Just be sure to specify the styles for this class in your css so the button style doesn’t effect this big link!

        Reply
  30. Sérgio Soares
    Posted on September 8, 2010 at 20:05 Permalink

    Awesome m8. U have some great tutorials.
    Is this slideshow cross-browser compatible?

    cheers
    Keep up the excellent work

    Reply
    • malihu
      Posted on September 9, 2010 at 01:19 Permalink

      Thanks 🙂 I’ve checked it on the latest versions of Opera, Firefox, Safari, Chrome and IE8. Should work on older browsers too.

      Reply

Comments pages: 1 2 3 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