FancyBox 2

Now FancyBox v2.1.5 is out, I’m experimenting 2.0.6.1, to me the old 1.3.4 is working quite well, the only thing I like about this FancyBox 2.0.6.1 is the full size image display with the helpers.js which is great. The buttons for gallery are very useful and jquery is the best for all users platforms. So, I still want to use FancyBox 1.3.4 with FancyBox 2.0.6.1 on the same website, I had to modify the FancyBox 1.3.4.js and put no-conflict for FancyBox 2.0.6.1. Now my website can use both Fancybox1.3.4 and 2.0.

To install this on WordPress, we need to add all the scripts before the </head> of the theme header.php. If we’re going to use players like Jwplayer or nonverblasters, we need to include them in this block also. As the rule of thumb, if we’re going to use many scripts, it’s good to have JQuery.noConflict defined for each script we use. For our FancyBox we use $jQ as the alias for $ sign. The scripts that will run all FancyBox classes is in the “idogfb2061.js” (this is a custom script that I created for FancyBox2.0.6.1). I like to use FancyBox because it’s supported by almost all devices out there.

<!-fancybox 2.0.6.1–>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>

<!– Add mousewheel plugin –>
<script type=”text/javascript” src=”/idogjs/fancybox2061/jquery.mousewheel-3.0.6.pack.js”></script>

<!– Add fancyBox –>
<script type=”text/javascript” src=”/idogjs/fancybox2061/jquery.fancybox.pack.js”></script>
<link rel=”stylesheet” type=”text/css” href=”/idogjs/fancybox2061/jquery.fancybox.css” media=”screen” />

<!– Add fancyBox – button helper –>
<link rel=”stylesheet” type=”text/css” href=”/idogjs/fancybox2061/helpers/jquery.fancybox-buttons.css” />
<script type=”text/javascript” src=”/idogjs/fancybox2061/helpers/jquery.fancybox-buttons.js”></script>

<!– Add fancyBox – thumbnail helper –>
<link rel=”stylesheet” type=”text/css” href=”/idogjs/fancybox2061/helpers/jquery.fancybox-thumbs.css” />
<script type=”text/javascript” src=”/idogjs/fancybox2061/helpers/jquery.fancybox-thumbs.js”></script>
<script type=”text/javascript” src=”/idogjs/fancybox2061/helpers/jquery.fancybox-media.js”></script>
<script type=”text/javascript” src=”/idogjs/fancybox2061/jquery.easing-1.3.pack.js”></script>
<script type=”text/javascript”>
var $jF=jQuery.noConflict();
$jF(document).ready(function(){
});
</script>
<script type=”text/javascript” src=”/idogjs/fancybox2061/idogfb2061.js”></script>
<!-end fancybox 2.0.6.1–>

Notice with fancybox 1.3.4, I can display different overlay colors in a gallery, but with fancybox 2.0, it has to be in the same group (class), it’s kind of disappointing. But look at the 2nd high resolution image, fancybox 1.3.4 doesn’t have the option of expanding the image to full size, but fancybox 2.0 does have. It’s kinda nice.

Image Gallery Fancybox 2.0.6.1

$jF(‘.idogw’).fancybox({
padding : 0,
openEffect : ‘elastic’,
closeBtn: ‘false’,
helpers: {
buttons: {
position : ‘bottom’
},
overlay : {
opacity: .8,
css : {
‘background-color’ : ‘#fff’
}
}
}
});

<p style=”text-align: center;”><a! title=”full size click here” href=”/media/teststuff/sm_cab04_75.JPG” class=”idogb” rel=”fancy2″><img style=”vertical-align: baseline; border: 2px solid black;” title=”thumb1″ src=”/media/teststuff/tn_cab04_75.JPG” alt=”” width=”250″ height=”141″ /></a> <a! title=”full size click here” href=”/media/04a8/front1.JPG” class=”idogb” rel=”fancy2″><img style=”vertical-align: baseline; border: 2px solid black;” title=”thumb2″ src=”/media/teststuff/tn_cab04_76.JPG” alt=”” width=”250″ height=”141″ /></a></p>

HTML 2.0.6.1

The new fancybox 2.0.6.1 require more codes to display iframe

