close panorama

Responsive Scrollable Grid Photo Gallery rsgp_gallery.xml for HTML5 & Flash
by Maël Bathfield - contact@maelbathfield.net

Description

A photo gallery to smartly show 'classic' photographies.

The idea that led to the conception of this Responsive Scrollable Grid Photo Gallery (RSGP Gallery) was to go over the classical "thumbnails + one-photo display" layout.
At the opening of the gallery, all images are arranged in a responsive grid (with a minimum of 3 columns), and then a click on a picture changes the gallery into a one column scrollable layout displaying enlarged images. At any time, clicking again on an enlarged image permits to go back to the initial grid gallery.

Features

  • Can handle any size and ratio of source images (automatic downscaling).
    The images are never upscaled.
  • Dual source images : possibility to use smaller images for mobile devices and larger images for nice display on large desktop screen.
    • Images for mobile must have the suffix '_s' (i.e. if url is 'img/myimage.jpg', a smaller image named 'myimage_s.jpg' must be in the same 'img' folder).
    • Automatic check for existence of smaller images.
    • If they do not exist, source images cannot be too large/heavy for avoiding memory overcharge on somes mobile devices.
  • Preloading process of images with loading progress bar for each gallery.
  • Various orientation pictures can be used in a same gallery.
  • Easy integration in virtual tour (see section 'Syntax / XML Usage Example' above).
  • Choice for the arrangement of grid gallery : fixed number of columns or fixed width for images.
  • Responsive layout : in 'fixed width' mode, if it is not possible to display at least 3 columns, it's switch automatically in 'fixed number of columns' mode (with 3 columns).
    In 'fixed number of columns' mode, the number of columns is automatically decreased by 2 unit on mobile devices.
  • Max. 999 images per gallery; Max. 99 galleries per pano/scene.
  • Independant parameters for each gallery : arrangement mode in the grid gallery, background color, size and color of images boder, display or not of various titles.
  • Double image title management (short_title/second_title).
  • Helping messages (displayed once).
  • Integrated slideshow function (automatic scrolling).
  • Minimal design option for more space to display enlarged images.
  • Testing Comboboxes: change the arrangement of the images before choosing your prefered parameters.
    [After changing the displaying mode (with the left combobox), confirm change by selecting a new value with the right combobox (displaying 'Row number' or 'Max image width')]

Screenshots

Initial grid gallery with landscape photos in 5 columns.

Enlarged image in the one column scrollable layout.

Initial grid gallery with portrait photos in 5 columns.

Initial grid gallery with various images ratios in 6 columns (minimal_design="true").

Buy/Download

  • The plugin price is €40
  • The zip-archive 1 includes the ready-to-use simple example (including reduced images) and off-line documentation (~ 1 Mo).
  • The zip-archive 2 includes a more complex full example (including reduced images), and off-line documentation (~ 2.4 Mo).

After payment, I will send the 2 archive files (with a link to download 17.6 Mo of full-size images from the on-line complex example) to your e-mail within 24 hours.

Plugin Installation

  • Simply copy all the files included in the 'plugins' folder of the simple example into the 'plugins' folder of your tour.
  • Among these files, there are the following free plugins from krpano-1.19-pr14: scrollarea.js/.swf, showtext.xml, combobox.xml.
  • There is also the free plugin coded by Jordi Vallverdú (version of February 13th 2018): file_exist.xml
  • Take care to do not overwrite these files if you have some more recent ones in your 'plugins' folder.

Syntax / XML Usage

First, include the files plugin for the RSGP_gallery:
<include url="%SWFPATH%/plugins/rsgp_gallery.xml"/>   
<include url="%SWFPATH%/plugins/rsgp_gallery_style.xml"/> 

Optionally, add some global settings, change and/or translate them:
<gallery_settings slideshow_time="4"  />
                                  
<gallery_settings display_combobox="true"  /> 
                      
