The demo for MediaMogul utilises a large stock of custom code and styling to make the most of every content item and show what MediaMogul can do. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.

This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of MediaMogul. If you would like to quickly deploy a replica of our MediaMogul demo for a new Joomla site, be sure to check out our RocketLauncher package.

• In the Joomla Administrator, go to Site > Content > Static Content. Select the New icon at the top right of the control centre.
• Setup the static content item with the normal configuration, setting the fields for title, published etc..
• Make sure your images are uploaded to your Joomla! /images/stories folder.
• Scroll down to the large white box at the footer area of the content control area.
• Insert the following at the top of this text box

<script type="text/javascript" src="templates/rt_mediamogul/js/roknewsrotator.js">
</script>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var rotator = new RokNewsRotator('news-rotator', {
			delay: 7000,
			duration: 800,
                        corners: false,
			autoplay: true
		});
	});
</script>

<div id="news-rotator">
    <div class="story-block">
        <div class="image">
            <img src="images/stories/lego/rotator-1.jpg" alt="story image" />
        </div>
        <div class="story">
            <div class="padding">
                <h1>Imperials on Tatooine</h1>
                <p>In a bold move, the Empire task force has landed on the desert
 planet of Tatooine in force. It's rumored that they are searching for one very
 sannoying droid and his tiny companion, who may hold the key to the survival of
the galaxy.</p>

            </div>
        </div>    
    </div>
    <div class="story-block">
        <div class="image">
            <img src="images/stories/lego/rotator-2.jpg" alt="story image" />
        </div>
        <div class="story">
            <div class="padding">
                <h1>New Y-Wing Released</h1>
                <p>Featuring the amazing new golf ball thruster technology, the
 rebel alliance has publicly announced the development of their new
  secret weapon, the deadly Y-Wing. In addition to golf ball thrusters,
it also features an oak interior with chrome hardware.</p>

            </div>
        </div>    
    </div>
    <div class="story-block">
        <div class="image">
            <img src="images/stories/lego/rotator-3.jpg" alt="story image" />
        </div>
        <div class="story">
            <div class="padding">
                <h1>Firefighters Save the Day!</h1>
                <p>The smell of melted plastic was in the air as the well known
 egoLand Tower went up in flames. Firefighters from multiple sets converged on
the location in a desperate attempt to extinguish the flame as
 quickly and safely as possible.</p>

            </div>
        </div>    
    </div>
</div>

RokVideoScroller

• In the Joomla Administrator, go to Site > Site Modules. Select the New icon at the top right of the module control centre.
• Setup the custom module with the normal configuration, setting the fields for position, published etc..
• Scroll down to the large white box at the footer area of the module control area.
• Insert the following at the top of this text box

<script type="text/javascript" src="templates/rt_mediamogul/js/
rokvideoscroller.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var x = new RokVideoScroller('video-list',{
			'duration': 1000
		});
	});
</script>
<div id="video-list" class="video-list">
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini1.jpg" />
        </div>
        <div class="desc">
        	<p>Empire Stops Drunk Drivers</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini2.jpg" />
        </div>
        <div class="desc">
        	<p>Pilot Upset Over Crash</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini3.jpg" />
        </div>
        <div class="desc">
        	<p>Politicians Hold a Summit</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini4.jpg" />
        </div>
        <div class="desc">
        	<p>Popular Pub Past Prime</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini5.jpg" />
        </div>
        <div class="desc">
        	<p>Animal Couples Go Boating</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini6.jpg" />
        </div>
        <div class="desc">
        	<p>Here's Looking at You Kid</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini7.jpg" />
        </div>
        <div class="desc">
        	<p>Riots In BlockTown Again</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini8.jpg" />
        </div>
        <div class="desc">
        	<p>Unhappy Pet Seeks Vengeance</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
	<div class="video">
    	<div class="left">
        	<img alt="" src="images/stories/videos/mini9.jpg" />
        </div>
        <div class="desc">
        	<p>Hunting Season Opens Today</p>
            <p><a href="#">Watch Video</a></p>
        </div>
    </div>
</div

<a href="your_link" class="readon">Read More...</a>