Fancybox ajax content & navigation issue in group & popup

While working with fancybox, you might have noticed that any button or link or input inside fancybox popup just behaves like previous/next item slider, making that coming item to appear in popup rather of doing it’s assigned code on click. All the reason is the width specified for `fancybox-nav` class with higher `z-index` for it.

Read More

Full sized image with Fancybox

I was using Fancybox in one of my websites for showing images in popup. Everybody use Fancyboxto show data in popup with responsive way but here I had a different requirement of showing full sized image with Fancybox.

So same I am sharing here the solution of showing full sized image with Fancybox

Read More

How to resize colorbox

Sometimes we need to resize colorbox after clicking on sumbit button and we want to show some error or success messages on the same popup window by using javascript or ajax

Read More

disable fancybox after binding

I am having a strange issue, I have code that pulls content of wordpress posts that was using some plugin to bind fancybox to certain elements on the page. But now I want to implement that fancybox binding from some elements on that page.

Read More

Closing colorbox

Colorbox is a jQuery plugin, Nowadays jquery colorbox plugin is mostly used for displaying content in popup window. But there are still somethings where we stuck. Closing colorbox is one of them.

Read More

Opening a html page within fancybox

Opening inline HTML in a fancybox popup is easily achievable but once I faced the problem of opening a html page within the fancybox popup.

After googling, I found the solution that ‘type’ property of fancybox we need to include on calling of it.

Read More

How to open fancybox on page load?

Opening fancybox on page load is very simple. just call below given code in document ready eg.

$(document).ready(function () {
        $.fancybox({
            'width': '80%',
            'height': '80%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

Read More