FANCYBOX 1.3.1 1.3.4 PLUGIN FOR NUCLEUSCMS
The Fancybox website... Please go here for more information
For HTML demo go here
****Note: Found Some Bugs On The l2f.js File Which Caused IE8 Not Working 9/15/2010***
***Note: found some more ways to implement NonverBlaster & Jwplayer & Jwwmvplayer 11/03/2010***
***New l2sfancybox.js is implement in place of l2f.js***
***Current fancybox.1.3.3 is available but not used since it doesn't display well with ie8- demo is here***
****Can update the fixed... ... l2f.js file from here over the fancybox folder or reinstall the whole NP_FancyBox.zip file again****
****If a page has tooltips in action, in order for fancybox to display "title", the 'div' and 'javascript' must be closed after the tooltips, if not, fancybox will display without any 'title'.****
After tested with our website for a while, we pretty much feel comfortable to release the NP_FancyBox.zip. This plugin will automatically set noconflict for Fancybox jquery and load all 3 flash players for usage. This plugin also includes our collected jquery scripts that will this display most of the popular media types. If you installed all three plugins, you will have all the nice pop-ups ready to use for your nucleuscms blogs. We will post the usage in details next.
After using all 3 pop-ups and we... ... like fancybox the best because it's fast, easy to use, and with our scripts, changing overlay colors is painless.
*********************************************************************************
INSTALLATION
For people you want to use this plugin in a single webpage, then just extract the zip file and work with the "fancybox" folder only. The head/head header on the html page should setup just like this. Remember this set up is also includes the tooltip in case you want to use tooltip on the same page like my blog. All the codes here will be the same for any single html pages, except all the executable codes must be in the body of the html.
Unzip the NP_FancyBox.zip to the "http://yourdomain.com/yournucleus/nucleus/plugins/" folder and extract, 1 folder "fancybox" and 1 file "NP_FancyBox.php" will be in your plugins folder. Go to admin page and install the plugin. Just go to "options" and select url: "full" to display the thumbnails and set the size of the thumbnails, default is 150px. Go to the head.inc or head.php of your skins and add between the head header <%FancyBox%>. Now you're ready to use FancyBox.
USAGE
Video Players
QUICKTIME
Quicktime Player uses the quicktime template is included in the "fancybox" folder.
<p style="text-align: center;"><a class="quick" href="/testvideos/quicktime" title="Qt player">Quicktime Player Test </a></p>
************************************************
WINDOWMEDIAPLAYER
Window Media Player WMV files also need a wmv template file for each video which also included in the "fancybox" folder.
<a class="myvideo" href="/testvideos/wmv.txt" title="WMV using wmp plugin">WMPlayer WMV</a>
Jwplayer Silverlight WMVplayer plays WMV files only
<a title="Jwplayer silverlight wmvplayer" href="/testvideos/silverlightwmv.txt" class="quick"><i>Jwplayer Silverlight WMVplayer plays WMV files only</i></a>
And the silverlightwmv.txt is used as a template for all wmv files.
Window Media Player AVI files also need a avi template file for each video which also included in the "fancybox" folder.
<a class="myvideo" href="/testvideos/avi.txt" title="AVI using wmp plugin">WMPlayer AVI</a>
Window Media Player MPEG files also need a mpg template file for each video which also included in the "fancybox" folder. This one seems to work with all browsers with wmp plugin, except ie8 needs to have activex turned on.
<a class="myvideo" href="/testvideos/mpg_wmp" title="MPG using wmp plugin">WMPlayer MPG</a>
************************************************
JWPLAYER
This is the best one for fancybox, it does play all flash format: mp4, mov, swf, flv, m4v
jwplayer swf test without autostart
jwplayer swf test without autostart CODES
jwplayer mp4 with autostart test
jwplayer mp4 test with autostart CODES
With new scripts on l2sfb131.js l2sfancybox.js, we just need the file url, it's much easier now.
This is the codes for class="jwplayer"
$jQ(".jwplayer").click(function() {
$jQ.fancybox({
'padding':0,
'overlayColor': '#fff',
'transitionIn': 'elastic',
'transitionOut' :'fade',
'speedIn': 250,
'speedOut': 250,
'overlayOpacity':0.9,
'title' : this.title,
'width' : 640,
'height' : 385,
'content': '/love/nucleus/plugins/fancybox/player.swf?&file='+this.href+'&autostart=true',
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
<a title="jwplayer with file url only" href="/testvideos/ltooz560r.mp4" class="jwplayer">Jwplayer with just file url</a>
Jwplayer playlist: codes, file, xml
<p style="text-align: center;"><a href="/ltooz/media/a2010/youtube/familyski1" title="family ski" class="playlistr"><img style="vertical-align: baseline; border: 2px solid black;" title="jwplayer playlist" src="/ltooz/media/a2010/youtube/familyski.jpg" alt="jwplayer playlist" height="175" width="400" /></a></p>
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://www.ltooz.com/jwplayer5_1/player.swf','mpl','685','345','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('playlistfile','http://www.ltooz.com/ltooz/media/a2010/youtube/familyski.xml');
so.addVariable('backcolor','888888');
so.addVariable('volume','80');
so.addVariable('autostart','true');
so.addVariable('playlist','left');
so.addVariable('repeat','always');
so.write('mediaspace');
</script>
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>familyski</title>
<location>http://www.youtube.com/watch?v=u2T2Ypz5PE4</location>
<image>http://www.ltooz.com/ltooz/media/a2010/youtube/familyski.jpg</image>
</track>
<track>
<title>brandon</title>
<location>http://www.youtube.com/watch?v=zrk_DRV--9o</location>
<image>http://www.ltooz.com/ltooz/media/a2010/youtube/brandonski.jpg</image>
</track>
<track>
<title>audie</title>
<location>http://www.youtube.com/watch?v=3h8jgMK0TmM</location>
<image>http://www.ltooz.com/ltooz/media/a2010/youtube/audieski.jpg</image>
</track>
<track>
<title>sp101</title>
<location>http://www.youtube.com/watch?v=AWHKUefCXSs</location>
<image>http://www.ltooz.com/ltooz/media/a2010/youtube/sp101.jpg</image>
</track>
</trackList>
</playlist>
JWPlayer can also play an embeded file for each video, jwplayer.txt template is included in the "fancybox" folder.
<a class="myvideo" href="/testvideos/jwplayer.txt" title="Jwplayer calling file">jwplayer plays file</a></p>
************************************************
NonverBlaster-hover player
This one plays only: mp4, mov, flv, m4v
Nonverblaster MOV with autoplay test
Nonverblaster MOV with autoplay CODES
Nonverblaster flv with teaser image test
Nonverblaster flv with teaser image CODES
Nonverblaster player can also be called by using a nonvermp4.txt template included in the "fancybox" to play the file individually. One file for each video.
NonverBlaster mp4 called by file
<a title="NonverBlasterMP4" href="/testvideos/nonvermp4.txt" class="myvideo">NonverBlaster mp4 by file</a>
This is the codes for setting up Nonverblaster using class="nonverblaster" and url of the file only.
$jQ(".nonverblaster").click(function() {
$jQ.fancybox({
'padding':0,
'overlayColor': '#fff',
'transitionIn': 'elastic',
'transitionOut' :'fade',
'speedIn': 250,
'speedOut': 250,
'overlayOpacity':0.9,
'title' : this.title,
'width' : 640,
'height' : 385,
'content': '/nonverblaster/NonverBlaster.swf?&mediaURL='+this.href+'&autoPlay=true',
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
Nonverblaster player simplified with file url only
<a title="Nonverblaster with file url only" href="/testvideos/ltooz640.mov" class="nonverblaster"><i>Nonverblaster player simplified with file url only</i></a>
************************************************
FLOWPLAYER
This player can play all flash format: m4v, mp4, flv, mov but swf has playagain logo on it and it doesn't have autoplay:false working
This is the codes for flowplayer playing a url file:
<a title="flowplayer mp4 in white" href="/love/nucleus/plugins/fancybox/flowplayer-3.2.5.swf?&config={'clip':'/testvideos/ltooz560r.m4v','autoBuffering': 'true'}" class="swfw">flowplayer mp4 test</a>
Flowplayer can also play an embeded file for each video, flowflv.txt file template is included in the "fancybox" folder.
<a class="myvideo" href="/testvideos/flowflv.txt" title="Flowplayer using file">jwplayer plays file</a></p>
************************************************
SOCIAL NETWORK VIDEOS
YOUTUBE
YouTube iFrame In Fancybox white
<a class="iuw" title="Snow 2010" href="http://www.youtube.com/watch?v=sPNzD--giVE">YouTube iFrame In Fancybox white</a>
Youtubeplaylist full url Black
VIMEO
************************************************
Picture Gallery with 1 thumbnail and scrollable with mousewheel, add the code as the picture shows, the "test" is the image folder under "http://yourdomain.com/yournucleus/media/" folder and (1) is to display 1 thumbnail only, you can change this number to more than one, if you want to display all the thumbnails, then take out (1) and just leave FancyBox(test) only.
<a title="PDF display" href="/testvideos/lockcoding.pdf" class="pdf">pdf file in red</a>
HTML "fancybox.net" in blue<a href="http://fancybox.net" class="ibl">fancybox.net in blue</a>Googlemap can be displayed with iframe class, just need the embeded map code from googlemaps only, not the whole urf of the map.
Googlemaps "sixflag marineworld"
To display all types into a group of mixed media in one display like a gallery, just add the 'rel="name"' to all the links you want to be in the same group "name". BTW, this image is displayed in "class="hoverb"" with title hidden/shown on mouseover
The last and not least, autoload page
The troublesome IE6,7,8 close box fix: People who use ie6,7 or 8 do not see the close box due to path problem.
You need to edit the "jquery.fancybox-1.3.1.css", go to the bottom of the file, give all the images the full url path of your website.
change to this
BTW, if you use this plugins and you found some bugs, please let me know so we can work together to solve the problems.
Cheers,
Louis