<gallery_settings help_message1="Click on an image to enlarge it"
                  help_message2="Sweep screen up/down to change image"
                  help_message3="Click again on images to come back to gallery"
                  loading_text="Loading images..."
                  slideshow_text="Play / Stop Slideshow"/>  

Then, create a button to open the gallery by assigning the atttribute style 'gallery_button_style' and the atttribute galleryname 'galleryX' to a LAYER, e.g.:
<layer name="gallery_button1" url="gallery_icon.png"
    style="gallery_button_style|custom_style"  galleryname="gallery1" />  

or to a HOTSPOT, e.g.:
<hotspot name="gallery_hotspot1" url="gallery_icon.png"
    style="gallery_button_style|custom_style" galleryname="gallery1" />  

Finally, add the gallery data (attribute values of the simple example, see below):
<gallery name="gallery1"

         ratio="square" mode="fixedrow"
         maxlength="300" column_nbr="5"
         title="Animals photos"
         bgcolor="0x00000" border_size="1" border_color="0xFFFFFF"
         display_title="true" display_image_title="both" display_preload="true"
         minimal_design="false" display_slideshow="true" >  

<img name="img1" url="img/A1.jpg" short_title="Horse" second_title="Photo by..." />
<img name="img2" url="img/A2.jpg" short_title="Squirrel" second_title="Photo by..." />
<img name="img3" url="img/A3.jpg" short_title="Fox" second_title="Photo by..." />
<img name="img4" url="img/A4.jpg" short_title="Turtle" second_title="Photo by..." />
 ...
</gallery>  

or with minimal attributes to have the default layout:
<gallery name="gallery1"

<img name="img1" url="img/A1.jpg"/>
<img name="img2" url="img/A2.jpg"/>
<img name="img3" url="img/A3.jpg"/>
<img name="img4" url="img/A4.jpg"/>
 ...
</gallery>  

Plugin Attributes

Most of the plugin attributes are optional, but they allow a quite advanced customization for the final layout of the galleries.

GLOBAL ATTRIBUTES for galleries:
  • gallery_settings.slideshow_time
    • Timer in second for the slideshow function.
    • Default value = 4 sec.
  • gallery_settings.display_combobox  (optional)
    • true : display the Testing Comboboxes that allow to change gallery displaying mode and row number/maxlength.
    • Default = false
    • After changing the displaying mode (with the left combobox), confirm change by selecting a new value with the right combobox (displaying 'Row number' or 'Max image width').
    • The Testing Comboboxes are never display on mobile devices.
  • gallery_settings.help_messageX  (optional)
    • 3 instruction messages for shortly explaining the interface, they are displayed only once.
    • Change and/or translate them as you want (default messages in rsgp_gallery_style.xml).
    • Leave attributes empty for no display.
  • gallery_settings.loading_text  (optional)
    • Text displayed on the gallery button when loading the images of the corresponding gallery.
    • Change and/or translate it as you want (default message in rsgp_gallery_style.xml).
    • Leave attribute empty for no display.
  • gallery_settings.slideshow_text  (optional)
    • Text displayed when mouse is onhover the slideshow button.
    • Change and/or translate it as you want (default message in rsgp_gallery_style.xml).
    • Leave attribute empty for no display.

