Popup with fancybox

Popup with fancybox plugin allows you to create lightweight JQuery fancy box popup window in your blog with custom content. In the admin interface we can easily configure popup size and timeout (i.e. show popup window based on timeout after page load). In this popup we can display any content such as Video, Image, Advertisement and much more.

In the admin we have standard wordpress HTML editor to create the popup message. So that we can customize the messages easily. also we have option to set expiration time for popup window. and we have option to display popup once per session, so that the popup never appear again if user navigate to another page.

Live demo

Live popup window will open 10 second after page load. Please refresh the page to view the demo again. It support all latest browser IE, Firefox, Chrome.

Advantage of this plugin

  • Lightweight JQuery.
  • Fancybox css in popup windows.
  • Show popup window based on timeout after page load.
  • HTML editor to create the popup message.
  • Option to set expiration time for message.
  • Option to set popup display once per session.

Installation Instruction

Option 1

  • Download the plugin popup-with-fancybox.zip from download location.
  • Unpack the *.zip file and extract the /popup-with-fancybox/ folder.
  • Drop the ‘popup-with-fancybox’ folder into your ‘wp-content/plugins’ folder.
  • In word press administration panels, click on plug-in from the menu.
  • You should see your plug-in listed under Inactive plug-in tab.
  • To turn the word presses plug-in on, click activate.

Option 2

  • Go to Add New menu under Plugins tab in your word-press admin.
  • Search ‘Popup with fancybox’ plugin using search option.
  • Find the plugin and click ‘Install Now’ link.
  • Finally click activate plug-in link to activate the plug-in.

Option 3

  • Download the plugin popup-with-fancybox.zip from download location.
  • Go to Add New menu under Plugins tab in your word-press admin.
  • Select upload link (top link menu).
  • Upload the available popup-with-fancybox.zip file and click install now
  • Finally click activate plug-in link to activate the plug-in.

Plugin configuration

Display popup in specific page/post

This plugin have short code option to display the popup in specific page. Just copy and paste the plugin short code into specific posts or pages to display the popup. We can use group name or message id to display the popup.

Short code

[popupwfancybox group="GROUP1"]

[popupwfancybox id="1"]

Display popup in entire website

We have two options to display the popup box in entire website.

1. Go to widget page and drag and drop the widget Popup with fancybox into your sidebar, so that popup will display in entire website.

2. Copy and paste the given PHP code into your footer.php file, so that popup will display in the entire website.

a. Download footer.php file from your theme folder.
b. Paste the below PHP code, and upload back to server.

<?php popupwfb( $Popupwfb_group = "", $Popupwfb_id = "" ); ?>

Display popup only in the home page

a. Download footer.php file from your theme folder.
b. Paste the below PHP code, and upload back to server.

<?php if (is_home()) { popupwfb( $Popupwfb_group = "", $Popupwfb_id = "" ); } ?>

Frequently asked questions

Q1. How to display popup message box once per session?

Go to Dashboard ==> Settings ==> Popup with fancybox ==> Popup Setting (Button)

In the above page we have option to configure session display. Select YES to show popup message once per session, Meaning, popup never appear again if user navigate to another page.

Q2. What is Group and Id in the plugin short code?

Go to Dashboard ==> Settings ==> Popup with fancybox

In the above page, we can view all the existing popup messages, Message ID available in the first column of the grid, and 5th column we can see the group name of the popup message.

Q3. How to modify popup window style?

CSS file name
popup-with-fancybox\inc\jquery.fancybox.css

Class name

.fancybox-content-inside {

}

We can easily update the popup window style in the above mentioned css class name.

Q4. How to setup expiration date for the popup message?

At present this option not available in the version 1.0. Please wait for the version 2.0.

Download location

http://www.gopiplus.com/work/wordpress-plugin-download/

Plugin official webpage

http://www.gopiplus.com

Video tutorial

http://www.gopiplus.com/work/2013/09/29/popup-with-fancybox-wordpress-plugin-video-tutorial/

2 Responses to“Popup with fancybox”

  1. Gopi Ramasamy
    August 9, 2013 at 3:03 am #

    Plugin Short code

    [popupwfancybox group="GROUP1"]

    [popupwfancybox id="1"]

  2. Gopi Ramasamy
    October 6, 2013 at 2:04 am #

    Use below HTML code to add YouTube video into the popup content.

    <iframe class="youtube-player" type="text/html" src=”http://www.youtube.com/embed/hc7RymU_NJE” frameborder="0" height="400" width="630"></iframe>

Leave a Reply

Your email address will not be published. Required fields are marked *

(Required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *