Tag Archives: fancybox

Packt Publishing: Instant Fancybox – Why, oh why? Books | My Reviews 25 FEB 2014

packt publishing logoA while ago I was approached via e-mail and asked to review (and thus publicize) an e-book via my site by a representative (Dyson D’Souza) of Packt Publishing. (Packt is apparently a UK based publishing company specializing in focused IT books.)

The title in question was Instant Fancybox, authored by a Kyle Diedrick.

Now I’m particularly fond of the fantastic Fancybox jQuery plugin developed by Janis Skarnelis, and have of course mentioned it on numerous occasions in my code-related posts, which is why I guess I was asked to provide a review in the first place.

First of all, I have to say that I was rather surprised to learn that someone had actually bothered writing a book covering the usage of a single jQuery plugin. Sadly this thought rang true as I quickly flipped through the downloaded e-book and realized that my initial reaction had been correct – there really isn’t much point in writing a book about how to use the fancyBox plugin, as all you are really doing is rehashing all the usage/implementation documentation already present on the plugin’s primary download page.

So a pointless exercise then in other words.

Sadly this wasn’t actually the thing that left a slightly bad taste in my mouth. FancyBox is released under a Creative Commons Attribution-NonCommercial 3.0 license. It is still essentially free to use for personal, non-commercial projects as long as you correctly attribute the plugin back to fancyApps, i.e. Janis Skarnelis.

Now for decency’s sake, shouldn’t an e-book that is essentially attempting to make money off Skarnelis’ work at least acknowledge him somewhere in the text?

I would have thought it good manners to do so. (Because of this, I’ve decided not to physically link back to Packt – seems fair to me.)

So in summary, (and while I’m sure Kyle Diedrick is a great guy) this e-book really isn’t worth paying for – and it’s 7.99 UK pounds for 72 pages mind you. The reason? Well, you require familiarity with HTML and jQuery to get something out of this title, but the reality is that if you are familiar with HTML and jQuery, then the existing documentation and usage guides on the primary FancyBox download page is actually more than enough for you to achieve what you need to achieve.

My recommendation: skip in favour of a something more advanced like an in-depth guide to jQuery.

How to Use Percentage Sizes for Your FancyBox CodeUnit 13 OCT 2012

I’m a huge fan of the jQuery-driven FancyBox and make use of it in just about all of my web development work.

This is a handy little trick to use percentage (%) values for a fancybox implementation’s width and height, thereby making it easier to specify a fancybox that will work regardless of screen size.

(If you are familiar with fancybox then you are aware that it requires height and width values to be passed to it as pixel values.)

Note that I’m assuming that you are making use of the wonderful jQuery JavaScript library here.

//setting a width of 90% and a height of 75%
var fbwidth = Math.ceil(($(document).width()*90)/100);
var fbheight = Math.ceil(($(document).height()*75)/100);

$('#versioninghistory').fancybox({'type':'iframe','autoScale':true, 'width': fbwidth, 'height':fbheight, 'centerOnScroll':true});

Looking at the snippet above, you’ll see that we are first calculating the pixel value of the desired percentage value based on either the screen width or height (using jQuery’s document related functions), and then passing it through to the fancybox declaration.

Nifty.

How to Close a FancyBox via a Button Click CodeUnit 03 SEP 2012

The excellent and rather flexible jQuery plugin FancyBox has become my defacto jQuery lightbox implementation and as such it has found its way into most of my project work.

Although you can obviously close the displayed lightbox by either clicking outside of the box (i.e. on the greyed out area) or by clicking on the Close icon/button on the border of the lightbox, it is sometimes useful to be able to close the FancyBox by clicking on a button or element being displayed within the dialog – in other words when the FancyBox is being used to display iframe content.

Now the API for FancyBox reveals the existence of a close() function, which is called as follows:

$.fancybox.close();

This is useful when you want to programmatically close the lightbox, say after a certain period of time has elapsed – or in our case, when a button displayed in the dialog is clicked on.

However, there is one little trick that has to be employed here. Because the button sits within the FancyBox already launched, you need to ask its parent window to actually run the close function to shut it down.

Hence, your call from the displayed iframe content would look like:

if (typeof window.parent.$.fancybox!='undefined'){
           window.parent.$.fancybox.close();
         }

Nifty.

Related Link: http://fancybox.net

FancyBox: Dynamically Change iframe URL before Lightbox Load CodeUnit 09 JUN 2010

The excellent and rather flexible jQuery plugin FancyBox has become my defacto jQuery lightbox implementation and as such it has found its way into most of my project work.

One of the cool little tricks I stumbled across was the ability to dynamically alter the URL of an iframe loading fancybox implementation and thought it a good idea to share over here.

In my example I have a number of rows, all with a distinct record id and all which need an edit functionality.

Now what I do is I have a single edit script which gets called via iframe load by a fancybox click on the edit icon at the end of each row. The trick here is of course that the edit page being loaded needs to know which row to edit, and thus I want to pass this bit of vital information on to the loaded edit script.

To do this I capture the record id in the tag attribute of my edit image and then create a click handler to fire when any of the edit images are clicked upon. In my javascript section of code, I create an empty anchor tag which I then apply fancybox to in the usual manner, specifying of course that the anchor tag is of an iframe class and that it should load the base URL of my edit script.

Okay, so by now you’ve realized that instead of applying fancybox to each edit image like one would normally do, I’ve gone and simplified things by applying it to only one, unused and unseen element on the page. The final part of this trickery thus now lies in the click event handler attached to each of the edit images.

What we basically do is on click, grab the tag attribute of the clicked item (which contains the id of the record to be edited) and then use this value to alter the href attribute of our already fancyboxed anchor element, basically adding a GET variable to the edit script URL.

With this set, you simply trigger a click event on the anchor tag and presto, you now have a dynamic iframe fancybox loader! :)

So to get an idea of what the code would look like:

<img style=”cursor:pointer;” class=”edit-audit-image” tag=”ID134″ src=”images/b_edit.png”>
<img style=”cursor:pointer;” class=”edit-audit-image” tag=”ID263″ src=”images/b_edit.png”>

<div style=”display:none;”><a id=”edit-audit-fancybox” class=”iframe” href=”admin_edit_audit.php” title=”Edit Existing Audit”> </a></div>

  
//fancybox the hidden anchor tag
$("a#edit-audit-fancybox").fancybox({ 'hideOnContentClick': true, 'enableEscapeButton': true, 'frameHeight' : 600 });

//fire when an edit image is clicked	
$('.edit-audit-image').click(function(){
		//append the tag of the clicked image to the end of the edit script URL
    $("a#edit-audit-fancybox").attr('href','admin_edit_audit.php?id=' + ($(this).attr('tag')))
    //force a launch of the fancybox
		$("a#edit-audit-fancybox").click();	
});

Nifty.

Related Link: http://www.fancybox.net/

jQuery: FancyBox image display CodeUnit 10 DEC 2009

There’s another great jQuery lightbox plugin making its rounds at the moment, and this one’s a doozy it would seem! FancyBox is a well-coded, nifty little image lightbox jQuery-driven script that can be used to either display images, html content or even multi-media in a Mac-style “lightbox” that floats over the currently displayed web page.

Features include a nice drop shadow under the zoomed item, the ability to group items together by adding navigation (aided by preloading of images) and the ability to display the lightboxed content either inline, with ajax or in an iframe. Of course its display can be extended and customised through various settings and CSS and it does support some fancy transitions thanks to its use of the easing plugin.

And yes, just in case you are wondering, there is a WordPress plugin available for it! :)

fancybox-screenshot

Related link: http://fancybox.net/home