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


338 Comments

Post a comment

Comments pages: 1 2 3 4 5 6

  1. Culon
    Posted on January 15, 2012 at 22:32 Permalink

    malihu Sr awesome work here!!! Really great comented and really handy i just got one question, i been trying to change the thumbnails just for text. I do it the only thing is that i cant show the title for the fullscreen image theres a secret for this? Thanks for all your time and precious work!

    Reply
  2. David
    Posted on January 3, 2012 at 15:29 Permalink

    I would LOVE an auto slide option! And I will definitely buy you a coffee 🙂 Amazing work you’re doing here! Thanks a million!

    Reply
  3. Tina Sains
    Posted on November 28, 2011 at 08:38 Permalink

    Hi Malihu,

    I choose to use this plugin on my project,
    Because you try to answer, almost every question asked (meaning I have little chances of getting stuck). Keep up the good work.

    I have TWO questions:-
    1. I want to use
    Example link : http://tympanus.net/Tutorials/OverlayEffectMenu/#
    with your plugin, instead of the image thumbs.
    2. I want to the background explode effect
    Example link : http://www.samsung.com/ae/

    Could you please guide me, if the above is possible and how to achieve it?

    Reply
  4. Stuart
    Posted on November 26, 2011 at 18:46 Permalink

    Hi Malihu,

    Thank you so much for your script and all your help in the comments section.

    Is there a way to fade the images into each other instead of fading to black first?

    Thanks

    Stuart

    Reply
    • malihu
      Posted on December 13, 2011 at 20:28 Permalink

      Cross-fading is not available at the moment (at least not without big modifications in the script). I’ll definitely implement it (along with other transitions) in the next version.

      Reply
  5. ajith
    Posted on November 24, 2011 at 21:49 Permalink

    hi this is a awsome work…. but i failed to implement the auto scroll the big image, can help me pls

    Reply
  6. Marijan
    Posted on November 21, 2011 at 11:55 Permalink

    I try everything and nothing sucessfull 🙁

    Reply
  7. Marijan
    Posted on November 9, 2011 at 13:01 Permalink

    Hi Malihu!

    This is just great gallery!
    Help me please, I need to add some navigation in top of the page and remove the restore button from top right corner.
    When I add new div with navigation, navigation is visible a second or two on page loading and then hidden.
    How can I make my navigation allways visible, and how can I remowe restore image button?

    Thanks in advance and greetings from Croatia 🙂

    Marijan

    Reply
    • kamikater
      Posted on November 15, 2011 at 02:16 Permalink

      Removing the image resizing button is easy. Just search for ... an delete it.

      Reply
      • kamikater
        Posted on November 15, 2011 at 02:18 Permalink

        Ah, didn’t work here. I try again: Search for ... (without spaces) an delete it.

        Reply
      • kamikater
        Posted on November 15, 2011 at 02:21 Permalink

        OK last try: delete div id="toolbar" ... /div (imagine some brackets here)

        Reply
  8. kamikater
    Posted on November 3, 2011 at 19:51 Permalink

    Hi malihu! Great work! I’m trying to combine this “Simple jQuery fullscreen image gallery” with the “jquery thumbnail scroller” from here http://manos.malihu.gr/jquery-thumbnail-scroller

    I need the image gallery with multiple scrollers. Can you give me an advice how to do so? My idea is to rewrite every function and give them the number of the scroller as argument. How would you do that?

    Thanks in advance!

    Reply
  9. MortenMou
    Posted on October 31, 2011 at 17:37 Permalink

    Great script and easy to setup! 😀

    Is there any way to view horizontal images in fullscreen, so it maybe scroll with the mouse cursor if that makes any sense.
    Mouse on top of page= top of image
    Mouse on bottom og page= bottom of image.
    Its the only thing im missing from this.

    Tnx again, great gallery. 🙂

    Reply
    • MortenMou
      Posted on October 31, 2011 at 17:47 Permalink

      I mean Vertical images off cause 🙂

      Reply
    • malihu
      Posted on November 18, 2011 at 14:16 Permalink

      Right now, vertical-portrait images are best viewed in normal view mode. I haven’t implemented image panning to keep script simple. I might give it a try and add image panning functionality in a future version though…

      Reply
  10. Beenvz
    Posted on October 29, 2011 at 16:18 Permalink

    Really, Really, Awesome Work! Congratulations! I was wondering about thelicense of this work, Can I use this in my website? What about the “credits”? Thank you so much, greetings from Argentina.

    Reply
    • malihu
      Posted on November 18, 2011 at 14:10 Permalink

      Yes you can as long as you credit the source. You can attribute the source (e.g. this site and author) in your footer, as a side-note or even as a comment in the code 😉 Thanks!

      Reply
  11. Zeroborg
    Posted on October 26, 2011 at 14:40 Permalink

    Hi Malihu,

    I try to implement your gallery with media queries. The problem is that when i change the dimensions of the thumbs (when resizing the browser window), the scrolling of the thumbs breaks…
    Do u have any solution about resizing the thumbs without breaking the movement with media queries?
    Thanx!

    Reply
  12. tony
    Posted on October 17, 2011 at 17:23 Permalink

    Hi
    malihu

    Nice peice of work here – Its has made a world of difference to the website im currently constructing.

    My problem or question is:

    Is it possible to chnage the default image size for the #bgimg (background image the first image loaded)

    Currently i have :
    $defaultViewMode="normal";
    this obviously sets all images to show 100% of the image in and browser size.
    However it affects ‘all’ images, its there i way to set the Background (#bgimg)
    to a different viewMode?

    i tired :

    $defaultViewModebg="normal";
    and…
    $(window).load(function() { $bgimg.data($defaultViewModebg) });

    obviously this is wrong “/ ….

    please assit thanks 🙂

    Reply
  13. Omar Paz
    Posted on October 14, 2011 at 19:13 Permalink

    Can you use dynamic data for the thumbnails and pictures?

    Reply
  14. Daniel Bachini
    Posted on September 29, 2011 at 12:03 Permalink

    Hi Malihu,
    Sorry to repeat a question but I am just having major difficulty with this problem.

    Is it possible using this in ‘normal’ mode to have margin areas around the image.
    I need to have margins around the page as (top:10,left:160,right:160,bottom:120) that the image will always stop at and not encroach into.

    I have tried with css and altering the code but still cannot get it right.

    Any help would be greatly appreciated.

    Thanks.

    Reply
  15. dan
    Posted on September 28, 2011 at 00:11 Permalink

    Hi, Malihu
    This is the gallery I can’t see in IE9. I tried with the demo and the full image not appear.
    Only happens in my IE9? Thanks.

    Reply
    • malihu
      Posted on September 29, 2011 at 01:25 Permalink

      That’s weird. Have you checked it locally, online or both?

      Reply
      • dan
        Posted on October 4, 2011 at 23:08 Permalink

        Both. With the demo and with the download version.

        Reply
  16. Himanshu Singh
    Posted on September 20, 2011 at 09:31 Permalink

    Hi Malihu,

    This image gallery of yours is amazing piece of work, we hardly see this kind of good work around on internet these days.

    Malihu, i want to use this image gallery in my website but we want the thumbnail strip to appear vertically on the right side of the screen, rather than being on the bottom of the screen in a horizontal format, can you suggest me how to do this without hampering the overall look and functionality of the gallery.

    Thanks in advance,
    Himanshu

    Reply
  17. Daniel Bachini
    Posted on September 18, 2011 at 01:21 Permalink

    Hi malihu,
    Just like everyone else thanks so much for your work, I’m sure it has helped everyone a lot of time.

    My question is I am trying to implement your ‘fullscreen with frame’ post into this solution, only with varied border widths, ie: top=20,left=20,right=20,bottom=60.

    I am actually using landscape and portrait images so should use ‘normal’ mode, but I still need to have these borders so that I can have left and right columns, plus footer area on my page that the image would always stop at and not encroach into.

    Any help would be appreciated, thanks again.

    Reply
    • Daniel Bachini
      Posted on September 28, 2011 at 17:33 Permalink

      Still having difficulty with this one.

      Have tried:

      if ((winHeight / winWidth) > picHeight) {
      $(theItem).attr(“width”,winWidth );
      $(theItem).attr(“height”,picHeight*winWidth – 200);
      } else {
      $(theItem).attr(“height”,winHeight – 200);
      $(theItem).attr(“width”,picWidth*winHeight – 240);
      };

      which gives me the borders, but on window resize it seems to resize the image in not constraint proportions. Any one have any ideas??

      Reply
  18. khurram
    Posted on September 14, 2011 at 16:26 Permalink

    Great Work.

    Thanks Malihu.

    Reply
  19. FEarBG
    Posted on September 9, 2011 at 00:00 Permalink

    Hello…

    I had to change “$defaultViewMode” from “full” to “normal” because I use images with different resolution. But the problem is that I want the startup picture to show in full screen, to fill all the black spots. How can i do that ?

    Thanks in advance…

    Reply
  20. sridhar
    Posted on August 22, 2011 at 17:58 Permalink

    I am a beginner and your gallery is very impressive. We are building a image gallery and are exploring whether we could use it. Meanwhile is it possible to add a search function using the “title” in one corner so that on search it goes to the exact image.

    Many thanks in advance for your reply and updated files.

    Reply
  21. Carla Serena
    Posted on July 19, 2011 at 12:31 Permalink

    Hello Malihu,
    First of all thank you very much for your work is very good!
    My question is can in some way to anchor or id to the large photographs that can come from another page via a link to a specific photograph of the gallery?
    Thanksgiving is a matter of life or death jejej.
    Thank you thank you!!

    Pd. Sorry for my bad English. I’m from Spain

    Reply
    • malihu
      Posted on July 19, 2011 at 14:35 Permalink

      Hi,
      There’s no easy or simple way of accomplishing deep-linking. It would need extra code in either js or php or implementation of ready solutions such as http://www.asual.com/swfaddress/

      Reply
      • Carla Serena
        Posted on July 20, 2011 at 18:45 Permalink

        Thank you very much for your reply I sent you a private email has arrived?
        because I don’t understand what you say.
        And I send you the case real.
        Thank you very much for your time
        regards
        Carla

        Reply
  22. Carl
    Posted on July 14, 2011 at 23:08 Permalink

    Really useful script but im trying to set a cookie for remember what was the last image that i see is theres a way to do this? Could you help me?

    Cheers.

    Reply
  23. Niui
    Posted on July 14, 2011 at 21:00 Permalink

    Dear malihu:

    Again: an awesome job!
    In this time i really need your help, in the example we can see the title tag, but whats happens if you need a description too, if is posible under the title example of this:

    title: DENEBOLA
    Description: This is a really nice image!

    So how can i make this happens?
    im really new in this so if you could help me thinking a very dumb person ill be great 😀
    Thanks for your time!

    Reply
  24. Apaung Anhote
    Posted on June 29, 2011 at 12:35 Permalink

    Hello malihu,

    Indeed, it’s a very great gallery script. I really like it and thanks for your time building this. I have one question. With full screen mode, horizontal images are looks good, but vertical images are not. Is there anyway, we can do vertical images looking good at full screen mode ? Thank you.

    With Regards,

    Reply
    • malihu
      Posted on June 29, 2011 at 13:20 Permalink

      Hi,

      In fullscreen mode the image width is set to be equal to browser window width. Then, the script calculates image height according to its ratio and centers the image vertically.

      Most (if not all) computer monitors are wide-screen, meaning that most landscape images will look great on fullscreen mode since most image data is visible.

      Trying to do the same with most portrait images won’t be that good, simply cause we’re trying to display a long-height image on a wide-screen monitor, which of course results on losing much of the top and bottom image data (only the middle part of the image will be visible). On a 4:3 monitors, the same portrait images would look much better than on 16:9 wide-screens. It all depends on image and monitor screen ratio.

      For this very reason I have implemented a “normal” mode, which is generally better for portrait orientation images, since you get to view all image data. Beyond that, there’s not much else we can do. There’s also an “original” mode which does not scale images at all (only centers them on the screen).

      Other solutions would be to implement scrollbars, image panning on mouse movement, up/down button arrows etc. on portrait images, but all those features stray away from the simplicity of this particular script.

      Reply
      • Apaung Anhote
        Posted on June 29, 2011 at 13:45 Permalink

        Wow, really really thank you for very much quick response. I didn’t expect I will get the very detail break down in few minutes. Yea I was thinking about image panning solutions as well. But the problem is, if we implement image panning inside, it will be clashed with thumbnails show and hide, because when we go down, thumbnails will be automatically appeared as well. So I will forget about doing that.

        But one more question malihu, how easy to integrate your custom content scroller (http://manos.malihu.gr/jquery-custom-content-scroller) for thumbnails ? Because currently thumbnail scrolling looks quite tricky for me as a user. For example, at demo page, when i browse it, i saw the thumbnail photos at the bottom, I want to view the 3rd photo, so I go to thumbnail of third photo, but when my cursor is on to 3rd photo, thumbnails are start moving and my cursor point is on 5th photo. So I have to move my cursor again to 3rd photo. So it’s like quite weird, whenever I try to set cursor on some thumbnails, it’s start moving.

        Any solutions for that ? By reading all the above messages, I know that you are quite busy, so really thank you for taking time to answer my questions.

        And if you don’t mind, are you doing freelancing ? Because I really love all of your works.

        With Regards,

        Reply
    • malihu
      Posted on June 29, 2011 at 14:25 Permalink

      I’ll try to find some time to update the thumbnails scroller in this gallery with the updated version of the plugin (http://manos.malihu.gr/jquery-thumbnail-scroller) which features a couple of additional ways of scrolling the thumbnail strip (including arrow buttons). I’ll post an update when I implement it 🙂

      Yes I do freelancing (thanks for your feedback!).

      PS: I wish day was like 48 hours so I could respond to each comment and create the gazillion scripts in my mind 😛

      Reply
      • Apaung Anhote
        Posted on June 29, 2011 at 16:47 Permalink

        Hi malihu,

        Thanks for your quick response again. Really appreciate it. This is the first time that I get response from the open source developer very quickly :D.

        Yes, if you update the thumbnails scroller, it will be nice. I am really eager to see the updates.

        Since you do freelancing, are you available now? I would like to get your email to contact to you directly. If you don’t want to publicize your personal email address, please kindly email me at [email protected]. Because I am in urgent to get some custom modification for this jquery fullscreen image gallery script. (It will not be too complicated).

        Thanks for your response again. I am looking forward to talk more. Thank you.

        With Regards,

        Reply
  25. Belinda
    Posted on June 28, 2011 at 03:47 Permalink

    Hi and thanks so much for this awesome script!

    I changed it according to Alex’ modification, so now I have autoplay. But I also wanted the images to slide in instead of fading, and when I try to combine both, it doesn’t work anymore.
    Could you please give me a hint, what I do have to modify so that both, the autoplay AND the slide effect works?
    Thanks in advance!!

    Reply
  26. jQuery Examples
    Posted on June 24, 2011 at 23:05 Permalink

    Great example, i have added to my personal list in http://www.ajaxshake.com

    Reply
  27. Jordan
    Posted on June 15, 2011 at 22:20 Permalink

    Hello Malihu,

    I wondered if its possible to have each image slide in from the left or right when clicking instead of fading out then in etc? Similar to flash based sites where images, products etc are sliding in from outside of the screen, across the screen, and then off again, non stop while you press the left and right arrows or click the left and right arrows on the screen.

    Also is it possible to have certain sections of each image clickable using the html imagemap tag?

    Thanks,
    Jordan

    Reply
  28. bali
    Posted on May 19, 2011 at 21:40 Permalink

    firstly, please put some bold on your spam protection…I already write this message 2 times because I forgot to fullfil the spam field. About Drupal, it could also be WordPress even if it’s not a full CMS. To use a pure html script is really difficult in production site: if you have each day to hardcode your site to promote your new pictures it impossible. Thanks for the time where you make me dream for a dynamic full screen gallery…look like I have to continue my research.

    Reply
    • malihu
      Posted on May 20, 2011 at 13:36 Permalink

      I develop in WordPress so I might integrate this script with wp native gallery in the future. I’ll post an update here when I do. Thanks for your suggestion 🙂

      Reply
      • bali
        Posted on May 24, 2011 at 01:42 Permalink

        Hello,

        I am steel searching for a wordpress solution and I found something which is very close of the solution here: http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/

        As you surely know when using nextgen-gallery wordpress plug-in it will create a folder call gallery at the root of the wp-content folder… If you have a look to the codrops solution you will understand very quick why I am speaking about this: Using nextgen plugin keep you the possibility to manage your pictures easily and display them classicly also very easyly (have a look to my blog) Connecting the codrops solution to the right nextgen folders is not that difficult but… the ui is really much more nice on your version and with the auto slide script from Alex it’s almost perfect…only miss the codrops auto scan folder !!!! I am trying to mix your solution with the codrops solution but it’s really not that simple. Any chance you could do something for us?

        The feature should be: your solution + Alex auto scroll + auto scan of the galleria folder and subfolder to collect pictures/thumbs and if not existing create folders, thumbs. Also collecting the nextegen pictures description should be nice…wow…too much? 😉

        Reply
      • malihu
        Posted on May 26, 2011 at 03:20 Permalink

        @bali
        Sounds cool and interesting project but it definitely needs time to build, which I don’t really have these days (way too much work).
        In my view, what you suggest, might be done more easily with a custom php script that’ll scan the folders, fetch the images from filesystem and just echo the html.

        Reply
  29. bali
    Posted on May 19, 2011 at 17:57 Permalink

    ooops…So clicking on the first thumbnail bring the content in the second thumnail bar. I am searchng for a week now a Drupal solution to be able to do a full screen gallery but nothing yet. Any cahnce you can do a drupal module?

    Reply
    • malihu
      Posted on May 19, 2011 at 19:48 Permalink

      Unfortunately I don’t have any knowledge in Drupal bali

      Reply
  30. bali
    Posted on May 19, 2011 at 17:49 Permalink

    Hello,

    It working fine and adding the auto slide code make it better…I am working to insert your
    simple menu at the top and one more needed option : navigate throught different “library”

    let me explain : I need a thumnail bar smaller than the first one to choose a different photo serie ; your existing thumbnail bar will be detail of each serie. So clicking on the first thumbna

    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