Fancybox

Developer

Imam Husayn

3rd Party (Commercial)


EE Version Support

  • ExpressionEngine 6

Compatibility

If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.

  • Updater
  • Multi Site Manager
  • Stand Alone Entry Form
  • Low Variables
  • Content Elements
  • Better Workflow
  • Matrix
  • Grid
  • Webservice
  • Publisher

Requirements

  • jQuery for the Control Panel

Add-On Type(s)

Control Panel Theme, Module

Tags

Create the Fancybox using the CP setting as well as template tag.

Features

     
  1. Create Fancybox by CP setting.
  2.  
  3. Create Fancybox by template tag.
  4.  
  5. Set override setting of template setting on CP setting.
  6.  
  7. Set dynamic width of Fanycbox.
  8.  
  9. Set the timeout for Fancybox to show on the page.
  10.  
  11. Set multiple Fancybox in single page.
  12.  
  13. Set Fancybox on the class name by clicking and hovering event.
  14.  
  15. Set start and expiry date of Fancybox.
  16.  
  17. It is Mobile responsive.
  18.  
  19. Set image and video iframe in Fancybox.

Important notes:

     
  1. Template parameters have a higher priority compared to the setting of CP during creating the Fancybox. This means the CP setting is overridden by the template tag setting.
  2.  
  3. Core jQuery is required in your template. (For example: https://code.jquery.com/jquery-3.5.1.min.js). It must be added in the header part of your page.

Example

1. Set fancybox by short_name which is short name of setting.

{exp:fancybox:set short_name="sample-fancybox"}{/exp:fancybox:set}

2. Set Fancybox by id which is the ID of the setting.

{exp:fancybox:set id="1"}{/exp:fancybox:set}

3. Set Fancybox by template tag all parameter.

{exp:fancybox:set width="800" timeout="3000" hover_class='temp_hover' click_class="temp_click" start_date="2022-02-21" end_date="2021-02-28"}
	<h1>Sample Demo</h1>
	<div><p>Hello, we announced the easy way for the designing for the end users.</p></div> test single quote' and double quote ".
{/exp:fancybox:set}
<p class="temp_hover">Hover on me (Front)</p>
<p class="temp_click">Click on me (Front)</p>

The fancybox content is considered the text which is between the tags.

Parameters

     
  • width: It decides the width of the popup. Its value considers as a pixel.
  •  
  • timeout: If you want to open Fancybox after some time out then you can specify it in milliseconds. If you do not want this feature then do not need to pass this parameter.
  •  
  • hover_class: If you want to open the Fancybox when someone hovers on some class on the page then you have to provide the name of the class.
  •  
  • click_class: If you want to open the Fancybox when someone clicks on some class on the page then you have to provide the name of the class.
  •  
  • start_date: If you want to activate the Fancybox on a particular date the specify that date in ‘Y-m-d’ format.
  •  
  • end_date: If you want to expire the Fancybox on a particular date then specif that date in ‘Y-m-d’ format.

4. Set Image

{exp:fancybox:set  width="350" click_class="open_image"}
<img data-style="width:100%;height:auto" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Geneva_MotorShow_2013_-_Lamborghini_Veneno_1.jpg/800px-Geneva_MotorShow_2013_-_Lamborghini_Veneno_1.jpg" />
{/exp:fancybox:set}
<p class="open_image">Open Image</p>

5. Set Video

{exp:fancybox:set  width="420" click_class="open_video"}
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
{/exp:fancybox:set}
<p class="open_video">Open Video</p>




Support

If you have any issue please contact us via email address “imamhusaynee@gmail.com”.

This entry was created February 21, 2021, 6:05 pm.
This entry was last updated January 20, 2022, 8:02 am.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!

Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.

1 Review:

adnx 02.27.21

adnx
Rating - {addon_rating_average}

There is an error after installation when you go to setup

Warning
Use of undefined constant IHRP_MODULE_NAME - assumed ‘IHRP_MODULE_NAME’ (this will throw an Error in a future version of PHP)
user/addons/fancybox/mcp.fancybox.php, line 26