Multiple Sliders on a Page

ivan.milic
Support Staff
Moderator

11 years 6 months ago #30218 by ivan.milic

Replied by ivan.milic on topic Re: Multiple Sliders on a Page

I think order of code is wrong:

Code:

/*CODE1*/
jQuery(function () {
    jQuery('a').focus(function () {
        this.blur();
    });
    SI.Files.stylizeAll();
    slider21.init();
Uncaught TypeError: Object #<Object> has no method 'init'

});

/*CODE2*/
var slider21 = {
    num: -1,
    cur: 0,
    cr: [],
    al: null,
    at: 10 * 1000,	/
....
....
....
}

try reversing /*CODE1*/ and /*CODE2*/

Please Log in to join the conversation.

sgofferj
Inactive member
New Member

11 years 3 weeks ago #34769 by sgofferj

Replied by sgofferj on topic Re: Multiple Sliders on a Page

I'd like to dig this thread out and ask what's the situation on this. I just spent hours trying practically all image rotators from extension.joomla.org and your's suits my needs best, by far.
I am, however, working on a site in Metro design and I'd like to put 4 or 5 sliders across the page, each changing only 2 or 3 images, to get a bit of action there.

Is there any news about having more than 1 slider on a page at the same time?

In theory, it should be as easy as:
- Generate a unique ID (or ask the user for one) and store that in the module settings.
- Output the relevant Javascript code via PHP and stick the unique ID to every identifier which has to be unique.

Or do I miss something here?

-S

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 3 weeks ago #34774 by ivan.milic

Replied by ivan.milic on topic Re: Multiple Sliders on a Page

We officially don't have joomla module version that can do that. That change requires lot of fixind its required you have decent programming skills. You can also pay for custom job.

Please Log in to join the conversation.

harishrawat
Inactive member
New Member

10 years 8 months ago - 10 years 8 months ago #38378 by harishrawat

Replied by harishrawat on topic Multiple Sliders on a Page

Hi,

I am able to resolve the same problem, I will make all js and css code inside default.php

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
$rand_id = rand(10,100);
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->addStyleDeclaration( '
div#header_hotslider'.$rand_id.' a img {
	border:0;
}

div#header_hotslider'.$rand_id.' {
	margin:-1px 0 0;
}

div#video-header {
	margin:-1px 0 0;
}

div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' img {
	margin:0;
	display:none;
	position:absolute;
}

div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-controls'.$rand_id.' p.text {
	float:left;
	color:#fff;
	display:inline;
	font-size:10px;
	line-height:16px;
	margin:15px 0 0 20px;
	text-transform:uppercase;
	overflow:hidden;
}

div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-controls'.$rand_id.' div#slide-nav'.$rand_id.' a {
	float:left;
	width:24px;
	height:24px;
	display:inline;
	font-size:11px;
	margin:0 5px 0 0;
	line-height:24px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	background-position:0 0;
	background-repeat:no-repeat;
	padding:0;
}

div#header_hotslider'.$rand_id.' div#slide-holder'.$rand_id.' div#slide-controls'.$rand_id.' div#slide-nav'.$rand_id.' a.on {
	background-position:0 -24px;
}

');

