ProteiStyl' Photo Gallery pspg_gallery.xml HTML5 only

by Maël Bathfield - contact@maelbathfield.net

Description

Make customized photo galleries as a god would (namely Proteus)

ProteiStyl’ Photo Gallery is a html5 plugin for krpano designed for displaying ‘classic’ photos into a virtual tour.

The ‘philosophy’ of this plugin is to go over the classical "thumbnails + one-photo display" in a single layout. The plugin offers two displaying modes: a grid gallery, which displays only thumbnails but gives an overall vision of the pictures of the gallery, and a scroll gallery, which displays only enlarged images. Switching to a displaying mode to another is done by clicking on the pictures (or on the back button if zooming function is enabled).
Another exclusive feature of this plugin is the possibility to customize almost all elements displayed on screen. Indeed, very different gallery appearances/ambiances can be easily created by using the graphical EDITOR, which directly applies any changes done on the parameters.

Features

• Responsive layout for both grid gallery and scroll gallery.
• Advanced customization of the layout (positions, relative sizes, colors, opacity and fonts for almost all elements).
• Possibility to choose your preferred customization parameters by using an user-friendly graphical EDITOR. The EDITOR will also take care of the generation of the corresponding xml.
• Independent parameters for each gallery: very different gallery layouts can be used in the same tour.
• Can handle any size and ratio of source images (automatic downscaling). The images are (by default) never upscaled.
• Various orientation/ratio pictures can be used in a same gallery. Crop functionality can be used to make orientation/ratio uniform.
• 4 levels of resolution for source JPG/PNG/GIF images can be used: normal images (.ext) are used for displaying enlarged images in the scroll gallery, thumbnails (_s.ext) are used for displaying images in the grid gallery.
  On mobile devices, smaller images for mobile (_m.ext) are used for displaying enlarged images in the scroll gallery, thumbnails for mobile (_ms.ext) are used for displaying images in the grid gallery.
• Automatic generation of these 4 levels of resolution via a DROPLET.
• Automatic checking for the existence of thumbnails and smaller images (if they do not exist, normal images are used instead). This check can be skipped.
• Progressive (pre)loading process of images (with loading progress bar for each gallery): only thumbnails (_s.ext or _ms.ext ) needed for the galleries present in the current panorama /scene are preloaded.
  By default, larger images (.ext or m.ext) for the scroll gallery are not preloaded: when opening an image from the grid gallery, the download of the image begins, but this image is temporarily displayed as enlarged thumbnail, waiting for the complete download of the larger image. After an image change in the scroll gallery, you must remain at least half a second on the image to launch its download.
  Preloading processes for grid gallery and scroll gallery can be independently activated/disabled.
• Various ways for including galleries in the virtual tour (using layer, hotspot, map spot or scene).
• Virtually unlimited numbers of images per gallery; virtually unlimited numbers of galleries per pano/scene (possible hardware limitations – cpu, memory – from the playing device).
• Double image title management (short_title/second_title).
• Help messages (displayed once per visit, on the first gallery visited).
• Includes a slideshow function (automatic scrolling with customizable timer).
• Includes a zooming function.
• Compatibility with virtual tours generated by PANOTOUR PRO.

Screenshots

Animal photos example:

Landscape photos example:

Fashion photos example:

Simple Example

See the official site for a more complex example with multiple galleries integrated in a virtual tour and other fonctionnality demonstration.

krpano Forum Discussion Thread

Additionnal information on the ProteiStyl' Photo Gallery Plugin Thread

Official Site

Updated informations about the plugin on its official web page.

Download/Buy

• Free download of the DEMO VERSION on the official site


• Regular license: 52€.
  Plugin license is tied to your krpano license (needs a registered version of krpano).



