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
- Gallery features next/previous image functionality via buttons and keyboard arrows
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
Donating helps greatly in developing and updating free software and running this blog 🙂
Pages: 1 2
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!
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!
*I cannot scroll the images in the gallery – this is what i meant above. Thanks.
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!
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.
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.
As you may have already heard from others. Thanks! Your work is much appreciated. I’m looking forward to your Ver. 2 🙂
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!
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.
Is it possible to put this on a website but still keep your nav bar at the top?
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.
Oh, that is great! Thank you so much.
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
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
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…
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
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
Hi Ron,
Sent me an e-mail with the details.
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 !!!
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.
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 .
Is there a way to slow down thumbnails scrolling? If there are many scrolling is wayyy to fast:)
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)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.
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');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!
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!
hello malihu,
amazing work …:)
How could i put a link in the background image?
thx for help
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
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
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
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 🙂
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.
Thanks a lot for your donation and more importantly, for your kind comments 🙂 I really appreciate your support.
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
Nice Works dude, is there an autoplay option for it?
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
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
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
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.
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 😀
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!!!
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 🙂
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?
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.
I would like to see this feature ..
also if u can add + scroll and when user will press the button Esc – gallery to close