David,
Unfortunately our Moodle is housed on an internal server, so anyone outside the organization won't be able to access and view. However I am pasting the code that we used below. Hopefully that will help and give you some ideas. The first piece of code is for the separate file that we named imagerotate.css. The second piece is what we had to put in the header section of our General.php file under the layout folder in the theme section. Keep in mind that the image locations will need to be changed based on where you store them. We have a separate folder that we keep ours in named images.
Separate file:
/*--Main Container--*/ .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:122px; width: 1701px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; border-bottom: none; } .image_reel { position: absolute; top: 0; left: 0; z-index: 1 } .image_reel img {float: left;}
/*--Paging Styles--*/ .paging { position: absolute; bottom: 5px; right: -30px; width: 178px; height:47px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; background: url(paging_bg2.png) no-repeat; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: white; } .paging a.active { font-weight: bold; background: gray; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;}
To go into header section of General.php:
<?php
$hasheading = ($PAGE->heading); $hasnavbar = (empty($PAGE->layout_options['nonavbar']) && $PAGE->has_navbar()); $hasfooter = (empty($PAGE->layout_options['nofooter'])); $hassidepre = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-pre', $OUTPUT)); $hassidepost = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-post', $OUTPUT));
$showsidepre = ($hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT)); $showsidepost = ($hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT)); $custommenu = $OUTPUT->custom_menu(); $hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
$bodyclasses = array(); if ($showsidepre && !$showsidepost) { $bodyclasses[] = 'side-pre-only'; } else if ($showsidepost && !$showsidepre) { $bodyclasses[] = 'side-post-only'; } else if (!$showsidepost && !$showsidepre) { $bodyclasses[] = 'content-only'; } if ($hascustommenu) { $bodyclasses[] = 'has_custom_menu'; } echo $OUTPUT->doctype() ?> <html <?php echo $OUTPUT->htmlattributes() ?>> <head> <title><?php echo $PAGE->title ?></title> <link rel="shortcut icon" href="<?php echo $OUTPUT->pix_url('favicon', 'theme')?>" /> <?php echo $OUTPUT->standard_head_html() ?> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <link rel="stylesheet" type="text/css" href="ImageRotate.css"/> <script type="text/javascript"> $(document).ready(function() { //Show the paging and activate its first link $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of the image, how many images there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging and Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation and Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds $active = $('.paging a.active').next(); //Move to the next paging if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (7 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation timer }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation timer return false; //Prevent browser jump to link anchor }); }); </script> </head> <body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses.' '.join(' ', $bodyclasses)) ?>"> <?php echo $OUTPUT->standard_top_of_body_html() ?>
<div id="page"> <div id="wrapper" class="clearfix"> <?php if ($hasheading || $hasnavbar) { ?>
<div id="page-header" class="clearfix">
<?php if ($hasheading) { ?> <!--<h1 class="headermain"><!--?php echo $PAGE->heading ?></h1> --> <!-- ROTATOR BEGIN --> <div class="main_view"> <div class="window"> <div class="headermenu"> <?php echo $OUTPUT->login_info(); if (!empty($PAGE->layout_options['langmenu'])) { echo $OUTPUT->lang_menu(); } echo $PAGE->headingmenu ?> </div> <div class="image_reel"> <img src="images/reel/1.png" alt="" /></a> <img src="images/reel/2.png" alt="" /><img src="images/reel/3.png" alt="" /><img src="images/reel/4.png" alt="" /></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div> <!-- ROTATOR END --> <?php } ?>
</div>
<?php if ($hascustommenu) { ?> <div id="custommenu"><?php echo $custommenu; ?></div> <?php } ?>
<?php if ($hasnavbar) { ?> <div class="navbar clearfix"> <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div> <div class="navbutton"> <?php echo $PAGE->button; ?></div> </div> <?php } ?>
<?php } ?>
Hope this helps!
Fred
