[fancybox2]
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=”//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>
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=”//www.dognmonkey.com”>HTML </a>
<! class=”ib2″ a title=”HTML” href=”//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>
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=”//www.youtube.com/watch?v=iJT9HZye1PQ?fs=1&autoplay=1″>YouTube full url autoplay</a>
$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=”//www.youtube.com/embed?listType=playlist&list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY”>YouTube playlist iframe</a>
<a! class=”mediab” title=”Short Love Story” href=”//vimeo.com/1618300&fullscreen=1″>Vimeo Url </a>
<a! class=”mediar” title=”Short Love Story” href=”//vimeo.com/moogaloop.swf?clip_id=877053&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?&file=/media/teststuff/a8.flv&image=/media/teststuff/tn_cab04_76.JPG&backcolor=000000&skin=/js/fancybox/fs31.zip&bufferlength=8&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?&file=/media/teststuff/a8.mov&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?&teaserURL=/media/teststuff/tn_cab04_75.JPG&mediaURL=/media/teststuff/a8.mov&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?&teaserURL=/media/teststuff/tn_cab04_75.JPG&mediaURL=/media/teststuff/a8.flv”>Nonverblaster flv with teaser image test</a>
<a! class=”mediar” title=”flowplayer mov in white” href=”/js/fancybox/flowplayer-3.2.5.swf?&config={‘clip’:’/media/teststuff/a8.mov’,’autoBuffering’: ‘true’}”>flowplayer mov test</a>
<a! class=”ir2 fancybox.iframe” href=”//maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1001+Fairgrounds+Dr,+Vallejo,+CA&sll=37.0625,-95.677068&sspn=51.443116,135.263672&ie=UTF8&hq=&hnear=1001+Fairgrounds+Dr,+Vallejo,+Solano,+California+94589&ll=38.146168,-122.226076&spn=0.023625,0.036478&z=14&iwloc=A&output=embed”>sixflag marineworld</a>