/oc-rjgallery-plugin

Create photo gallery for your website with responsive design.

Primary LanguagePHP

#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 -->