How to use media box on AppSite.

Hello guys would you please tell me what you guys used to display the 3 videos on the from page in that highslide style ?

Hi

That's a new feature added on our templates.
It's mootools javascript added on this file ../js/gk.video.js

Using the demo, the first video have this structure:

Code: Select all

<a class="gk_video_frame" href="http://www.vimeo.com/16274294" rel="mediabox[720 410]">
<img src="images/stories/demo/demo_video_1.png" border="0" alt="Video 1" />
<span class="gk_vframe">Frame</span>
<span class="gk_voverlay">Overlay</span>
 Watch the video </a>


You can use this structure, on custom module type or joomla content articles.
Change only video url (vimeo, youtube or other), change media box size, thumbnail image and end text "Watch the video" if you want to use it.

This is the first time that we add this media support and probably the way to use it might not be the easiest way. In future projects, this might turn out as plugin like GK Typography.

Cheers

Nice i like the outcome. It would be really cool if you guys could make it into a module. By the way can I use it on a previously released template like for example sporter or musicity?

Hi again

Yes you can.
Follow this basic instructions:

Using Musicity template as example, copy gk.video.js file from AppSite js directory and paste it on ../gk_musicity/js/gk.video.js

Next open ../gk_musicity/layouts/blocks/head.php and add this line:

Code: Select all

<script type="text/javascript" src="<?php echo $this->templateurl() . '/js/gk.video.js'; ?>"></script>

before

Code: Select all

<?php if($this->getParam('css_override')) $document->addStylesheet($this->templateurl() . '/css/override.css'); ?>

CSS support:
Add this lines on gk_stuff.css:

Code: Select all

/* Moviebox stylesheet */
#lbOverlay { position: fixed; height: 100%; top: 0; left: 0; width: 100%; background: #fff; cursor: pointer; z-index:100000; }
#lbCenter { position: fixed; left: 50%; top: 50%; overflow: hidden; background: #fff; z-index:100001; }
#lbBottomContainer { display:none; }
.lbLoading { background: #fff url(/images/loader.gif) no-repeat center; }
#lbImage { background-repeat: no-repeat; border: 20px solid #fff; }
#lbPrevLink,
#lbNextLink { display: none; }
/* slimbox override */
#sbox-overlay { background: #fff!important; }
#sbox-window { background-color: #fff!important; border-radius: 0!important; -moz-border-radius: 0!important; -webkit-border-radius: 0!important; padding: 20px!important; }
#sbox-btn-close { display: none; }

/* videos */
a.gk_video_frame { font-size: 11px; color:#888; display:block; width: 110px; padding-top:85px; margin-left:30px; position:relative; text-align: center; float:left; margin-top:20px;}
a:hover.gk_video_frame { color: #3B3B3B}
a.gk_video_frame:first-child { margin-left:20px; }

a.gk_video_frame img { margin-top:-87px; display:block; margin:0 auto; width:103px; height:61px; position: absolute; top: 0; width: 103px; z-index: 98; }
a.gk_video_frame span.gk_vframe { display:block; text-indent:-999em; position: absolute; z-index:99; width:110px; height:80px; background: transparent url('../images/video_frame.png') no-repeat center 0; top:0; }
a.gk_video_frame span.gk_voverlay { text-indent:-999em; position: absolute;top:0; z-index:100; display:block; width:110px; height:65px; background: transparent url('../images/video_icon.png') no-repeat center 15px;   }
a:hover.gk_video_frame span.gk_voverlay { background-position: 50% -67px}
.gk_block h3 a:hover { color:#36b0e4; }

#lbCenter { box-shadow:0 0 10px #aaa; -moz-box-shadow: 0 0 10px #aaa; -webkit-box-shadow:  0 0 10px #aaa; }


Get the following images from Appsite

../gk_appsite/images/video_frame.png
../gk_appsite/images/style1/video_icon.png

and copy to Musicity
../gk_musicity/images/video_frame.png
../gk_musicity/images/video_icon.png


This should work fine.
Naturally, you can add classes for each style on Musicity.

Cheers

If I thank it has tried and it functioned very well. Where can one put the bright white background more darkly rather black?

I'm very impressed that you took the time to share that information indepth.

Thank you!


Also, I agree, a plugin ala modalizer would be great for this!
Cheers!

Is it possible to load a module or article without scroll bars? In other words the modal box strictly shows the content, similar to how it only showcases the video, and not the site the video is located.

http://www.nonumber.nl/extensions/modalizer can load URLs which if used properly may do the trick.

There is a javascript or jquery conflict between the template's media box and the modalizer plugin. Which is why I posted my question I am going to test on a local install by removing the native js for the media box and see if I can get modalizer to work with Appsite. I will post my findings.

Solved! After a little research into the native media box used by the awesome developers at Gavick, you can easily display inline content without using a third-party plugin such as Modalizer. All that is needed is an anchor tag starting with "#mb_" and a rel tag in your link such as "mediabox[inline X Y]". The example below worked with the Appsite template:

Code: Select all

<a href="#mb_inline" rel="mediabox[inline 360 180]" title="">inline content »</a>

Code: Select all

<div id="mb_inline" style="display: none;"> <span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.<br/><br/> <a href="" onclick="Mediabox.close();return false;">close onClick »</a></span></div>

For more information on the Mediabox's capabilities this website is the best resource: iaian7.com

I've added this code inside a frontpage_advertisement to run a video but I would like to know...

Is there a way to get the video to autostart instead of having to press play?

Thx!

http://buenavidaproductions.com/index.html

Not all have this option.
You can check parameters available on ../gk_appsite/js/gk.video.js

In case of YouTube media player, autoplay parameter is enable.

If this code work in Joomla 1.6?

EDIT: ok i search and i have a answer. Its works in Joomla 1.6

Thank you!