The Fancybox website... Please go here for more information
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"
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 (mp4,wmv,flv,mov,avi), 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. There will be 3 standard files for... ... 3 players: JWplayer, Nonverblaster, and Flowplayer and 1 standard file for all wmp (window media player), since Nonverblaster 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.
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="
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
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.
use the flowplayer.txt template included inside the "fancybox" folder to create all the individual movie by copy to a new name.txt and new file url.
flowplayer flv blackQuicktime player uses the same way as the flowplayer except the qtime.txt template is different and also included in the "fancybox" folder.
Qt player black
Nonverblaster player also needs a nonverblaster.txt template included in the "fancybox" to play the file individually. One file for each video.
Window Media Player files also need a wmp.txt template file for each video which also included in the "fancybox" folder.
JWPlayer also needs a file for each video, jwplayer.txt template is included in the "fancybox" folder.
Jwplayerplaylist.txt template is needed for displaying a playlist from jwplayer setup. This one needs an playlist.xml template
Since vimeo.com seems to have many nice videos, we also need to display their videos, the format is simpler than youtube. There are to types of urls to display vimeo video ids. One is direct url and the other is moogaloop.swf.
Googlemap can be displayed with iframe class, just need the embeded map code from googlemaps only, not the whole urf of the map.
Youtubeplaylist full url Black
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 like FancyBox scripts, I think it would be nice to go the Fancybox website and donate if you can.
Cheers,
Louis