Multiple Sliders on a Page

  • ElTel
    Inactive member
  • Topic Author
  • New Member
  • New Member
More
13 years 11 months ago #988 by ElTel
I like the Image Slider, but want to use it more than once on a page, in 3 different positions.

Tried it and it seemed to get very confused.

Is there a way to do this with Image Slider?

If not, does your new commercial offering Image Rotator allow you to do this?

Cheers

Please Log in to join the conversation.

  • milos
    Support Staff
  • Moderator
  • Moderator
More
13 years 11 months ago #990 by milos
Unfortunately, running image slide show modules more that once on a page is not possible. You can run Image Slider + Effects Slider at the same time on a page though.

Please Log in to join the conversation.

More
12 years 10 months ago #8235 by alniko
is it not possible at all? all could you enable that feature in the future releases?

Please Log in to join the conversation.

More
11 years 1 month ago #25438 by Etheart
Hi. I'd love to have two sliders on my page as well.
Is there anything I can do, code-wise, to achieve this? Like having two instances of the module, under different names? I know PHP, so I would not mind trying it out, if you can give me a quick clue.
Thanks!

Please Log in to join the conversation.

More
11 years 1 month ago #25444 by ivan.milic
Most of work you need to do in tmpl/default.php , you need to generate some random number to uniquely identify particular instance. Then use it to generate ID for component. After you done that make sure all script and all css targets only that component by using unique ID you created. Also you will have to add option to enable/disable component js file because two references to same js often create problem because second one overwrites initialization of first one.

Please Log in to join the conversation.

More
10 years 9 months ago #30044 by iFritz
Hi all,

i have to pick up this topic as i'm in the same situation now.

As mentioned above, i altered(quick) the default.php. But i can't get any further now.
How do i acces the actual slider via the jQuery command???? The problem is, i think somehwere, here:
Code:
<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>

I changed the default.php, so it creates unique instances of sliders. Please find the new code below..
Any clues would be very appreciated. I did all the changes inline for testing purposes. So please don't it...

Code:
<?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>

Please Log in to join the conversation.

Time to create page: 0.321 seconds
Powered by Kunena Forum