FANCYBOX 1.3.1 PLUGIN FOR NUCLEUSCMS
The Fancybox website... Please go here for more information
****Note: Found Some Bugs On The l2f.js File Which Caused IE8 Not Working 9/15/2010***
****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.
Our scripts will cover these types of displays and each type will have 4 colors of overlay:
1. Iframe, class="ir" (red), class="ib" (black), class="ibl" (blue), class="iw" (white), this class will display all href="text", "pdf","html","googlemaps"
2. Youtube videos, class="youtuber" (red), class="youtubeb (black), class="youtubew" (white), class="youtubebl" (blue), this class will display all href="full url of youtube video"--- Added class="iu" (standard),"iub" (black), "iuw" (white), "iubl" (blue) for iFrame youtube videos.
3. Youtube playlist, class="youtubeplr" (red), class="youtubeplb" (black), class="youtubeplw" (white), class="youtubeplbl" (blue), this class will display all href="full url of youtube playlist vides".
4. Movie files (wmv,avi,mpg), class="movier" (red), class="movieb" (black), class="moview" (white), class="moviebl" (blue), this class will display all href="moviefile". Each type of "moviefile" will be defined with a player and the file to be played. Wmp (window media player) will detect wmv, avi files.
5. Flash videos, class="swfr" (red), class="swfb" (black), class="swfw" (white), class="swfbl" (blue), this class will display all href="swf" flash videos and vimeo url "http://vimeo.com/moogaloop.swf?clip_id="
There will be 3 standard files for 3 players: JWplayer, Nonverblaster, and Flowplayer using Flash videos classes. Since all of these players can play both .mov and .mp4, quicktime player is not needed for these files, in case you insist to use quicktime player, there is a template file for quicktime also.
6. Vimeo videos, class="vimeor" (red), class="vimeob" (black), class="vimeobl" (blue), class="vimeow" (white), this class will display all href="vimeo_url".
7. Images, class="ltooz" (whiteblue), class="ltoozw" (white), class="ltoozb" (black), class="ltoozr" (red), class="ltoozbl" (blue), this class will display all images with titles outside the images href=".jpg,gif..".
8. Images, class="hover" (default), class="hoverr" (red), class="hoverb" (black), class="hoverw" (white), class="hoverbl" (blue), this class will display images with titles shown only when mouse over the images and hidden when mouse's out.
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.
************************************************
WINDOWMEDIAPLAYER
Window Media Player WMV files also need a wmv template file for each video which also included in the "fancybox" folder.
Jwplayer silverlight WMV files also need a Silverlight template file for each video which also included in the "fancybox" folder.
<a class="myvideo" href="/fancybox131/wmv" title="WMV using wmp plugin">WMPlayer WMV</a>
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="/fancybox131/avi" 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.
<a class="myvideo" href="/fancybox131/mpg" 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
Jwplayer playlist: codes, file, xml
JWPlayer can also play an embeded file for each video, jwplayer.txt template is included in the "fancybox" folder.
<a class="myvideo" href="/fancybox131/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="/fancybox131/nonvermp4.txt" class="myvideo">NonverBlaster mp4 by file</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
Flowplayer can also play an embeded file for each video, flowflv.txt file template is included in the "fancybox" folder.
<a class="myvideo" href="/fancybox131/flowflv.txt" title="Flowplayer using file">jwplayer plays file</a></p>
************************************************
SOCIAL NETWORK VIDEOS
YOUTUBE
YouTube iFrame In Fancybox white
Youtubeplaylist full url Black
VIMEO
************************************************
Displaying Images As A Gallery
To show 1 thumbnail and display all pictures in the folder "test"
<a class="ltoozb" href="/ltooz341/media/test/snow1.JPG" rel="gallerytest" title="snow1.JPG"><img src="/ltooz341/nucleus/plugins/fancybox/thumbnail.php?path=/ltooz341/media/&image=test/snow1.JPG&size=250" alt="snow1.JPG" style="border:0px solid" /> <a class="ltoozb" href="/ltooz341/media/test/snow2.JPG" rel="gallerytest" title="snow2.JPG" style="display:none">snow2.JPG <a class="ltoozb" href="/ltooz341/media/test/snow3.JPG" rel="gallerytest" title="snow3.JPG" style="display:none">snow3.JPG
<a title="PDF display" href="/testvideos/lockcoding.pdf" class="ir">pdf file in red</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
testing inline BTW, if you use this plugins and you found some bugs, please let me know so we can work together to solve the problems
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
//
