Multiple Sliders on a Page

<script type="text/javascript"> if(!window.slider) var slider={};slider.anim='<?php echo $animation; ?>';slider.fade_speed=<?php echo $fadeSpeed; ?>;slider.data=[ <?php $imageSRC=""; ?> <?php for ($titleCounter = 1; $titleCounter <= 9; $titleCounter += 1) { ?> <?php if ($imageArray[$titleCounter]) { ?> <?php $imageSRC .= '{"id":"slide-img-'.$titleCounter.'","client":"'.$imageTitleArray[$titleCounter].'","desc":"'.$imageDescArray[$titleCounter].'"},'; ?> <?php } ?> <?php } ?> <?php $imageREDUCED = substr($imageSRC, 0, -1); echo $imageREDUCED; ?> ]; </script>

<?php /*------------------------------------------------------------------------ # "Hot Image Slider" Joomla module # Copyright (C) 2009 ArhiNet d.o.o. All Rights Reserved. # License: http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only # Author: HotJoomlaTemplates.com # Website: http://www.hotjoomlatemplates.com -------------------------------------------------------------------------*/ defined('_JEXEC') or die('Restricted access'); // no direct access if ($showButtons==0) { $showButtonsDisplay = 'display:none;'; }else{ $showButtonsDisplay = ''; } if ($buttonColor=="white") { $buttonColorValue = "666"; }else{ $buttonColorValue = "fff"; } // get the document object $doc =& JFactory::getDocument(); // add your stylesheet $doc->addStyleSheet( $mosConfig_live_site.'/modules/mod_hot_image_slider/tmpl/style.css' ); ?> <script type="text/javascript">var _siteRoot='index.php',_root='index.php';</script> <?php if ($enablejQuery!=0) { ?> <script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/modules/mod_hot_image_slider/js/jquery.min.js"></script> <?php } ?> <!--<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/modules/mod_hot_image_slider/js/scripts.js"></script>--> <!--[if IE 6]> <script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/modules/mod_hot_image_slider/js/pngfix.js"></script> <script> POS_BrowserPNG.fix('div#header_hotslider div#slide-holder div#slide-controls p#slide-nav a,div#header_hotslider div#slide-holder div#slide-controls'); </script> <![endif]--> <div id="header_hotslider<?php $rand_id = rand(1,100); echo $rand_id; ?>"><div class="hotwrap"> <div id="slide-holder<?php echo $rand_id;?>"> <div id="slide-runner<?php echo $rand_id;?>"> <?php for ($imageCounter = 1; $imageCounter <= 9; $imageCounter += 1) { ?> <?php if ($imageArray[$imageCounter]) { ?> <?php if (($showLink!=0)and($imageLinkArray[$imageCounter]!="")) { ?><a href="<?php echo $imageLinkArray[$imageCounter]; ?>"<?php if($linkNewWindow) { ?> target="_blank"<?php } ?>><?php } ?> <img id="slide-img-<?php echo $imageCounter; ?>" src="<?php echo $mosConfig_live_site; ?>/<?php echo $imageFolder ?>/<?php echo $imageArray[$imageCounter]; ?>" class="slide" alt="" /> <?php if (($showLink!=0)and($imageLinkArray[$imageCounter]!="")) { ?></a><?php } ?> <?php } ?> <?php } ?> <div id="slide-controls<?php echo $rand_id;?>"> <div id="slide-nav<?php echo $rand_id;?>"></div> <?php if ($showNames!=0) { ?><p id="slide-client<?php echo $rand_id;?>" class="text"><span></span></p><?php } ?> <?php if ($showDesc!=0) { ?> <div style="clear:both"></div> <p id="slide-desc<?php echo $rand_id;?>" class="textdesc"></p> <?php } ?> </div> </div> </div> <?php // script declaration $doc->addScriptDeclaration( 'jQuery.noConflict(); jQuery(function () { jQuery("a").focus(function () { this.blur(); }); SI.Files.stylizeAll(); slider.init(); }); var slider = { num: -1, cur: 0, cr: [], al: null, at: 10 * 1000, /* change 1000 to control speed*/ ar: true, anim:"slide", fade_speed:600, init: function () { if (!slider.data || !slider.data.length) return false; var d = slider.data; slider.num = d.length; var pos = Math.floor(Math.random() * 1); for (var i = 0; i < slider.num; i++) { if(slider.anim == "fade") { jQuery("#" + d[i].id).hide(); } else{ jQuery("#" + d[i].id).css({ left: ((i - pos) * 1000) }); } jQuery("#slide-nav'.$rand_id.'").append("<a id="slide-link-" + i + "" href="#" onclick="slider.slide(" + i + ");return false;" onfocus="this.blur();">" + (i + 1) + "</a>"); } jQuery("img,div#slide-controls'.$rand_id.'", jQuery("div#slide-holder'.$rand_id.'")).fadeIn(); slider.text(d[pos]); slider.on(pos); if(slider.anim == "fade") { slider.cur = -1; slider.slide(0); } else{ slider.cur = pos; window.setTimeout("slider.auto();", slider.at); } }, auto: function () { if (!slider.ar) return false; var next = slider.cur + 1; if (next >= slider.num) next = 0; slider.slide(next); }, slide: function (pos) { if (pos < 0 || pos >= slider.num || pos == slider.cur) return; window.clearTimeout(slider.al); slider.al = window.setTimeout("slider.auto();", slider.at); var d = slider.data; if(slider.anim == "fade") { for (var i = 0; i < slider.num; i++) { if(i == slider.cur || i == pos) continue; jQuery("#" + d[i].id).hide(); } if(slider.cur != -1){ jQuery("#" + d[slider.cur].id).stop(false,true); jQuery("#" + d[slider.cur].id).fadeOut(slider.fade_speed); jQuery("#" + d[pos].id).fadeIn(slider.fade_speed); } else { jQuery("#" + d[pos].id).fadeIn(slider.fade_speed); } } else { for (var i = 0; i < slider.num; i++) jQuery("#" + d[i].id).stop().animate({ left: ((i - pos) * 1000) }, 1000, "swing"); } slider.on(pos); slider.text(d[pos]); slider.cur = pos; }, on: function (pos) { jQuery("#slide-nav a").removeClass("on"); jQuery("#slide-nav a#slide-link-" + pos).addClass("on"); }, text: function (di) { slider.cr["a"] = di.client; slider.cr["b"] = di.desc; slider.ticker("#slide-client'.$rand_id.' span", di.client, 0, "a"); slider.ticker("#slide-desc'.$rand_id.'", di.desc, 0, "b"); }, ticker: function (el, text, pos, unique) { if (slider.cr[unique] != text) return false; ctext = text.substring(0, pos) + (pos % 2 ? "-" : "_"); jQuery(el).html(ctext); if (pos == text.length) jQuery(el).html(text); else window.setTimeout("slider.ticker("" + el + "","" + text + ""," + (pos + 1) + ","" + unique + "");", 30); } }; if (!window.SI) { var SI = {}; }; SI.Files = { htmlClass: "SI-FILES-STYLIZED", fileClass: "file", wrapClass: "cabinet", fini: false, able: false, init: function () { this.fini = true; var ie = 0 if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) { return; } this.able = true; var html = document.getElementsByTagName("html")[0]; html.className += (html.className != "" ? " " : "") + this.htmlClass; }, stylize: function (elem) { if (!this.fini) { this.init(); }; if (!this.able) { return; }; elem.parentNode.file = elem; elem.parentNode.onmousemove = function (e) { if (typeof e == "undefined") e = window.event; if (typeof e.pageY == "undefined" && typeof e.clientX == "number" && document.documentElement) { e.pageX = e.clientX + document.documentElement.scrollLeft; e.pageY = e.clientY + document.documentElement.scrollTop; }; var ox = oy = 0; var elem = this; if (elem.offsetParent) { ox = elem.offsetLeft; oy = elem.offsetTop; while (elem = elem.offsetParent) { ox += elem.offsetLeft; oy += elem.offsetTop; }; }; var x = e.pageX - ox; var y = e.pageY - oy; var w = this.file.offsetWidth; var h = this.file.offsetHeight; this.file.style.top = y - (h / 2) + "px"; this.file.style.left = x - (w - 30) + "px"; }; }, stylizeById: function (id) { this.stylize(document.getElementById(id)); }, stylizeAll: function () { if (!this.fini) { this.init(); }; if (!this.able) { return; }; var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == "file" && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) this.stylize(input); }; } }; (function (jQuery) { jQuery.fn.pngFix = function (settings) { settings = jQuery.extend({ blankgif: "blank.gif" }, settings); var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1); var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1); if (jQuery.browser.msie && (ie55 || ie6)) { jQuery(this).each(function () { var bgIMG = jQuery(this).css("background-image"); if (bgIMG.indexOf(".png") != -1) { var iebg = bgIMG.split("url("")[1].split("")")[0]; jQuery(this).css("background-image", "none"); jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="" + iebg + "",sizingMethod="" + settings.sizingMethod + "")"; } }); } return jQuery; }; })(jQuery); jQuery(function () { if (jQuery.browser.msie && jQuery.browser.version < 7) { } }); '); // style declaration $doc->addStyleDeclaration( ' div.hotwrap { width:'.$sliderWidth.'px; margin:0 auto; text-align:left; } div#top { float:left; clear:both; width:'.$sliderWidth.'px; height:52px; margin:22px 0 0; } div#header_hotslider'.$rand_id.' div.hotwrap { height:'.$sliderHeight.'px; background:#'.$backgroundColor.'; } div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' { width:'.$sliderWidth.'px; height:'.$sliderHeight.'px; position:absolute; } div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-runner'.$rand_id.' { top:'.$borderWidth2.'px; left:'.$borderWidth2.'px; width:'.$sliderWidth2.'px; height:'.$sliderHeight2.'px; overflow:hidden; position:absolute; } div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-controls'.$rand_id.' { left:0; bottom:0px; width:'.$sliderWidth2.'px; height:46px; display:none; position:absolute; background:url('.$mosConfig_live_site.'/modules/mod_hot_image_slider/images/slide-bg.png) 0 0; } div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-controls'.$rand_id.' div#slide-nav'.$rand_id.' { float:right; '.$showButtonsDisplay.' } p.textdesc { float:left; color:#fff; display:inline; font-size:10px; line-height:16px; margin:15px 0 0 20px; text-transform:uppercase; overflow:hidden; color:#'.$descColor.'; } div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-controls'.$rand_id.' div#slide-nav'.$rand_id.' a { background-image:url('.$mosConfig_live_site.'/modules/mod_hot_image_slider/images/slide-nav-'.$buttonColor.'.png); color:#'.$buttonColorValue.'; top:11px; position:relative; } ' ); ?> <script type="text/javascript"> if(!window.slider) var slider={};slider.anim='<?php echo $animation; ?>';slider.fade_speed=<?php echo $fadeSpeed; ?>;slider.data=[ <?php $imageSRC=""; ?> <?php for ($titleCounter = 1; $titleCounter <= 9; $titleCounter += 1) { ?> <?php if ($imageArray[$titleCounter]) { ?> <?php $imageSRC .= '{"id":"slide-img-'.$titleCounter.'","client":"'.$imageTitleArray[$titleCounter].'","desc":"'.$imageDescArray[$titleCounter].'"},'; ?> <?php } ?> <?php } ?> <?php $imageREDUCED = substr($imageSRC, 0, -1); echo $imageREDUCED; ?> ]; </script> </div></div>