Multibox Setup Tutorial
- Details
- Category: Latest
- Published on Friday, 13 August 2010 18:18
- Hits: 5958
Features:
- Supports a range of multimedia formats: images, flash, video, mp3s, html!
- Auto detects formats or you can specify the format
- Html descriptions
- Enable/Disable page overlay when multibox pops up (via template parameters)
- Enable/Disable controls (via template parameters)
Images Example
Image #1. It can support html.
Image #2. It can support html.
Image #3. It can support html.
To enable use the following around any group of images:
<a href="http://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb2" class="s5mb" title="Grouped Image Example #1:">
<img src="http://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" />
</a>
<div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>
<a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb3" class="s5mb" title="Grouped Image Example #2:"> <img src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>
<a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb4" class="s5mb" title="Grouped Image Example #3:"> <img src="http://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>
<a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb3" class="s5mb" title="Grouped Image Example #2:"> <img src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>
<a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb4" class="s5mb" title="Grouped Image Example #3:"> <img src="http://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>
Video Example:
Youtube.com Video - CLICK MEUP: Carl and Ellie
You can use the following video formats: flv, mov, wmv, real and swf. Just insert the URL to the videos in the href of the hyperlink, here is an example of how we did this for a Youtube video:
<a href="http://www.youtube.com/v/VGiGHQeOqII" id="youtube" class="s5mb" title="Youtube.com Video">
Youtube.com Video - CLICK ME
</a>
<div class="s5_multibox youtube">UP: Carl and Ellie </div>
YouTube Tutorial: Simply right click on a youtube video and copy the embed code, then paste into a text editor and look for the embed src and use that URL in your hyperlink.
<embed src= http://www.youtube.com/v/VGiGHQeOqII
MP3 Example:
MP3 example - CLICK MEmp3 example
<a href="http://www.shape5.com/demo/images/music.mp3" id="mb8" class="s5mb" title="Music">MP3 example</a>
<div class="s5_multibox mb8">mp3 example - CLICK ME</div>
iFrame:
iFrame/HTML Example - CLICK MEGoogle.com
<a href="http://www.google.com" rel="width:790,height:600" id="mb28" class="s5mb" title="Google.com">iFrame/HTML Example - CLICK ME</a>
<div class="s5_multibox mb28">Google.com</div>
I like what I see! I want to JOIN TODAY.