#Light Gallery Plugin for OctoberCMS Create a photo gallery in your website with full screen preview and slideshows.

####Features

• Responsive layout.
• Touch support for mobile devices.
• CSS transitions with jQuery fallback
• Slide and Fade Effects
• Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, Windows Phone.
• Image captions and descriptions.
• Multiple sliders on the same page
• Easily customizable via CSS and Settings
• Lightweight (7kb) (minified)
• Thumbnail support
• Smart image preloading and code optimization.
• Keyboard Navigation for desktop

#How do this work The plugin provides gallery component to build photo gallery with many customization settings, through which you can create your own style galleries. #####Make your own style div wrapper for gallery.

Note: Put {% styles %} and {% scripts %} in your page header, if not there. If you have already included jQuery.js in your page header, you can set jQuery Inject option to no.

#Gallery Component Use the gallery component to display the photo gallery for your images of any size. The component has the following properties:

• Title - Title of the gallery, default value is All Photos.
• jQuery Inject - Whether to inject jQuery to page header or not, default value is Yes.
• Thumbnail Preview - Whether to display a button to show thumbnails on preview, default value is True.
• Image Caption - Enables image captions on preview, default value is True.
• Image Description - Enables image descriptions on preview, default value is True.
• Image Counter - Shows total number of images and index number of current image, default value is True.
• Navigation Controls - Whether to display PREV/NEXT buttons on preview, default value is True.
• Preload Images - Number of preload images before and after the current image, default value is 1.
• Transition - Type of transition between images, default value is Slide.
• Transition Speed - Transition duration (in ms), default value is 500.
• Loop - Allows to go to the other end of the gallery at first/last image, default value is True.
• Autoplay - Enables slideshow autoplay, default value is False.
• Pause Time - Delay (in ms) between transitions in slideshow mode, default value is 2000.
• ESC Close - Whether gallery should be closed when user presses "Esc", default value is True.
• Thumbnail Height - Main thumbnail height in pixels, default value is 70.
• Thumbnail Width - Main thumbnail width in pixels, default value is 100.
• Resizer Mode - How thumbnails should be resized, default value is Auto.

The next example shows usage of gallery component:

title = "Demonstration"
url = "/"
layout = "default"

[gallery]
idGallery = "1"
lang = "All Photos"
jqueryinject = "yes"
thumbnail = "true"
caption = "true"
desc = "true"
counter = "true"
controls = "true"
preload = "1"
mode = "slide"
speed = "500"
loop = "true"
auto = "false"
pause = "2000"
escKey = "true"
height = "70"
width = "100"
==
<!-- Gallery -->
<div class="container-fluid">
	<div class="row">
		<!-- Make your own style div wrapper for gallery -->
		<div class="col-md-6 col-md-offset-3 col-xs-12">
			{% component 'gallery' %}
		</div>
	</div>
</div>
<!-- End Gallery -->