Search Form and Social Buttons

HotThemes Logo and Top Menu

To request a forum account, please login here and open support ticket. Only customers with active order(s) can open forum account!

× Discussion about Hot Image Slider free Joomla module.

Topic-icon Multiple Sliders on a Page

More
7 years 8 months ago #988 by ElTel
ElTel created the topic: Multiple Sliders on a Page
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.

More
7 years 8 months ago #990 by milos
milos replied the topic: Re: Multiple Sliders on a Page
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
6 years 6 months ago #8235 by alniko
alniko replied the topic: Re: Multiple Sliders on a Page
is it not possible at all? all could you enable that feature in the future releases?

Please Log in to join the conversation.

More
4 years 10 months ago #25438 by Etheart
Etheart replied the topic: Re: Multiple Sliders on a Page
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
4 years 10 months ago #25444 by ivan.milic
ivan.milic replied the topic: Re: Multiple Sliders on a Page
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
4 years 6 months ago #30044 by iFritz
iFritz replied the topic: Re: Multiple Sliders on a Page
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:
<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...

<?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.089 seconds

Links, Partners and Social Media