novosibpano@yandex.ru  

plugin "Photo Gallery v1.81" for krpano.


Possibilities of the gallery.

  • You can create an unlimited number of galleries in the tour..
  • Create a gallery from an unlimited number of photos.
  • No need to prescribe all photos, enter only the name and number of photos.
  • Added the ability to insert a video youtube into the gallery.
  • The ability to add video to the gallery.
  • Specify your size, color, transparency of the background and frames, and much more.
  • For each gallery you can create your own individual settings.
  • The ability to install buttons with their own design.
  • There are modes of zooming the mouse wheel, buttons and on mobile devices with two fingers. Dragging a photo (to view when zooming). Slide show.
  • Ability to make captions to photos.
  • The ability to prescribe an action by clicking on a photo (open a link, open a document, a scene, etc.)



Example.

Example YouTube



Example in 3D tour





Photo Gallery consists of two parts.

1. Window with thumbnail photos.

Frame with thumbnails of photos. There is a scrolling with the mouse wheel moving with the left mouse button pressed. The slider on the left proportionally shows the position of the thumbnails in the window. "Snatching" for the slider thumbnail moves. The thumbnail increases when you hover the mouse. When you click on the thumbnail, the corresponding photo opens, in the thumbnail appears the label "picture" of the viewed photo. When you are flipping through the photos or in the slideshow mode, a frame moves around the corresponding thumbnails (the color changes in the settings). With the right of the window button "minimize thumbnails", thumbnails hide shifting to the left. On the gallery call, the status of the thumbnail panel is set - open or closed. You can turn on the "auto-scroll when hovering cursor" function in the settings.

2. Photo viewer.

The viewport has a frame that is adjustable in size, color, and transparency. The preview window is automatically scaled. When the thumbnail frame is minimized, the photo window moves to the center.

Interface:
  • The buttons "flipping" photos are located inside the window on the left and right sides.
  • The slide show button is located at the bottom right of the window.
  • Show the number of the photo you are viewing / number of photos in the gallery on the bottom frame on the right. At the bottom left are the photo captions.
  • In the lower frame on the left are the photo captions. Styles of the text of signatures and the counter are adjusted.
  • Button "close the photo". When you click on the background, there is also a close.
  • Button "flipping the photo" on the background in the lower right corner..
  • Zoom buttons "+" "-" on the background in the lower right corner. Pressing and holding respectively increases or decreases the photo. Zoom in with the mouse wheel, if the cursor is on the photo, scrolling with the mouse wheel, if the cursor is outside the photo.
  • The photo is dragged by the left mouse button. On the touchpad - press and move.

Window interface with video:

When you hover the cursor over the window with the video from the bottom, a panel with buttons appears.
  • The play-pause button is located at the bottom left of the window.
  • Next to the volume button on the click disables the sound. When you hover the cursor, the volume slider appears.
  • To the right is the time line.



How to connect

To insert into your tour put the folder "Gallery_photoSM" in the root folder with the tour.
An example of connecting a plugin basically xml:


    <krpano .... >
    <include url="Gallery_photoSM/Gallery_M.xml" />
    .
    .
    </krpano>
	



Preparation of photos and miniatures for the gallery.

For each gallery, prepare photos with the same name and numbering from 1 and above (example - cats1.jpg,cats2.jpg...cats№.jpg), make of them miniatures for the thumbnail window (reduce the size) and place, for example, in the folder "m".
Photos should only be with an extension . jpg.
In the settings, only the name and number of photos, number photos and the extension is added to the name automatically. Photos for thumbnails are automatically adjusted in width and height, in the settings you need to set the step between them.



How to create and open a gallery.

For example there are 12 photos - cats1.jpg,cats2.jpg...cats12.jpg)
  • way to photos (%HTMLPATH%/photo/cats)
  • way to thumbnail photos (%HTMLPATH%/photo/m/cats)
  • number of photos (12).
