Product support

Get help in the plugin support forum.


Photo Gallery

Add photo gallery in your website with full screen preview and slideshow. Feel free to use with any browser on any device.


  • Responsive layout.
  • Touch support for mobile devices.
  • Zoom & Fullscreen
  • CSS transitions with jQuery fallback
  • 32 Transition Effects
  • Download images from gallery
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, Windows Phone.
  • Image captions and descriptions.
  • Multiple galleries 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

Like this plugin?

Give a like, if you found this plugin helpful, you can help me to make this plugin more improved by giving your suggestions and comments.

Full screen preview with thumbnail navigator

Rjgallery Plugin

Create a photo gallery in your website with full screen preview and slideshows.

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 600.
  • 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"

idGallery = "1"
lang = "All Photos"
jqueryinject = "yes"
thumbnail = "true"
caption = "true"
desc = "true"
counter = "true"
controls = "true"
preload = "1"
mode = "lg-slide"
speed = "600"
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' %}
<!-- End Gallery -->
  • Found the plugin useful on 13 Jun, 2022

    Checklist after installing the plugin 1) Registration of the plugin in the CMS 2) Add a component to your post {% component 'galleryID' galleryID=post.rjgallery %} 3) Wrap it in <div>. 4) Declare the gallery class 5) Declare the gallery class \plugins\raviraj\rjgallery\components\gallery\default.htm

    You're great!

  • Found the plugin not useful on 18 May, 2019

    Hi, Non-functional plugin, because:

    • I created categories, but they can't be listed and no album index images,
    • Categories and albums are not translate, captions are also displayed in one language. cannot be used on multilang pages (English, Deutsch, stc.)
    • displaying the list of images cannot be edited individually, only the size of the index image.

  • Found the plugin useful on 8 Apr, 2019

    Everything fine except, Plugin completely stops working after forking the component's html.

  • Found the plugin useful on 22 Feb, 2018

    Great plugin. But how do I add a thumbnail to gallery list? Now I only have a title.

  • Found the plugin useful on 20 Aug, 2017

    Hey, great plugin!

    I have one question, is there a possibility to sort by date for the gallerieList?


  • Found the plugin useful on 31 Jul, 2017


  • Found the plugin useful on 20 Jun, 2016

    Does exactly what it promises. Easy integration, responsize and costumizable. 10/10 would recommend.

  • Found the plugin useful on 30 May, 2016

    Easy integration and usage. Fully responsive. Great!

  • Found the plugin useful on 27 Apr, 2016

    Looks great! Do you know how I could move the gallery create/upload functionality to front-end pages?


Page snippets registered

Jul 21, 2017


Hot fix asset loading

Jul 06, 2017


Light gallery upgraded to v1.4, Several code optimizations

Jul 06, 2017


Add Category database and Category model.

Mar 08, 2017


Add slug and description in gallery model.

Mar 08, 2017


Fix config path for OctoberCMS build 324

Jul 08, 2016


Fix deleting galleries

Apr 08, 2016


Add CS locale

Sep 14, 2015


Add permissions management

Sep 14, 2015


Added compatibility for latest version of OctoberCMS.

Mar 02, 2015


Minor fix.

Jan 13, 2015


Multiple language support added.

Jan 13, 2015


Can now specify thumbnail resizer mode

Sep 04, 2014


Minor bug fix

Aug 19, 2014


jQuery inject option added to component options

Aug 19, 2014


First version of RjGallary

Aug 15, 2014