// style declaration
$doc->addStyleDeclaration( '

div.hotwrap'.$rand_id.' {
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'.$rand_id.' {
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;
top:10px;
width:'.$sliderWidth2.'px;
height:46px;
display:none;
position:absolute;
background:none;
}

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:none;<!--url('.$mosConfig_live_site.'/modules/mod_hot_image_slider/images/slide-nav-'.$buttonColor.'.png);-->
color:#'.$buttonColorValue.';
top:11px;
position:relative;
}

' );

?>

<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<?php echo $rand_id;?> div#slide-holder<?php echo $rand_id;?> div#slide-controls<?php echo $rand_id;?> p#slide-nav<?php echo $rand_id;?> a,div#header_hotslider<?php echo $rand_id;?> div#slide-holder<?php echo $rand_id;?> div#slide-controls<?php echo $rand_id;?>');
</script>
<![endif]-->

<div id="header_hotslider<?php echo $rand_id; ?>"><div class="hotwrap<?php echo $rand_id; ?>">
<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 $rand_id;?>-<?php echo $imageCounter; ?>" src="<?php echo $mosConfig_live_site; ?>/<?php echo $imageFolder ?>/<?php echo $imageArray[$imageCounter]; ?>" class="slide<?php echo $rand_id;?>" 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>
<script type="text/javascript">

jQuery(function () {
    jQuery('a').focus(function () {
        this.blur();
    });
    SI.Files.stylizeAll();
    slider<?php echo $rand_id;?>.init();

});

var slider<?php echo $rand_id;?> = {
    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<?php echo $rand_id;?>.data || !slider<?php echo $rand_id;?>.data.length) return false;

        var d = slider<?php echo $rand_id;?>.data;
        slider<?php echo $rand_id;?>.num = d.length;
        var pos = Math.floor(Math.random() * 1);
        for (var i = 0; i < slider<?php echo $rand_id;?>.num; i++) {
            if(slider<?php echo $rand_id;?>.anim == 'fade')
			{
			  jQuery('#' + d[i].id).hide();
			}
			else{
				jQuery('#' + d[i].id).css({
	                left: ((i - pos) * 1000)
	            });
			}
            jQuery('#slide-nav<?php echo $rand_id;?>').append('<a id="slide-link-' + i + '" href="#" onclick="slider<?php echo $rand_id;?>.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
        }
        jQuery('img,div#slide-controls<?php echo $rand_id; ?>', jQuery('div#slide-holder<?php echo $rand_id; ?>')).fadeIn();
        slider<?php echo $rand_id;?>.text(d[pos]);
        slider<?php echo $rand_id;?>.on(pos);
		if(slider<?php echo $rand_id;?>.anim == 'fade')
		{
		  slider<?php echo $rand_id;?>.cur = -1;
		  slider<?php echo $rand_id;?>.slide(0);
		}
        else{
		slider<?php echo $rand_id;?>.cur = pos;
        window.setTimeout('slider<?php echo $rand_id;?>.auto();', slider<?php echo $rand_id;?>.at);
		}
    },
    auto: function () {
        if (!slider<?php echo $rand_id;?>.ar) return false;

        var next = slider<?php echo $rand_id;?>.cur + 1;
        if (next >= slider<?php echo $rand_id;?>.num) next = 0;
        slider<?php echo $rand_id;?>.slide(next);
    },
    slide: function (pos) {
        if (pos < 0 || pos >= slider<?php echo $rand_id;?>.num || pos == slider<?php echo $rand_id;?>.cur) return;

        window.clearTimeout(slider<?php echo $rand_id;?>.al);
        slider<?php echo $rand_id;?>.al = window.setTimeout('slider<?php echo $rand_id;?>.auto();', slider<?php echo $rand_id;?>.at);

        var d = slider<?php echo $rand_id;?>.data;
		if(slider<?php echo $rand_id;?>.anim == 'fade')
	    {
		  for (var i = 0; i < slider<?php echo $rand_id;?>.num; i++) {
		     if(i == slider<?php echo $rand_id;?>.cur || i == pos) continue;
			 jQuery('#' + d[i].id).hide();
		  }
		  
		  if(slider<?php echo $rand_id;?>.cur != -1){
			jQuery('#' + d[slider<?php echo $rand_id;?>.cur].id).stop(false,true); 
			jQuery('#' + d[slider<?php echo $rand_id;?>.cur].id).fadeOut(slider<?php echo $rand_id;?>.fade_speed); 
			jQuery('#' + d[pos].id).fadeIn(slider<?php echo $rand_id;?>.fade_speed); 

		  }
		  else
		  {
		    jQuery('#' + d[pos].id).fadeIn(slider<?php echo $rand_id;?>.fade_speed);
		  }
		}
		else
		{
	        for (var i = 0; i < slider<?php echo $rand_id;?>.num; i++)
	        jQuery('#' + d[i].id).stop().animate({
	            left: ((i - pos) * 1000)
	        },
	        1000, 'swing');
        }
        slider<?php echo $rand_id;?>.on(pos);
        slider<?php echo $rand_id;?>.text(d[pos]);
        slider<?php echo $rand_id;?>.cur = pos;
    },
    on: function (pos) {
        jQuery('#slide-nav<?php echo $rand_id;?> a').removeClass('on');
        jQuery('#slide-nav<?php echo $rand_id;?> a#slide-link-' + pos).addClass('on');
    },
    text: function (di) {
        slider<?php echo $rand_id;?>.cr['a'] = di.client;
        slider<?php echo $rand_id;?>.cr['b'] = di.desc;
        slider<?php echo $rand_id;?>.ticker('#slide-client<?php echo $rand_id;?> span', di.client, 0, 'a');
        slider<?php echo $rand_id;?>.ticker('#slide-desc<?php echo $rand_id;?>', di.desc, 0, 'b');
    },
    ticker: function (el, text, pos, unique) {
        if (slider<?php echo $rand_id;?>.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<?php echo $rand_id;?>.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) {

}
});

</script>

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

Regards
Harish Rawat
OPEN SOURCE DEVELOPER
Find Your Top Ten

Last edit: 10 years 8 months ago by harishrawat. Reason: OPEN SOURCE DEVELOPER

Please Log in to join the conversation.

Time to create page: 0.129 seconds