[fancybox2]
Fancybox 2 is final now – I don’t use fancybox 1 or 2 anymore
Now FancyBox 2.0.6.1 is out, 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–>
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>
9 Comments
I really appreciate your attention, but I simply can’t make any of them work. I’d propably have to get back to a plugin, thoufg I’d prefer the real code.
Many thanks for your help
Best
Reinar
Your page is working on my website, all you need is to place all scripts to your server and direct the urls to them. Don’t give up, you’re almost there.
It’ seems as if you have your own package of scripts – can those be downloaded somewhere?
I just change all your scripts to mine and it works. Just right click the page, save it as gallery.html somewhere, loaded up to your website for reference. Click on every script, save as the same name on your computer, load them up on your website and it will work. Yes, I wrote all custom scripts into a file idogfb20c2.js, make sure the script file is on the website.
yourpage on dognmonkey