prefab-lightbox-image

Target:

A Prefab which supports the pinch zoom, and flip of an image in the modal on click of thumbnail.

Libraries used:

PanZoom - This library supports pinch zoom, which supports the DOM (text, image) and SVG.

Jquery Magnify - This Library supports the image zoom feature and rotate in the modal.

Files Needed:

Jquery.magnify.js Panzoom.min.js Jquery.magnify.css And Custom css for modal. magnifyflip.css

Steps to Create a Prefab:

Go to Prefabs section, Click on Create a Prefab by providing the necessary data.
Click On File Explorer -> Resources -> click on Upload Files and upload the above listed files.
Click on Settings -> Config Prefab
Under the styles section add Jquery.magnify.css after that add magnifyflip.css.
Under the scripts section add Jquery.magnify.js after that add Panzoom.min.js.
Now Click on Properties tab after adding resources.

Under the UI Properties click Add

  * Name : dataset , DataType : Object, IsList: True.
  * Name: toolbaroptions, DataType : Object, IsList: True.
  * Name: thumbnailclass, DataType : String.

Click on save and close the dialog.
Click on Pages -> under the widgets section search for a container.
Drag and drop Container and give a class name as ‘imageContainer’.
Click on script tab -> And add the script (refer prefabPage.js).

Note : Change the class , prefab properties names if changed.

Implementation:

Push the changes and publish to Project. Under the Prefabs section, Drag and Drop the Prefab added to the respective Project. Now Map the Data for the properties mentioned above , and click on preview to view .