Create a gallery under the name "cats".
In the "Setting_gallery.xml" file, you need to write it this way:
 
	<cats   photo="%HTMLPATH%/photo/cats"
		miniature_photo="%HTMLPATH%/photo/m/cats"
		number_thumbnails="12"
	   />
	
Create an event, or several events for the execution of which will open the gallery, for example - onclick="Galereya(cats);" where "cats" is the name of the gallery.

If you use the default settings , then just specify the path to the photos and thumbnails and the number of photos.
The default gallery settings are specified in the "Setting_gallery.xml" file under the name "Default_Galery" . These parameters can be changed.
To change the parameters in a separate gallery, specify the parameters that can be changed, for example in the gallery "Thailand" the width of the bar of miniatures is set to 150 pixels, the height of the bar of thumbnails is 100%:

		
	<Thailand  photo="%HTMLPATH%/photo/IMG_"
		   miniature_photo="%HTMLPATH%/photo/m/IMG_"
		   number_thumbnails="8"
		   thumbbar_width="150"
		   thumbbar_height="100%"
	     />
        



Default settings

In the file Setting_galereya.xml The name "Default_Galery" is set to the default gallery settings.
Do not use commas in place of a point other than the parameter frame_color_photo.

Default_Galery - default settings:

  • Step_miniature="5" - distance between thumbnails (in pixels).
  • photo_height ="90%" - The maximum height of the photo as a percentage of the height of the viewport. If equal to 100%, then there will be a full filling in height, if the width allows.
  • <thumbbar_position="left" - three values for binding to the container thumbnail view: "left", "lefttop", "leftbotton"
  • thumbbar_y="0" - displacement of the container under the thumbnail along the y axis (pixel or% of the screen width).
  • thumbbar_x="0" - displacement of the container under the thumbnails along the x-axis (pixel or% of height).
  • thumbbar_width="130" - the width of the container under the thumbnail (pixel or% of the width of the screen).
  • photo_max_height="0.8 - The maximum height of the photo relative to the screen (values from 0 to 1, for example 0-0%, 1-100%, 0.7-70%)
  • thumbbar_open="0" - Push the thumbnail container when the gallery starts. 0-no, 1-yes.
  • thumbbar_color="0x2D3E50" - color of the container of miniatures.
  • thumbbar_alpha="0.3" - transparency for miniatures(0-1).
  • thumbbar_color_b="1 0xFFFFFF 1" - the container frame of thumbnails "thickness (pix.) _ color_transparency".
  • frame_color_thumbnail="1 0xFFFFFF 1" - the thumbnail frame of the current photo is "thickness (pix.) _ color_transparency".
  • frame_color_photo="10,10,22,10 0x58BA2D 0.8" - frame of the displayed photo "frame thickness (pixel) top, right, bottom, left_color_transparency".
  • Background_color="0x000000" - Setting the background color "0x000000"
  • marker_photo="galSM.png" - The name of the image for the marker in the thumbnail of the scanned photo. The picture must be in the folder «Gallery_photoSM/iconGL»
  • autoscrolling="false" - auto-scrolling when hovering over the thumbnails "false", "true".
  • slideshow_interval="3" - interval of slide show in sec.
  • text_open_thumbbar="Show thumbnails of photos" - text when you hover the deployed container under the thumbnail.
  • text_of_thumbbar ="Minimize Thumbnails" - text when hovering a collapsed container under the thumbnail.
  • style_text_signature="text1galSM" - text style of photo counter.
  • style_text_photo_counter="text1galSM" - signature text style of photos.
  • titles_№="..." - 1,2...№ photo number = Photo captions on the frame in the lower left corner.
  • onclick_№="..." - 1,2...№ photo number = The action triggered by clicking on the photo.
  • one_photo="№" - Show one photo from the folder under the number number, the rest will be ignored. If "0" is set, all photos from the specified folder are displayed.

  • start_photo="№" - Open gallery from photo number "№".
  • doubleclick_photo - "true"-Perform an action by double-clicking on the photo. "false" -Execute the action one click on the photo (default: "false").

  • video_"№"="" - Open video by clicking a thumbnail "№". "" - prescribe the path to the video, for example "%HTMLPATH%/photo/9.mp4"
  • youtube_№="" - Open youtube in miniature under the number "№". "YnvOQji6zZ0" - prescribe the path to the video youtube, for example from the link https://youtu.be/YnvOQji6zZ0 you need to insert into the quotes "YnvOQji6zZ0"