• Additionnal 'branding free' license : 23€.
  (ProteiStyl' logo can be masked; link to web page plugin is removed from the contextual menu)



• Pack 'regular + branding free' licenses: 70€.

PLEASE register using the exact name and email you used for your krpano license.
You can check your registration information with the "krpano Tools" application ('Settings' tab, then 'Registration Information' button).

After payment, you will receive your personal license file by e-mail within max. 48 hours(working days).

Plugin Installation

• VIEWER installation: Simply copy the folder ‘pspg_gallery_data’ from the example of the demo version into the main folder of your tour.
• EDITOR installation: Copy the file PSPG_EDITOR.html from the example of the demo version into the main folder of your tour (modify, if necessary, the names of .js and .xml files on lines 19 and 33 respectively).
• DROPLET installation: Copy the content of the folder DROPLET from the example of the demo version into your local folder containing the krpano Tools (with merging the sub-folders ‘templates’ and ‘xml’). Then, modify the values for images sizes in the 2 files ‘pspgD.config’ and ‘pspgM.config’ (located in the sub-folder ‘templates’).

XML Syntax / Plugin Usage

• FIRST STEP: Creation of a gallery with default attributes
  • First, if not already done, create a button to open the gallery by using
    a layer:

    <layer name="gallery_button1" url="gallery_icon1.png" align="center" edge="center" x="0" y="-25%" /> 

    or a hotspot:

    <hotspot name="my_button_for_gallery" url="gallery_icon1.png" ath="-25" atv="15" /> 

  
  
  • Drag’n Drop the images you want to display in the gallery into the DROPLET ‘MAKE IMAGES for ProteiStyl Gallery’.
    This droplet will generate the 4 sizes for images in a created folder img/, and it will also generate a part of the xml code in the file img.xml (located in folder img/).
  
  
  • Move the folder img/ into the main folder of your tour.
  
  
  • Copy the code from the file img.xml in the main xml of your tour:

    <include url="%FIRSTXML%/pspg_gallery_data/pspg_gallery.xml" /> 

    (This line must be copied only once at the begining of the xml code)
    
    

    <gallery  name="gallery_name" open_button_type="type_of_your_button" open_button_name="name_of_your_button
              title="title_of_your_gallery" >  
    
     <img name="img_Butterfly" url="Butterfly.jpg" short_title="Butterfly" second_title="" showtext="" />
     <img name="img_Deer" url="Deer.jpg" short_title="Deer" second_title="" showtext="" />
     <img name="img_Fox" url="Fox.jpg" short_title="Fox" second_title="" showtext="" />
     <img name="img_Heron" url="Heron.jpg" short_title="Heron" second_title="" showtext="" />
                  …
    </gallery> 

    Set the appropriate value for the attributes open_button_type and open_button_name according the type of button you previously made to open the gallery.
    In the examples from above, the appropriate value are

    open_button_type="layer" open_button_name="gallery_button1" 

    and

    open_button_type=" hotspot" open_button_name=" my_button_for_gallery" 

    
    Optionally, set custom value for the attributes name and title, for example:

    name="gallery1" title="Animal photos" 

    
    For single pano, this code can be placed anywhere (but into the krpano element!) in the xml.
    
    For virtual tour, this code must be placed into the scene elements of the xml (if out of a scene the code will be skipped if keep=”false” or not defined; see also section ‘Use an identical gallery in several panoramas/scenes’ in the documentation).
    
    At this stage, the gallery is already fully included in your tour but it uses ‘only’ the default values for all the attributes.


• SECOND STEP: Customization of the layout of the gallery
  • Open PSPG_EDITOR.html using your favorite navigator (on desktop devices; the EDITOR was not designed to be used on mobile/tablet devices): the EDITOR is loaded just before your tour.
    If there is only 1 gallery in the current pano/scene, the gallery with the EDITOR opens automatically; otherwise, click on a gallery opening button.
  
  
  • After choosing your desired layout, click on COPY CONFIG to generate a xml customized code, which is directly copied into the clipboard.
  
  
  • Paste to replace the following line in the xml of your tour.

    <gallery  name="gallery_name" open_button_type="type_of_your_button" ... > 

    Save your xml… and it’s done!

Advanced customizations and Plugin Attributes

See the documentation on the official site for a complete description of plugin attributes and description of advanced functionnalities.