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
This is a fantastic jQuery fullscreen image gallery! I really appreciate the detailed explanation of the view modes like normal, full, and original. It’s great to see such a well-documented and free resource under the MIT license. I’ve been working on a project that involves dynamic image fetching and was looking for a robust way to display galleries. While integrating the nano banana pro api for backend image management, I found that your thumbnail scrolling script is exactly what I need to provide a smooth user experience. The keyboard navigation is a nice touch as well. Thanks for sharing this and for all the updates you’ve provided over the years!