Imam Husayn

3rd Party (Commercial)

EE Version Support

  • ExpressionEngine 6


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


  • jQuery for the Control Panel

Add-On Type(s)

Control Panel Theme, Module


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


  1. Create Fancybox by CP setting.
  3. Create Fancybox by template tag.
  5. Set override setting of template setting on CP setting.
  7. Set dynamic width of Fanycbox.
  9. Set the timeout for Fancybox to show on the page.
  11. Set multiple Fancybox in single page.
  13. Set Fancybox on the class name by clicking and hovering event.
  15. Set start and expiry date of Fancybox.
  17. It is Mobile responsive.
  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.
  3. Core jQuery is required in your template. (For example: It must be added in the header part of your page.


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 ".
<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.


  • 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="" />
<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=""></iframe>
<p class="open_video">Open Video</p>


If you have any issue please contact us via email address “”.

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 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 to initiate your return. If you have questions, email

1 Review:

adnx 02.27.21

Rating - {addon_rating_average}

There is an error after installation when you go to setup

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