Pinegrow Lightbox Plugin
Now you can add lightbox functionality to your project with just a few clicks.
Pinegrow Lightbox Plugin is a free Pinegrow plugin that lets you add or create lightbox pop ups in Pinegrow.
Based on Tobi Lightbox, it is a simple and light-weight open source lightbox script with no dependencies.
With it, You can add image lightboxes and galleries as well lightboxes containing iFrames and youtube videos.
Once you activate the plugin it will add some new options to the ACT panel.
You can use these options to create a lightbox from any a href link on your page.
You also get 4 different type of lightboxes added to the Pinegrow Library panel, which you can just quickly drag into your product. These also include their own indvidual options added to the element properties panel.
- Standard Image lightbox (clicking the image pops up a lightbox)
- Text link lightbox (clickling the text pops up an image lightbox)
- iFrame lightbox (clicking the link pops up an iFrame, such as an iFrame of a website)
- Youtube iFrame (clicking the link or image pops up a youtube video)
How to Use:
Additonal frameworks needed: none
Download and install the plugin by activating the pg-lightbox.js file.
If you have never installed a Pinegrow Plugin, use this guide as reference.
Once Installed and Activated the plugin options should now appear in your ACT Panel
If you are going to use these your image or text should be wrapped in a a href link.
It should look like this
By the time you are finished setting it up it will look something like this
Select the link in the tree view and move over to the ACTIONS panel and click light box under PG Lightbox
This will automatically add the ‘lightbox’ class and a couple of new options will appear. You just need to add an image to show in the lightbox by clicking lightbox image using the filepicker, in the options that appearand your lightbox is ready to preview in teh browser (ctrl + B )
You can select the data type if you want to pop up a Youtube video, iFrame or piece of content (html)
If you select iFrame , use data target to enter the URL of the Iframe.
If you select HTML, you can use data target to target a section ID (eg: #selector)
If you select Youtube video, enter the youtube video ID into the section below data target (eg: 44yE68qYmRY)
Captions can be added to images in the lightbox by editing the image ALT tag. If you have more than one lightbox on the page, the lightbox that pop ups will become a gallery slider.
If you use the prebuilt lightboxes added to the library panel, and drag them into your project, you will find options for these in the element attributes panel. In this case you do not need to use the ACTION panels options
If you need more control over the lightbox, you can open the pg-lightbox-main JS file in your favourite text editor. Here you will see a couple of JS options you can easily change.
As this plugin is based on Tobi lightbox, for full isntructions and capabilities, visit the Tobi github repo.