$jF(“.ib2”).fancybox({
padding:0,
fitToView : false,
width : ‘90%’,
height : ‘90%’,
autoSize : false,
closeClick : false,
openEffect : ‘none’,
closeEffect : ‘none’,
helpers : {
title : {
type: ‘outside’
},
overlay : {
opacity : 0.8,
css : {
‘background-color’ : ‘#000’
}
}
}
});

<! class=”ib2 fancybox.iframe” a title=”HTML” href=”http://www.dognmonkey.com”>HTML </a>

HTML Without fancybox.iframe

<! class=”ib2″ a title=”HTML” href=”http://www.dognmonkey.com”>HTML </a>

PDF file is the same used with fancybox.iframe

<!a class=”pdfr fancybox.iframe” title=”PDF display” href=”/media/teststuff/lockcoding.pdf”>PDF file</a>

YouTube full url autoplay

Use media.js which is very easy to use, but still have to change the screen size.

$jF(‘.mediar’).fancybox({
padding:10,
maxWidth    :640,
maxHeight    : 400,
openEffect  : ‘fade’,
closeEffect : ‘elastic’,
helpers : {
media : {},
overlay    : {
opacity : 0.8,
css : {
‘background-color’ : ‘#420000’
}
}
}
});

<a! class=”mediar” title=”dognmonkey” href=”http://www.youtube.com/watch?v=iJT9HZye1PQ?fs=1&amp;autoplay=1″>YouTube full url autoplay</a>

YouTube playlist iframe

$jF(“.iu2bl”).fancybox({
padding:10,
maxWidth :640,
maxHeight : 385,
openEffect : ‘fade’,
closeEffect : ‘elastic’,
helpers : {
overlay : {
opacity : 0.8,
css : {
‘background-color’ : ‘#000022’
}
}
}
});

<a! class=”iu2bl” title=”dognmonkey” href=”http://www.youtube.com/embed?listType=playlist&list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY”>YouTube playlist iframe</a>

Vimeo Url

<a! class=”mediab” title=”Short Love Story” href=”http://vimeo.com/1618300&amp;fullscreen=1″>Vimeo Url </a>

Vimeo Moogaloop

<a! class=”mediar” title=”Short Love Story” href=”http://vimeo.com/moogaloop.swf?clip_id=877053&amp;fullscreen=1″ rel=”vimeo”>Vimeo Moogaloop</a>

jwplayer flv test without autostart

<a! class=”mediar” title=”Jwplayer swf red no autostart” href=”/js/fancybox/player.swf?&amp;file=/media/teststuff/a8.flv&amp;image=/media/teststuff/tn_cab04_76.JPG&amp;backcolor=000000&amp;skin=/js/fancybox/fs31.zip&amp;bufferlength=8&amp;volume=50″>jwplayer flv test without autostart</a>

jwplayer mov with autostart test

<a! class=”mediabl” title=”jwplayer mov blue autoplay” href=”/js/fancybox/player.swf?&amp;file=/media/teststuff/a8.mov&amp;autostart=true”>jwplayer mov with autostart test</a>

Nonverblaster MOV with autoplay test

<a! class=”mediabl” title=”Nonverblaster MOV white autoplay” href=”/js/fancybox/NonverBlaster.swf?&amp;teaserURL=/media/teststuff/tn_cab04_75.JPG&amp;mediaURL=/media/teststuff/a8.mov&amp;autoPlay=true”>Nonverblaster MOV with autoplay test</a>

Nonverblaster flv with teaser image test

<a title=”Nonverblaster flv black with teaser image” href=”/js/fancybox/NonverBlaster.swf?&amp;teaserURL=/media/teststuff/tn_cab04_75.JPG&amp;mediaURL=/media/teststuff/a8.flv”>Nonverblaster flv with teaser image test</a>

flowplayer mov test

<a! class=”mediar” title=”flowplayer mov in white” href=”/js/fancybox/flowplayer-3.2.5.swf?&amp;config={‘clip’:’/media/teststuff/a8.mov’,’autoBuffering’: ‘true’}”>flowplayer mov test</a>

sixflag marineworld

<a! class=”ir2 fancybox.iframe” href=”http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1001+Fairgrounds+Dr,+Vallejo,+CA&amp;sll=37.0625,-95.677068&amp;sspn=51.443116,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=1001+Fairgrounds+Dr,+Vallejo,+Solano,+California+94589&amp;ll=38.146168,-122.226076&amp;spn=0.023625,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed”>sixflag marineworld</a>

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.