jQuery Image Gallery with Thumbnails and Zoom

Category: Gallery | December 7, 2019
jQuery Image Gallery with Thumbnails and Zoom
Author: LCweb-ita
Official Page: Go to Website
Last Update:January 5, 2020
License:MIT

The LC-Lightbox is a lightweight jQuery image Gallery with thumbnails and Zoom plugin. It comes with awesome and multiple features.

Some of its features include thumbnails, touch-enabled, Zoom, slideshow, sliding animations and much more.

The gallery design is pretty much neat and clean. It builds to focused on content and totally responsive. Additionally, it adaptive and extremely flexible with minimum details.

Due to its extension options, you can easily customize it and Enable/Disable any of its features. All you need to define the settings in its Javascript optoins.

Moreover, the plugin overall weight is only 46KB (JS) + 34KB (CSS) that means its super lightweight and will not slow down your webpage.

Main features Of Thumbnails Gallery

  • Initialized Slideshow Elements manually or automatically.
  • It has the Thumbnails Navigation with customizable sizes and optional data-type icon.
  • Social share icons with WhatsApp option.
  • You can add content such as title, description and author name.
  • The “right-click” protection including in the photo gallery.
  • The Thumbnail Gallery comes with a fullscreen mode option.
  • It also has a direct download option without requiring PHP scripts.
  • And many more ….

How to Use Image Gallery with Thumbnails and Zoom

To getting started with jQuery Responsive Image Gallery with Thumbnails you need to load the jQuery, AlloyFinger and other necessary assets into your HTML page.

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- AlloyFinger JS -->
<script src="lib/AlloyFinger/alloy_finger.min.js"></script>

<!-- LC Lightbox Js -->
<script src="js/lc_lightbox.lite.js"></script>

After that, you need to add the CSS’s assets. There are two CSS files that you need to add to your website. The first one will handle the design layout for the lightbox and the other one apply the skins.

<!-- LC Lightbox CSS -->
<link rel="stylesheet" href="css/lc_lightbox.css" />

<!-- Skin CSS -->
<link rel="stylesheet" href="skins/minimal.css" />

Now we need to create the HTML structure for the image gallery. Simply define an anchor link with a class name elem and add the image path inside the “href”.

There are different data-attribute that allow you to customize the gallery.  You can add the heading in the title attribute.

For the description you can use the data-lcl-txt attribute. Similar you can add the author name in the data-lcl-author attribute.  If you want to show the thumbnails then you can define the path inside the data-lcl-thumb attribute.

<a class="elem" href="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?dpr=1&auto=format&fit=crop&w=2000&q=80&cs=tinysrgb" title="image 1" data-lcl-txt="lorem ipsum dolor sit amet" data-lcl-author="someone" data-lcl-thumb="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?dpr=1&auto=format&fit=crop&w=150&q=80&cs=tinysrgb">
  <span style="background-image: url(https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?dpr=1&auto=format&fit=crop&w=400&q=80&cs=tinysrgb);"></span>
</a>
<a class="elem" href="https://images.unsplash.com/photo-1502082553048-f009c37129b9?dpr=1&auto=format&fit=crop&w=2000&q=80&cs=tinysrgb" title="image 2" data-lcl-txt="lorem ipsum dolor sit amet" data-lcl-author="someone" data-lcl-thumb="https://images.unsplash.com/photo-1502082553048-f009c37129b9?dpr=1&auto=format&fit=crop&w=150&q=80&cs=tinysrgb">
  <span style="background-image: url(https://images.unsplash.com/photo-1502082553048-f009c37129b9?dpr=1&auto=format&fit=crop&w=400&q=80&cs=tinysrgb);"></span>
</a>
<a class="elem" href="https://images.unsplash.com/photo-1442850473887-0fb77cd0b337?dpr=1&auto=format&fit=crop&w=2000&q=80&cs=tinysrgb" title="image 3" data-lcl-txt="lorem ipsum dolor sit amet" data-lcl-author="someone" data-lcl-thumb="https://images.unsplash.com/photo-1442850473887-0fb77cd0b337?dpr=1&auto=format&fit=crop&w=150&q=80&cs=tinysrgb">
  <span style="background-image: url(https://images.unsplash.com/photo-1442850473887-0fb77cd0b337?dpr=1&auto=format&fit=crop&w=400&q=80&cs=tinysrgb);"></span>
</a>

<a class="elem" href="https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?dpr=1&auto=format&fit=crop&w=2000&q=80&cs=tinysrgb" title="image 4" data-lcl-txt="lorem ipsum dolor sit amet" data-lcl-author="someone" data-lcl-thumb="https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?dpr=1&auto=format&fit=crop&w=150&q=80&cs=tinysrgb">
  <span style="background-image: url(https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?dpr=1&auto=format&fit=crop&w=400&q=80&cs=tinysrgb);"></span>
</a>
<a class="elem" href="https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?dpr=1&auto=format&fit=crop&w=2000&q=80&cs=tinysrgb" title="image 5" data-lcl-txt="lorem ipsum dolor sit amet" data-lcl-author="someone" data-lcl-thumb="https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?dpr=1&auto=format&fit=crop&w=150&q=80&cs=tinysrgb">
  <span style="background-image: url(https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?dpr=1&auto=format&fit=crop&w=400&q=80&cs=tinysrgb);"></span>
</a>
<a class="elem" href="https://images.unsplash.com/photo-1482192505345-5655af888cc4?dpr=1&auto=format&fit=crop&w=2000&q=80&cs=tinysrgb" title="image 6" data-lcl-txt="lorem ipsum dolor sit amet" data-lcl-author="someone" data-lcl-thumb="https://images.unsplash.com/photo-1482192505345-5655af888cc4?dpr=1&auto=format&fit=crop&w=150&q=80&cs=tinysrgb">
  <span style="background-image: url(https://images.unsplash.com/photo-1482192505345-5655af888cc4?dpr=1&auto=format&fit=crop&w=400&q=80&cs=tinysrgb);"></span>
