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
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!
I would LOVE an auto slide option! And I will definitely buy you a coffee 🙂 Amazing work you’re doing here! Thanks a million!
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?
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
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.
hi this is a awsome work…. but i failed to implement the auto scroll the big image, can help me pls
I try everything and nothing sucessfull 🙁
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
Removing the image resizing button is easy. Just search for
...an delete it.Ah, didn’t work here. I try again: Search for
...(without spaces) an delete it.OK last try: delete
div id="toolbar" ... /div(imagine some brackets here)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!
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. 🙂
I mean Vertical images off cause 🙂
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…
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.
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!
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!
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 🙂
Can you use dynamic data for the thumbnails and pictures?
Sure
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.
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.
That’s weird. Have you checked it locally, online or both?
Both. With the demo and with the download version.
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
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.
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??
Great Work.
Thanks Malihu.
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…
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.
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
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/
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
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.
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!
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,
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.
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,
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 😛
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,
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!!
Great example, i have added to my personal list in http://www.ajaxshake.com
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
Hello Jordan,
A quick modification of the script with the behavior you’ve described:
http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery-slidingEffect.html
Image-maps cannot implemented on the images of this gallery, unless you apply them dynamically via js every time a new image loads (which is probably a bit complicated since among others, images scale according to browser window).
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.
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 🙂
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? 😉
@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.
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?
Unfortunately I don’t have any knowledge in Drupal bali
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