The Original Website That Started This Plugin, please go here for more information about options
The newest version NP_MediaboxAdv134.zip.
<%MediaboxAdv134%> needs to be placed between <head> and </head> of the head.php or head.inc in your skin folder.
This page now is implemented with the new mediaboxAdv1.3.4.js and use Quicktime to play .mov files (for MAC users using Safari) and JWplayer as default for Flash, MP4, and FLV.
For those who has... ... the older version V1.0, V1.01 or V131 just download the newest version, uninstall the old plugin and reinstall the new oneady to go. Please feed back if you have any... ... problems.
****Since youtube has the new iframe codes with supports html5, css3 this version will work with Firefox 3.6, Chrome, Safari, Opera 10.5+ and some with ie8****
Please edit the "mediaboxAdv1.3.4.js" with notepad++ and give the nonverblaster player the path of your domain "http://yourdomain.com/yournucleus/nucleus/plugins/mediaboxadv/Nonverblaster.swf" for Nonverblaster player to work
Or if you want to use JWPlayer instead, then change the "true" to "false" in NB, give the "player.swf" the correct path then JWplayer will be a default player for flash.
To change ".mov" default player to flash player (nonverblaster or jwplayer) instead of quicktime if you want fullscreen option, just add the ".mov" to the "videos" container in the "mediaboxAdv1.3.4.js" file.
There are instances that some people can't get the plugin to work due to jquery conflict. Make sure you solve the no.conflict with all the jquery that you use on your webpage. If you view the source of this webpage you will see all plugins or scripts that use jquery were added no.conflict for each one of them.
***Identify which jquery causes the problem?***
- Install the plugin, save the head.inc or head.php to a backup file. Remove all the *.js in the head header and just leave the plugin to see if it works.
- It it works, then put back all the *.js one by one until you find the one that causes the conflict.
***How to set noconflict for these jquery***
Take tooltips as an example, tooltips & flowplayer use the same "jquery.tools.mins.js" scripts, right after the line, reassign the $ variable to $j
then everytime we fire it up with the codes, all "$" used must be changed to "$j" like this
Do this with all the conflicted JS script, and each JS script must have a DIFFERENT variable assigned to it. Like in my header, fancybox $=$jQ
DONE. There are many ways to do this, this is the way that works for me, you can read more here, if anything better, please show me NOCONFLICT
****When you install the plugin, the admin function does not work with local PC via xampp due to read only media folder****
****The admin function is for clearing thumbnails caching only which isn't needed for the plugin to work****
To display only 1 thumbnail for the whole folder "test" type @ <%MediaboxAdv134(test(1))%> (no space between @ and <%)
To display all thumbnails of the whole folder "test" type @ <%MediaboxAdv134(test)%> (no space between @<%)
Using quicktime, it doesn't automatically resize the videoscreen, we have to manually enter the video correct sizes.
<p style="text-align: center;"><a rel="lightbox[600 325]" href="/testvideos/ltooz1a1s.mov" title="ltooz1a1s.mov with Quicktime">mov file using Quicktime</a></p>
***How To Display Videos As Playlist***
<p style="text-align: center;"><a rel="lightbox[flash]" href="/testvideos/l2com.swf" title="l2com.swf with flash player">swf video in playlist</a></p>
<p style="text-align: center;"><a rel="lightbox[flash]" href="/testvideos/l2com.swf" title="l2com.swf with flash player"> </a></p>
<p style="text-align: center;"><a rel="lightbox[flash]" href="/testvideos/l2com.swf" title="l2com.swf with flash player"></a></p>
<p style="text-align: center;"><a rel="lightbox[flash]" href="/testvideos/ltooz640.flv" title="ltooz640.flv with JwPlayer">Flash flv file Using JwPlayer Player in playlist</a></p>
<p style="text-align: center;"><a rel="lightbox[flash]" href="/testvideos/ltooz560b.mp4" title="ltooz560b.mp4 with Jwplayer Player">Mp4 video using JwPlayer Player in playlist</a></p>
Flash flv file Using JwPlayer Player in playlist
Mp4 video using JwPlayer Player in playlist
***How To Display Youtube Playlist Video***
All youtube & vimeo videos are using the new iframe codes. For youtube to display correctly, width(px) & height(px) must be set "lightbox[width height]"
***How To Display Single Youtube Video***
<p style="text-align: center;"><a rel="lightbox[640 385]" href="http://www.youtube.com/watch?v=sPNzD--giVE" title="Snow 2010">YouTube iFrame In MediaboxAdvance134</a></p>
YouTube iFrame Single In MediaboxAdvance
***How To Display WMV Video***
<p style="text-align: center;"><a rel="lightbox" href="/testvideos/ltooz640.wmv" title="ltooz640.wmv with WMP">WMV video only works with non-ie browsers</a> </p>
WMV video only works with non-ie browsers
***How To Display HTML PAGE***
<p style="text-align: center;"><a rel="lightbox[80% 80%]" href="http://iaian7.com/webcode/mediaboxAdvanced">MediaboxAdvanced website in Iframe 80% screen</a></p>
MediaboxAdvanced website in Iframe 80% screen
<p style="text-align: center;"><a rel="lightbox[90% 90%]" href="http://ltooz.com/testvideos/lockcoding.pdf">Pdf file in iframe 90% screen</a></p>
***How To Display Vimeo Video***
<p style="text-align: center;"><a href="http://vimeo.com/877053" rel="lightbox[social]">Vimeo</a></p>
***How To Display Google Maps***
<p style="text-align: center;"><a rel="lightbox[iframe 90% 90%]" href="http://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></p>
***For iframe settings, I believe we can just put the % of the screen without the "iframe" and it still works [90% 90%]***
Modifying CSS file.
If we want to customize the overlay color, border and stuff, we can modify either the mediaboxAdvBlack21.css or mediaboxAdvWhite.css
For Overlay (outside color)
#mbOverlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #838A9A; /*change color code here*/
cursor: pointer;
}
For the thickness of the border of the frame
#mbImage {
position: relative;
left: 0;
top: 0;
/* Begin styles for inline content, if no style is given */
font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
line-height: 20px;
font-size: 12px;
color: #fff;
text-align: left;
background-position: center center;
background-repeat: no-repeat;
padding: 10px; /*Change padding here: bigger border = bigger number*/
}
For the rounded corners, css3 shadows and box color
#mbCenter {
position: absolute;
z-index: 9999;
left: 50%;
overflow: hidden;
background-color: #000;/*box caption color code here*/
-moz-border-radius: 10px; /*rounded corner values: bigger number=bigger rounded edge*/
-webkit-border-radius: 10px;
border-radius: 10px;
/* -moz-box-shadow: 0px 0px 20px 0px #F75D59; rgba(0,0,0,0.70); *//*CSS3 shadows width and color*/
/* -webkit-box-shadow: 0px 0px 20px 0px #F75D59;*#800517;rgba(0,0,0,0.70);*/
/*box-shadow: 0px 0px 20px 0px #F75D59;#800517;F87431;rgba(0,0,0,0.70);*/
}
For opacity of the overlay display, edit .js file
overlayOpacity: 0.7, // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
resizeOpening: true, // Determines if box opens small and grows (true) or starts at larger size (false)
resizeDuration: 240, // Duration of each of the box resize animations (in milliseconds)
resizeTransition: false, // Mootools transition effect (false leaves it at the default)
initialWidth: 320, // Initial width of the box (in pixels)
To change "close","previous","next" buttons
Default from mediaboxAdv-1.3.4.js
close: function(){
close(); // Thanks to Yosha on the google group for fixing the close function API!
},
open: function(_images, startImage, _options) {
options = $extend({
text: ['<big>«</big>','<big>»</big>','<big>×</big>'],
We can change to button gif files for these buttons by remove "characters" and replace with gif files in the "image" folder defined in the CSS file
close: function(){
close(); // Thanks to Yosha on the google group for fixing the close function API!
},
open: function(_images, startImage, _options) {
options = $extend({
text: ['','',''],
mediaboxAdvBlack.css file
#mbPrevLink {
width: 69px;
background: transparent url(images/BlackPrevious.gif) no-repeat center;
}
#mbNextLink {
width: 41px;
background: transparent url(images/BlackNext.gif) no-repeat center;
}
#mbCloseLink {
width: 46px;
background: transparent url(images/BlackClose.gif) no-repeat center;
}
Cheers
Louis