Fancybox 2 And Fancybox 1.3.4 In WordPress

[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–>

Fancybox 1.3.4

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=”//www.dognmonkey.com”>HTML </a>

HTML Without fancybox.iframe

<! 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>

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=”//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=”//www.youtube.com/embed?listType=playlist&list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY”>YouTube playlist iframe</a>

Vimeo Url

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

Vimeo Moogaloop

<a! class=”mediar” title=”Short Love Story” href=”//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=”//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>

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.

    • 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

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.