</a>

The Javascript

Initialize the plugin in jQuery document ready function to activate the image gallery with thumbnails and zoom.

<script type="text/javascript">
$(document).ready(function(e) {
// live handler
lc_lightbox('.elem', {
	wrap_class: 'lcl_fade_oc',
	gallery : true,	
	thumb_attr: 'data-lcl-thumb', 
	
	skin: 'minimal',
	radius: 0,
	padding	: 0,
	border_w: 0,
});	
});
</script>

LC Lightbox (jQuery image Gallery with thumbnails) Options

The following are all available options (and callback functions) to fully customize the LC Lightbox.

lc_lightbox('.elem', {
gallery			: true, // whether to display a single element or compose a gallery
gallery_hook	: 'rel', // attribute grouping elements - use false to create a gallery with all fetched elements 
live_elements	: true, // if a selector is found, set true to handle automatically DOM changes
preload_all		: false, // whether to preload all images on document ready
global_type		: 'image',

src_attr		: 'href', // attribute containing element's source
title_attr		: 'title', // attribute containing the title - is possible to specify a selector with this syntax: "> .selector" or "> span" 
txt_attr		: 'data-lcl-txt', // attribute containing the description - is possible to specify a selector with this syntax: "> .selector" or "> span" 
author_attr		: 'data-lcl-author', // attribute containing the author - is possible to specify a selector with this syntax: "> .selector" or "> span" 

slideshow		: true, // whether to enable slideshow
open_close_time	: 400, // animation duration for lightbox opening and closing / 1000 = 1sec
ol_time_diff	: 100, // overlay's animation advance (on opening) and delay (on close) to window / 1000 = sec
fading_time		: 80, // elements fading animation duration in millisecods / 1000 = 1sec
animation_time	: 250, // sizing animation duration in millisecods / 1000 = 1sec
slideshow_time	: 6000, // slideshow interval duration in milliseconds / 1000 = 1sec
autoplay		: false, // autoplay slideshow - bool
counter			: false, // whether to display elements counter
progressbar		: true, // whether to display a progressbar when slideshow runs
carousel 		: true, // whether to create a non-stop pagination cycling elements

max_width		: '93%', // Lightbox maximum width. Use a responsive percent value or an integer for static pixel value
max_height		: '93%', // Lightbox maximum height. Use a responsive percent value or an integer for static pixel value
wrap_padding	: false, // set lightbox wrapping padding. Useful to maintain spaces using px max-sizes. Use a CSS value (string)
ol_opacity		: 0.7, // overlay opacity / value between 0 and 1
ol_color		: '#111', // background color of the overlay
ol_pattern		: false, // overlay patterns - insert the pattern name or false
border_w		: 0, // width of the lightbox border in pixels 
border_col		: '#ddd', // color of the lightbox border
padding			: 0, // width of the lightbox padding in pixels
radius			: 0, // lightbox border radius in pixels 
shadow			: true, // whether to apply a shadow around lightbox window
remove_scrollbar: true, // whether to hide page's vertical scroller

wrap_class		: '', // custom classes added to wrapper - for custom styling/tracking
skin			: 'light', // light / dark / custom
data_position	: 'over', // over / under / lside / rside	
cmd_position	: 'inner', // inner / outer	
ins_close_pos	: 'normal', // set closing button position for inner commands - normal/corner	
nav_btn_pos		: 'normal', // set arrows and play/pause position - normal/middle

txt_hidden		: 500, // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side)
show_title		: true, // bool / whether to display titles
show_descr		: true, // bool / whether to display descriptions
show_author		: true, // bool / whether to display authors

thumbs_nav		: true, // enables thumbnails navigation (requires elements poster or images)
tn_icons		: true, // print type icons on thumbs if types are mixed
tn_hidden		: 500, // whether to hide thumbs nav on lightbox opening - bool or int (related to browser's smaller side)
thumbs_w		: 110, // width of the thumbs for the standard lightbox
thumbs_h		: 110, // height of the thumbs for the standard lightbox
thumb_attr		: false, // attribute containing thumb URL to use or false to use thumbs maker
thumbs_maker_url: false, // script baseurl to create thumbnails (use src=%URL% w=%W% h=%H%)

fullscreen		: false, // Allow the user to expand a resized image. true/false
fs_img_behavior	: 'fit', // resize mode of the fullscreen image - smart/fit/fill
fs_only			: 500, // when directly open in fullscreen mode - bool or int (related to browser's smaller side)
browser_fs_mode : true, // whether to trigger or nor browser fullscreen mode

socials			: false, // bool
fb_direct_share	: false, // bool / whether to use direct FB contents share (requires APP ID to be specified)  

txt_toggle_cmd	: true, // bool / allow text hiding
download		: false, // bool / whether to add download button
touchswipe		: true, // bool / Allow touch interactions for mobile (requires AlloyFinger)
mousewheel		: true, // bool / Allow elements navigation with mousewheel
modal			: false, // enable modal mode (no closing on overlay click)
rclick_prevent	: false, // whether to avoid right click on lightbox

elems_parsed 	: function() {},
html_is_ready 	: function() {},
on_open			: function() {},
on_elem_switch	: function() {},
slideshow_start	: function() {},
slideshow_end	: function() {},
on_fs_enter		: function() {},
on_fs_exit		: function() {},
on_close		: function() {},
});

 

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.