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 3 4 5 6

  1. Natalia
    Posted on March 3, 2013 at 12:04 Permalink

    Hi, Manos!

    Your gallery is simply amazing and beautiful! I was going to install it to my web-site and tested it on all devices including iPhone and iPad, and all was working just fine. But a few days ago new system update from Apple changed it… thumbs scrolling doesn’t work any longer on iPhone and iPad.

    Can you give me any advice on how to change the files to make in working again? Thank you!

    Reply
  2. Max
    Posted on February 17, 2013 at 16:15 Permalink

    Simply amazing gallery!

    I was just wandering whether this is theoretically possible: I have tried to do this but didn’t succeed. Is it possible to add to this gallery the vertical, basically folders?

    When you mouseover any picture in the horizontal scrolling slideshow, the vertical scrolling stripe with photos above it appears. This would be a great solution if you need to insert a lot of photos sorted into galleries or albums.

    Can somebody explain me how I can do that?

    Thanks!

    Reply
  3. Mila
    Posted on February 16, 2013 at 22:37 Permalink

    *I cannot scroll the images in the gallery – this is what i meant above. Thanks.

    Reply
  4. Mila
    Posted on February 16, 2013 at 22:36 Permalink

    Malihu, I cannohe gallery to scroll the images in the gallery if they are bigger than the screen and when maximized. What should I add, so that I can scroll and see the whole image?

    Thank you!

    Reply
  5. Cory
    Posted on February 15, 2013 at 12:07 Permalink

    Hello Malihu,

    Thank you for your contribution to the web design community. This gallery you made is beautiful.

    I just want to point out an issue I noticed where people can easily download all images with just a click using Firefox and videodownloadhelper.

    It’s kind of strange because I thought such programs worked only with flash video but it seems to work on this gallery here.

    I wonder if anyone here knows of any way to prevent such apps as mentioned above from downloading all images that easily.

    As with Malihu, I know you are extremely busy with life but just giving you the heads up!

    Thanks for the contribution and thanks for your time.

    Reply
  6. Marco
    Posted on February 11, 2013 at 13:00 Permalink

    Hi!
    Great gallery!
    I need to add social sharing buttons on each image of the gallery.
    I’m not able to do that!
    Does anyone know how to do it?

    thanks in advance.

    Reply
  7. Melo
    Posted on January 18, 2013 at 00:14 Permalink

    As you may have already heard from others. Thanks! Your work is much appreciated. I’m looking forward to your Ver. 2 🙂

    Reply
  8. Eva
    Posted on January 13, 2013 at 18:28 Permalink

    Hello there.
    I really appreciate your work!
    I would like to use your gallery and i already tried to modify it for my interests but there is one thing i still struggle with.
    I want to place my own content over the gallery – means itself is on the background so i don’t need the thumbnail-frame and would like to delete it.
    How can i make it without crashing the whole thing?
    In addition, when i place new divs he won’t show any styles and texts in them. Only pictures. How is that? Hope you can help me.
    Thank you so much!

    Reply
  9. sergey
    Posted on December 17, 2012 at 04:48 Permalink

    Hello! outstanding work!
    I would like to know where it is possible modify the code to limit the gallery specified sizes.
    Ideally, the maximize button displays a gallery of a given size to full size and back.

    Reply
  10. Anthony
    Posted on December 13, 2012 at 21:53 Permalink

    Is it possible to put this on a website but still keep your nav bar at the top?

    Reply
    • malihu
      Posted on December 13, 2012 at 22:53 Permalink

      Hello,
      I’m currently finishing an update on this gallery which among others, will allow you to place multiple galleries, wherever you want in your page. I’ll publish the new version in a couple of days.

      Reply
      • Anthony
        Posted on December 14, 2012 at 04:22 Permalink

        Oh, that is great! Thank you so much.

        Reply
  11. Mauro
    Posted on November 30, 2012 at 17:52 Permalink

    Hi again Malihu , did I already tell you that your work is wonderful ?

    Thank you so much for those .

    Just a question : the images you use for the demo ( the space images ) where did you take those ? Which type of license they have ? Can I just use it on my web site or video or something?

    Thank you so much for everything.

    Mauro

    Reply
  12. Ron Crockett
    Posted on November 26, 2012 at 20:19 Permalink

    Hi Malihu

    First, The Script is great ..thank you , thank you
    Was crawling the web for days trying to find something with this functionality.

    Second, Seems to be having a issue with the scrolling of the thumbnails and wondered if it was something obvious
    Here is the url:

    http://www.amongthetorrent.com/site4/

    The gallery currently resides under the Environment Design and Game Art tab.

    Third, I would like to add a 4 more different gallery to each slider and wonder if this is possible as my efforts so far have been futile 🙁

    Fourth, Hoping our holiday season goes well Malihu and look forward to your response.

    R

    Reply
    • malihu
      Posted on November 27, 2012 at 15:13 Permalink

      Hello and thanks for your comments.

      You might try removing the 2nd jQuery (1.4) inclusion in your head tag and/or try placing all your scripts at the bottom (before the closing body tag) of your document.

      To have multiple galleries is not that simple at the moment (when I update the gallery I’ll make it very simple). You need to move the gallery script on a separate .js document (which you’ll include in your page) and place each gallery script inside a unique function and then call each function separately. If I get some time I might make a quick modification to it and send it to you but I can’t really promise anything…

      Reply
      • Ron Crockett
        Posted on November 28, 2012 at 09:20 Permalink

        Removed the problematic jQuery (1.4) and the scrolling works.. Thnx Malihu

        Thnx also for pointing me in the right direction with the multiple galleries. Been working on it for the last few days with no avail but learning alot. If there is anything I can do to help expedite the solution to this please let me know.. Thnx again Malihu for the marvelous script and prompt response

        Reply
        • Ron Crockett
          Posted on November 28, 2012 at 20:35 Permalink

          Malihu is there anyway I could pay/ donate to you to expedite the script? I have a client who is most impatient..Please

          Thnx Ron

          Reply
          • malihu
            Posted on November 29, 2012 at 11:59 Permalink

            Hi Ron,
            Sent me an e-mail with the details.

  13. Mauro
    Posted on November 21, 2012 at 13:18 Permalink

    What a wonderful script ! ( what a wonderful site )

    I have quite a problem , anyway

    Is there a way to change the speed of the thumbnails scrolling? I have many item and the movement is really fast. The only way to slow down it’s using smaller icon ?

    Thanks a lot !!!

    Reply
    • malihu
      Posted on November 21, 2012 at 15:42 Permalink

      Not really. At the moment, the scrolling speed is determined by the cursor position, so your mouse movement sets the speed. You can only change the $scrollEasing variable and see how it affects scrolling.

      I’m planning on updating this gallery (in a couple of months) and implement a much more advanced scroller that will have additional ways of scrolling the thumbnails.

      Reply
      • Mauro
        Posted on November 21, 2012 at 16:40 Permalink

        Thanks a lot Malihu for your kindly reply .

        I was just trying that, but the result it seems not really good .

        QUOTE: “I’m planning on updating this gallery (in a couple of months) and implement a much more advanced scroller that will have additional ways of scrolling the thumbnails.”

        This is really great ! A wonderful script can become better ? In Malihu’s house it’s possible !

        Thanks , really; you’re doing a great job .

        Reply
  14. Michael
    Posted on November 15, 2012 at 16:04 Permalink

    Is there a way to slow down thumbnails scrolling? If there are many scrolling is wayyy to fast:)

    Reply
    • Melo
      Posted on January 18, 2013 at 00:08 Permalink

      This is in the config script .. Change 600 to 0 in $scrollEasing

      From:
      $scrollEasing=600; //scroll easing amount (0 for no easing)

      To:
      $scrollEasing=0; //scroll easing amount (0 for no easing)

      Reply
  15. Al
    Posted on November 10, 2012 at 20:50 Permalink

    Hi Malihu,

    Any updates on http://pritesh.info/vivid-photo-2/richard

    I need help with my site or atleast the files that can be uploaded to run it correctly.

    Your help is very much appreciated.

    Reply
  16. andy.emm
    Posted on October 18, 2012 at 02:27 Permalink

    Hey Malihu-

    First of all, I wanted to thank y0u for the great plugin! It’s amazing-

    I have been working with yours and GehanR’s php code to try to get this plugin to work with wordpress, and I’m having a little bit of trouble. I’m currently calling both the javascript and css externally, but for some reason I can’t get things to load up properly?

    The CSS loads up fine in the header with the following code, and when I view the source it looks like the javascript is loading just fine in the footer as well, but the changes aren’t being made to the final site. Any ideas? This is all being done inside the functions.php file.

    function malihu_gallery() { if (!is_admin()) { // Enqueue Malihu Gallery JavaScript wp_register_script('malihu-jquery-image-gallery', get_template_directory_uri(). '/js/malihu-jquery-image-gallery.js', array('jquery'), 1.0, true ); wp_enqueue_script('malihu-jquery-image-gallery'); // Enqueue Malihu Gallery Stylesheet wp_register_style( 'malihu-style', get_template_directory_uri() . '/CSS/malihu_gallery.css', 'all' ); wp_enqueue_style('malihu-style' ); } } add_action('init', 'malihu_gallery');

    Reply
    • andy.emm
      Posted on October 22, 2012 at 07:35 Permalink

      Figured it out! It turns out it was just a jQuery conflict- wrapping the entire code in a noconflict wrapper settled things nicely. Thanks again for the great script Malihu!

      Reply
  17. Jessica
    Posted on October 11, 2012 at 00:11 Permalink

    AWESOME Gallery! I’ve implemented it in the photo section of my website — http://www.DowntownDebauchery.com and it seems to be working just fine in Firefox, but in IE its a different story. If you could PLEASE look over the code and let me know if you can help me get it to work in IE it would be greatly appreciated. Thanks Malihu!

    Reply
  18. Ngaa
    Posted on October 5, 2012 at 18:52 Permalink

    hello malihu,

    amazing work …:)

    How could i put a link in the background image?

    thx for help

    Reply
  19. Ngaa
    Posted on October 5, 2012 at 05:38 Permalink

    Hello

    wonderful gallery :)))

    I have a question:

    it is possible that, in the image description can install an external link?

    if so can … send me the code

    Thank you very much

    Reply
  20. Lovepreet
    Posted on September 17, 2012 at 16:19 Permalink

    Hi malihu,

    Plugin is awesome but i want left and right scrolling. how it is possible

    check the demo here. i like same right and left scrolling.

    http://foundation.zurb.com/docs/orbit.php

    Reply
  21. GehanR
    Posted on September 14, 2012 at 08:28 Permalink

    Hi guys,

    first of all many thanks to the developer for creating this awesome image gallery and posting it up for free, for anyone to use.

    greatly appreciate the effort and the work done!!

    i was adopting it to use in one of my sites, and thought of tweaking it a bit so that it can pick the images to be displayed from a specified folder.

    so, i changed it into a php file and put in a few lines of code that will read a specified folder, file by file and output the correct code inside the html. this way, you only need to change one variable (the folder path) and it will display all images inside that folder in the gallery.

    i also modified the img tag a little bit to use a scaled down version of the same file as the thumbnail image (just coz i was too bored to create another file to use as the thumbnail).

    another modification i’m thinking of doing at the moment is, putting all the image captions into a single text file and then have the script display it line by line for each image.

    hope this helps someone out there 🙂

    cheers,

    you can find the source files here:

    https://dl.dropbox.com/u/16847140/fsbkg_upload.zip

    Reply
    • malihu
      Posted on September 14, 2012 at 21:15 Permalink

      Hey, this is awesome!
      I want so much to add some back-end functionality in the gallery but it seems I never have enough time to do it. Thanks a ton for posting this 🙂

      Reply
      • d@niel keeney
        Posted on October 1, 2012 at 23:00 Permalink

        Thanks, Malihu, aren’t nearly enough — whether by great wisdom despite youth, or the kind-heartedness that experience too often hides, you’ve given a great deal of your time to helping others and, more importantly? Appreciating the efforts of others.

        I’ve probably less than you should already have comin’ in, and money ain’t as valuable as what I’m hopin’ finds you, but I’m gonna send you some of it anyhow.

        Good folks never seem to have enough time, but I’ll look into givin’ a bit of my own to “… add some back-end functionality” to this gallery, ’cause it’s far easier/better to build upon solid foundation(s) than to try ‘n fix what shoulda never been done.

        And, the price is *perfect* for this dirt-poor poor-dirt farmboy.

        Reply
        • malihu
          Posted on October 1, 2012 at 23:34 Permalink

          Thanks a lot for your donation and more importantly, for your kind comments 🙂 I really appreciate your support.

          Reply
  22. Ricardo
    Posted on September 12, 2012 at 02:14 Permalink

    Brilliant your very nice gallery, it hears that tendria that to modify in order that on having given click in a thumbail I change to another page, as if it was using the thumbail of menu

    Reply
  23. Majed
    Posted on September 10, 2012 at 15:14 Permalink

    Nice Works dude, is there an autoplay option for it?

    Reply
  24. keanneboi
    Posted on September 9, 2012 at 13:59 Permalink

    I tried to add another Div just like the title but the content of this div doesn’t change even if you click on the different thumbnails. My problem is the div doesn’t show. How can I add a div? thanks

    Reply
  25. bart
    Posted on September 2, 2012 at 13:10 Permalink

    Hi, Great script! I have a problem though, when I don’t give a title attribute to a certain image (as I don’t want to display a title with every image), it displays the title of the previous image, which has a title. Is there a way to fix this?

    Thanks in advance

    Kind regards

    Bart

    Reply
  26. Heather
    Posted on August 27, 2012 at 04:33 Permalink

    Hi!
    Thanks a lot for the fullscreen gallery plugin, I am working on a site for a photographer and he is really happy with how this will showcase his work. I know you are super busy, but I am having trouble getting the next and previous buttons to move beyond the first and 5th image and not sure where I went wrong. I am also at a loss for the jQuery easing of the thumbnails on the iOS devices and wondered if you might have a suggestion on how to get that effect on them? Right now you can’t scroll past the last thumbnail.
    Thanks so much!
    Heather

    Reply
  27. vipul
    Posted on August 22, 2012 at 13:17 Permalink

    hi

    This is an amazing slider. but I wonder how we could add a transparent text description below the full screen image.

    if you could help me out.

    thanx.

    Reply
  28. Carsten
    Posted on August 22, 2012 at 00:36 Permalink

    Hello.
    Thanks for this jQuery gallery. I was wondering how to change the way mousemove event works on the thumbscroller. Instead of jumping to the position in the slideshow comparing to the percentage, then if would be very nifty if when the cursor nears the left edge of the screen, then the thumbsscroller srolls to the left and vice versa…
    This would make it possible to use this script with large imagesets…

    Any ideas how to implement this? And was it even understandable 😀

    Reply
  29. Jeferson
    Posted on August 21, 2012 at 04:59 Permalink

    Hey man, I’ve became great fan of yours, I’ve used the thumbnail scroller and now I’m playing with this gallery.
    Tell me something, I’m trying to embed videos (youtube/vimeo/etc) in the gallery so it will reproduce the videos in fullscreen, how awesome would be that huh?! But I tried some things and couldn’t get it to work, any thoughts?

    Thanks and congrats on your work!!!

    Reply
    • malihu
      Posted on August 21, 2012 at 13:21 Permalink

      Hello,

      This is strictly an image gallery and doesn’t support other media (video, audio etc.). Loading videos would require a totally different script so there’s no quick or easy way of doing it.

      I’ll definitely create a video gallery in the future or maybe implement video support in this one.

      Thanks for your comments and feedback 🙂

      Reply
  30. joanna
    Posted on August 15, 2012 at 08:46 Permalink

    thanks! I’m a beginner at this so I was wondering if I put this on my website how do I add a [x] button so that the user can close the slideshow?

    Reply
    • malihu
      Posted on August 15, 2012 at 14:50 Permalink

      This gallery is a standalone script so it doesn’t “close” (as there’s nothing below it). You can normally navigate to a previous/next page using browser’s back/forward buttons.

      Reply
      • Dragos N.
        Posted on May 29, 2013 at 10:14 Permalink

        I would like to see this feature ..
        also if u can add + scroll and when user will press the button Esc – gallery to close

        Reply

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