SPECIFIC ATTRIBUTES for each gallery:
  • gallery.name
    • IMPORTANT : name of gallery must be 'galleryX' , X being a increasing number.
    • For virtual tour, THE FIRST NUMBER MUST BE 1 within each scene.
  • gallery.ratio  (optional)
    • Fix the aspect ratio width/height of the rectangle of the grid, that influence empty space between images: using the adequate ratio according to images ratio limits empty spaces, that allows to display more images at the same time.
    • Possible value = panoramic / landscape / portrait / verticalpano / square.
    • panoramic: ratio = 2, suitable for a gallery of panoramic images.
    • landscape: ratio = 1.6, suitable for a gallery of images in landscape orientation.
    • portrait: ratio = 0.75, suitable for a gallery of images in portrait orientation.
    • verticalpano: ratio = 0.5, suitable for a gallery of vertical panoramic images.
    • square: ratio = 1, suitable for a gallery of square images or for various orientation / ratio.
    • Default = square
  • gallery.mode  (optional)
    • fixedlength: use the attribute maxlength to build the grid.
    • Note: with mode="fixedlength", if it is not possible to display at least 3 columns, it's switch automatically in mode="fixedrow" (with column_nbr="3").
    • fixedrow: use the attribute column_nbr to build the grid.
    • Default = fixedrow
  • gallery.maxlength  (almost optional)
    • Maximun width in pixels for images in the grid gallery. If this value is greater than source image width, the latter is chosen.
    • Required attribute if mode="fixedlength".
    • Skipped if mode="fixedrow".
  • gallery.column_nbr  (optional)
    • Fixed number of columns in the grid gallery for desktop/tablet devices, minimum value is 3.
    • This number is automatically decreased by 2 unit on mobile devices.
    • Default value = 5.
    • Skipped if mode="fixedlength".
  • gallery.title  (optional)
    • Gallery title displayed when mouse is onhover the corresponding gallery button.
    • Also displayed on the left top of the gallery if display_title="true" and minimal_design="false".
  • gallery.bgcolor  (optional)
    • Background color of the gallery.
    • Default = 0x000000 (black)
  • gallery.border_size  (optional)
    • Size in pixels of the border of the images.
    • Max value is 10 pixels; min value is 0.
    • Default = 0 (i.e. no border)
  • gallery.border_color  (optional)
    • Color of the border of the images.
    • Default = 0x000000 (black)
  • gallery.display_title  (optional)
    • true : display title of the gallery on the left top of the gallery when opened.
    • Attribute skipped if minimal_design="true".
    • Default = false
  • gallery.display_image_title  (optional)
    • Possible value = true / both / false.
    • true : permanently display short_titles on bottom of the image in the grid gallery.
    • both : display also short_titles in the 'one column scrollable' gallery.
    • false: do not permanently display short_titles, but they are displayed when mouse is onhover the image (or ontouch on mobile devices).
    • Default = true
  • gallery.display_preload  (optional)
    • true : display preload message (see global attribute 'loading_text') and progress bar on gallery opening buttons.
    • Note1 : the process of images preload cannot be disabled.
    • Note2 : The gallery opening buttons are not enabled/clickable until the preloading process is done, so if images are relatively heavy and the preloading process takes some time, set display_preload="true" is recommended.
    • Default = false
  • gallery.minimal_design  (optional)
    • true : do not display gallery title, images titles nor image number in the 'one column scrollable' gallery, and images are displayed a little bit larger.
    • Default = false
  • gallery.display_slideshow  (optional)
    • true : display a play button on the left to launch a slideshow.
    • See global attribute 'slideshow_time' for timer value.
    • Default = false

IMAGES ATTRIBUTES:
  • img.name
    • IMPORTANT : Name of image must be 'imgX' , X being a increasing number.
    • THE FIRST NUMBER MUST BE 1 within each gallery.
  • img.url
    • Path of the image file (relative to the pano/tour.xml in the examples).
    • Images for mobile must have the suffix '_s' (i.e. if url is 'img/myimage.jpg', a smaller image named 'myimage_s.jpg' must be in the same 'img' folder).
  • img.short_title  (optional)
    • Image title displayed on the image in the grid gallery (if display_image_title="true").
    • It is also displayed in the 'one column scrollable' gallery if display_image_title="both".
  • img.second_title  (optional)
    • Image title/comment displayed only in the 'one image scrollable' gallery

OTHER POSSIBLE CUSTOMIZATIONS: modify the content of the 'rsgp_gallery_style.xml' file.

Example

CLICK TO VIEW SIMPLE EXAMPLE

See the RSGP Gallery Plugin Thread in the Forum for a more complex example with multiple galleries integrated in a virtual tour.