ATTENTION!

The Gallery_M2.xml file is open source. In it you can change and create your own font styles, change the layout and appearance of the buttons, the status of the download and much more.
The Gallery_M.xml file with a private code. It contains executable code.

There are two actions in the Gallery_M2.xml file:

  • video_gal_on - Called when the video player or youtube player is turned on.
  • video_gal_off - Called when the video player or youtube player is turned off.
These actions can be used to pause the audio sound, for example:


	<action name="video_gal_on" >
		   if(soundinterface,pausesound(sound1););	
	     />
        

  • Do not use a hyphen in the gallery name - for example: use "beach_bar" instead of "beach-bar".
  • The gallery name should not begin with a number - for example: "2beach_bar" - incorrectly, "beach_bar2" - is correct.




Download photo gallery for krpano

Fully functional demo versions of the photo gallery can be downloaded here.
Demo version 11 Mb
Download Test_Gallery1.81.rar

Archieve includes:

  • Working example of use.
  • In the example folder "Gallery_photoSM" with the gallery files in which:
  • Folder iconGL(icons of control buttons)
  • Gallery_M.xml (demo version. closed code)
  • Gallery_M2.xml (font styles, control buttons)
  • Setting_gallery.xml (executable file)


  • Get the plugin.

    Donate 23 EUR.

    If you liked plugin, You can get it by making a donation through PayPal.
    Do not forget to specify e-mail address.
    I will send to this address a link to download an archive with an example and a plugin for one day.
    Updates plug-in for free!

    Photo Gallery 23 EUR.



    Changes

    16.04.2018
    Version 1.81

    1.When displaying photos, the native tour interface is hidden.
    2.When you turn on the video player or YouTube player, the audio player pauses.
    3.The problem with "onmousewheel" is solved.

    1.01.2018
    Version 1.8

    1.The ability to add a video clip to the gallery and open youtube.

    1.01.2018
    Version 1.6

    1.Changed the mechanism of loading and fitting photos, which allowed to increase productivity. Now there are no parameters for W_prop and H_prop.
    2.When you open and paging the photos are shown no more than their true size, which increases the quality of displaying photos (if the photo is 100x100 pixels, it does not extend to the full screen).
    3.The management interface has been changed - the button for expanding the thumbnail bar has been moved to the lower right corner, which allowed increasing the field under drop-down photos (especially important in mobile browsing)
    4.A new "one_photo" function was added to display only one photo from the photo folder.
    5.Added a new function "start_photo" to open the gallery from the specified photo.
    6.A new "doubleclick_photo" function was added to select a single or double click on a photo to call an action.
    7.Added protection against clicking at the time the gallery and photo were opened.
    8.When you re-open the gallery, it opens with a closed earlier photo.
    9.Fixed some bugs.

    15.09.2017

    Version 1.5

    1.The scale of photos with two fingers on mobile devices was added.
    2.Now you can prescribe the action by clicking on the photos (open the link, open the document, the scene, etc.) you can prescribe the action in Setting_gallery.xml - "onclick_№" where № - photo number in this gallery.

    5.09.2017

    Version 1.4

    Made a change of photos with the mouse wheel, if the cursor is outside the photo and zooming if the cursor on the photo.

    1.09.2017

    Version 1.3

    Fixed the adjustment of the slider in the thumbnail container (it does not climb out of the height). The default gallery is configured. Fixed problems in the flash. Fixed a background error of the thumbnail container.

    Notice

    Plugin is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will author of plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not plugin author have been advised of possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event plugin author will have no liability arising out of this agreement.