How To use Multiple versions of jcarousel

jsor / jcarousel

Riding carousels with jQuery.

MIT License

1.99k stars 734 forks source link

Im using Hybris Spring MVC platform which uses jcarousel functionality out of the box. However, I need to put mulitple sliders on a page and this does not currently seem possible.

The First slider renders fine. However all the others are showing the loading icon and the sliders are not being rendered on the page. These other sliders need to also fade instead of rotate like the first one.

The html is as follows:

<div class="slider_component">
<div id="homepage_slider2" class="svw topSlider">
    <ul id="carousel${component.uid}">
        <c:forEach items="${banners}" var="banner" varStatus="status">
            <c:if test="${ycommerce:evaluateRestrictions(banner)}">
                <c:url value="${banner.urlLink}" var="encodedUrl" />
                <li>                                                                
                    <a tabindex="-1" href="${encodedUrl}"<c:if test="${banner.external}"> target="_blank"</c:if>>
                        <img src="${banner.media.url}" alt="${not empty banner.headline ? banner.headline : banner.media.altText}" title="${not empty banner.headline ? banner.headline : banner.media.altText}"/>                          
                        <c:if test="${banner.headline != null}">
                            <div class="LargehomepageBannerComponent">  
                                <h2>${banner.headline}</h2>     
                                <p>${banner.content}</p> 
                            </div>
                        </c:if>
                    </a>
                </li>
            </c:if>
        </c:forEach>
    </ul>
</div>

jQuery(function(){ jQuery("div.svw").prepend("<img src='" + ACC.config.commonResourcePath + "/images/spinner.gif' class='ldrgif' alt='loading...'/ >"); }); var j = 0; var quantofamo = 0; var currentActive = 0; var total = 0; var listelements = [];

jQuery.fn.slideView = function(settings) { settings = jQuery.extend({ easeFunc: "easeInOutExpo", easeTime: 750, uiBefore: false, toolTip: false, ttOpacity: 0.9, autoPlay: false, autoPlayTime: '8000' }, settings); return this.each(function(){ var container = jQuery(this); container.find("img.ldrgif").remove(); container.removeClass("svw").addClass("stripViewer");
var pictWidth = container.find("img").width(); var pictHeight = container.find("img").height(); var pictEls = container.find("li").size(); var stripViewerWidth = pictWidth*pictEls; container.find("ul").css("width" , stripViewerWidth); container.css("width" , pictWidth); container.css("height" , pictHeight); container.each(function(i) { (!settings.uiBefore) ? jQuery(this).after("

jQuery(this).bind("click", function(){ slide(jQuery(this), z); return false; }); listelements.push(jQuery(this)); total++; }); function slide(target, z){ target.addClass("current").parent().parent().find("a").not(target).removeClass("current"); // wow! currentActive = z; var cnt = -(pictWidth*z); container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc); } container.bind("click", function(e){ var ui = (!settings.uiBefore) ? jQuery(this).next().find("a.current") : jQuery(this).prev().find("a.current"); var bTotal = parseFloat(jQuery(this).css('borderLeftWidth').replace("px", "")) + parseFloat(jQuery(this).css('borderRightWidth').replace("px", "")); var dOs = jQuery(this).offset(); var zeroLeft = (bTotal/2 + pictWidth) - (e.pageX - dOs.left); if(zeroLeft >= pictWidth/2) { var uiprev = ui.parent().prev().find("a"); (jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click"); } else { var uinext = ui.parent().next().find("a"); (jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click"); } }); jQuery("div#stripTransmitter" + j).css("width" , pictWidth); jQuery("div#stripTransmitter" + j + " a:first").addClass("current"); jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>'); if(settings.autoPlay){ var slideOn = setInterval(function() { slide(( total > currentActive+1) ? listelements[currentActive+1] : listelements[0], ( total > currentActive+1) ? currentActive+1 : 0)},settings.autoPlayTime); } if(settings.toolTip){ var aref = jQuery("div#stripTransmitter" + j + " a"); aref.each(function() { jQuery(this).data("title", jQuery(this).prop("title")); }); aref.live('mousemove', function(e) { var att = jQuery(this).data('title'); posX=e.pageX+10; posY=e.pageY+10; jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity}); }); aref.live('mouseout', function() { jQuery('.tooltip').hide(); this.title = jQuery(this).data("title"); }); aref.live('mouseover', function() { this.title = ''; }); } }); j++; });

jsor / jcarousel

How To use Multiple versions of jcarousel #779