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.

Search Module

Module Configuration

• Link Title: Select if you want your titles to link to the article or not
• Link Images: Select if you want the images to link to the article or not
• Frontpage Items: This option controls whether frontpage items are shown
• Count: Enter the value of how many articles you wish to have in the module
• Category: Controls the category where the content is loaded from
• Section: Controls the section where the content is loaded from
• Include Mootools JS Library: Set to no unless using a template which doesn't have mootools already being called
• Read More Label: The text placed in the read more button
• Transition Duration: The time taken for the transition between articles in ms
• Delay Length: The time taken for a transition to occur
• Show Image Corners: If set to yes produces rounded cornered images, default is square
• AutoPlay Rotator: Sets the module to automatically change articles or stay static for user input
• Preview Length: Set a value to choose how many characters are shown as a preview of the full article

1. Navigate to Admin > Extensions > Module Manager > RokNewsRotator
2. Assign the module to the rotator position (By default, Joomla does not include this module position, so just type the rotator name into the position field.)
3. Create your static content item
4. Insert the following syntax {loadposition rotator} into the content item
   
   The article will now load the module

<!--IMAGE image_path IMAGE-->

<!--IMAGE images/stories/lego/rotator-3.jpg IMAGE-->

The Custom Script Approach

• In the Joomla Administrator, go to Admin > Content > Article Manager. 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_j15/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>

RokMediaScroller

Module Configuration

• ID of Module Set unique ID's for each of your RokMediaScroller module instances so you can use more than one on a single page.
• Count: Enter the value of how many feed items you wish to have the module display.
• Feed URL Enter the url for the RSS feed for the media items you want to display.
• Include rokmediascroller.js file: Set to no if another module is calling this file.
• Transition Duration: The time taken for the transition between articles in ms

The Custom Script Approach

• In the Joomla Administrator, go to Extensions > Module Manager. 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_j15/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>