Ergebnis 1 bis 6 von 6

Thema: 2 Slideshows mit cycle2 auf einer Seite

  1. #1
    Azubi(ne)
    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard 2 Slideshows mit cycle2 auf einer Seite

    Hallo ihr,

    ich habe folgendes Problem: Ich möchte auf einer Seite 2 slideshows mit cycle2 haben, aber sobald ich die zweite einfüge funktioniert nurnoch die 2., bei der 1. reagieren die pfeile zum weiter und zurück klicken nicht mehr. Ich weiß nicht an welcher Stelle im Code ich etwas ändern muss, damit es funktioniert...

    Hier mein HTML Code von einer der Seiten:

    HTML-Code:
    <!DOCTYPE HTML>
    
    <head>
        <title>Zimmerei Kohlhepp</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/cycle2.js"></script>
    
        <script>
            $(function() {
                var pull         = $('#pull');
                    menu         = $('nav ul');
                    menuHeight    = menu.height();
    
                $(pull).on('click', function(e) {
                    e.preventDefault();
                    menu.slideToggle();
                });
    
                $(window).resize(function(){
                    var w = $(window).width();
                    if(w > 320 && menu.is(':hidden')) {
                        menu.removeAttr('style');
                    }
                });
            });
        </script>
        
    <meta charset="UTF-8">
    </head>
    
    <body>
    <div class="oben">
        
    
        <header>
            <img src="Bilder/Logo.jpg">
            <h1>Zimmerei Kohlhepp</h1>
        </header>
    
        
    
        <nav class="clearfix">
            <ul class="clearfix">
                <li><a href="Index.html">Start</a></li>
                <li><a href="Ueber_uns.html">Über uns</a></li>
                <li><a href="Leistungen.html"class="active">Leistungen</a></li>
                <li><a href="Kontakt.html">Kontakt</a></li>
                
            </ul>
            <a href="#" id="pull">Menü</a>
        </nav>
    
    </div>
    
    
    
        <section class="main">
    
        <div class="braun">
    
    
        
    
            
                    <h2 class="Unterseiten">Balkone</h2><section id= "banner">    
            <img class="Banner" src="Bilder/Banner.jpg">
        </section>
    <div class="Uns">
        <article>
    <p>
    Balkone verändern auch aus der Entferung sichtbar die Gesamtoptik Ihres Hauses.<br>
    Auch eine Steigerung der Wohnqualität und des Werts Ihrer Immobilie wird durch sie ermöglicht.</p>
    
    <p> 
    Besonders wichtig ist es deswegen hierbei Qualität der Materialien, eine kompetente Beratung und die nötige Erfahrung, um Ihren Balkon zu dem perfekten, individuell auf Sie abgestimmten Ort zu machen. </p>
    
    <p> Durch jahrelange Erfahrung ist es uns möglich den Balkon gemeinsam mit Ihnen mit höchster Sorgfalt und Präzision auf genau auf Ihr Haus abzustimmen. </p>
    
    
    
    
    
        
    
    <div id="container">
        <div id="slideshow" class="cycle-slideshow" 
        data-cycle-fx = "fade"
        data-cycle-speed = "600"
        data-cycle-timeout = "3000"
        data-cycle-pager = "#pager"
        data-cycle-pager-template = "<a href='#'><img src='{{src}}'height=100 width=150/>"
        data-cycle-next = "#next"
        data-cycle-prev = "#prev"
        data-cycle-manual-fx = "scrollHorz"
        data-cycle-manual-speed = "400"
        data-cycle-pager-fx = "fade">
            <img src="Bilder/Balkon1.jpg" alt="">
            <img src="Bilder/Balkon2.jpg" alt="">
            
        </div>
        <div id="pager"></div>
        <img id="prev" src="Bilder/prev.svg"/>
        <img id="next" src="Bilder/next.svg"/>
    </div>
    
    <a href="Leistungen.html"class="Back">Zurück</a>
    
        </article>
    </div>
        
                </div>
            
    
            
    
        
    
        </div>
    
            
    </section>
    
    <div class="Impressum">
            
        <footer>
                <ul>
                    <li><a href="Impressum.html" >Impressum</a></li>
                </ul>
            </footer>
    </div>
    
    
    </body>
    
    </html>
    hier die CSS für den Bereich :

    Code:
    #container img {
        max-width: 100%;
        margin-top: 0em;
        border: none; 
        display: inline-block;
        text-align: left;
        margin-left: 0em;
        width: 200px;
        height: 120px;
    }
    
    
    #container {
            width: 70%;
            height: auto;
            position: relative;
            overflow: hidden;
            background: #4e3f3a;
            margin-left: 3em;
        }
    
    
        #slideshow {
            height: 100%;
            width: 100%;
        }
        #slideshow img {
            height: 100%;
            width: 100%;
        }
        #pager {
            text-align: center;
            height: 100px;
            width: 100%;
            position: absolute;
            bottom: 5%;
            background: rgba(0,0,0,.5);
            z-index: 1000;
            opacity: 0;
            transition: all 0.3s ease-in-out 0s;
        }
    
        #pager img { margin-left: 0.3em;
            width: 20%;
            height: 95%;}
        #pager:hover {
           opacity: 1;
        }  
    
     #prev {
            height: 1em;
            width: 1em;
            position: absolute;
            top: 7em;
            bottom: 0;
            left:-60px;
            margin: auto 10px;
            z-index: 1000;
            opacity: 0.7;
        }
         #next {
            height: 0.5em;
            width: 0.5em;
            position: absolute;
            top: 7em;
            bottom: 0;
            right:-60px;
            margin: auto 10px;
            z-index: 1000;
            opacity: 0.7;
        }
    und hier der code von cycle2 :

    Code:
    !function(a){"use strict";function b(a){return(a||"").toLowerCase()}var c="2.1.6";a.fn.cycle=function(c){var d;return 0!==this.length||a.isReady?this.each(function(){var d,e,f,g,h=a(this),i=a.fn.cycle.log;if(!h.data("cycle.opts")){(h.data("cycle-log")===!1||c&&c.log===!1||e&&e.log===!1)&&(i=a.noop),i("--c2 init--"),d=h.data();for(var j in d)d.hasOwnProperty(j)&&/^cycle[A-Z]+/.test(j)&&(g=d[j],f=j.match(/^cycle(.*)/)[1].replace(/^[A-Z]/,b),i(f+":",g,"("+typeof g+")"),d[f]=g);e=a.extend({},a.fn.cycle.defaults,d,c||{}),e.timeoutId=0,e.paused=e.paused||!1,e.container=h,e._maxZ=e.maxZ,e.API=a.extend({_container:h},a.fn.cycle.API),e.API.log=i,e.API.trigger=function(a,b){return e.container.trigger(a,b),e.API},h.data("cycle.opts",e),h.data("cycle.API",e.API),e.API.trigger("cycle-bootstrap",[e,e.API]),e.API.addInitialSlides(),e.API.preInitSlideshow(),e.slides.length&&e.API.initSlideshow()}}):(d={s:this.selector,c:this.context},a.fn.cycle.log("requeuing slideshow (dom not ready)"),a(function(){a(d.s,d.c).cycle(c)}),this)},a.fn.cycle.API={opts:function(){return this._container.data("cycle.opts")},addInitialSlides:function(){var b=this.opts(),c=b.slides;b.slideCount=0,b.slides=a(),c=c.jquery?c:b.container.find(c),b.random&&c.sort(function(){return Math.random()-.5}),b.API.add(c)},preInitSlideshow:function(){var b=this.opts();b.API.trigger("cycle-pre-initialize",[b]);var c=a.fn.cycle.transitions[b.fx];c&&a.isFunction(c.preInit)&&c.preInit(b),b._preInitialized=!0},postInitSlideshow:function(){var b=this.opts();b.API.trigger("cycle-post-initialize",[b]);var c=a.fn.cycle.transitions[b.fx];c&&a.isFunction(c.postInit)&&c.postInit(b)},initSlideshow:function(){var b,c=this.opts(),d=c.container;c.API.calcFirstSlide(),"static"==c.container.css("position")&&c.container.css("position","relative"),a(c.slides[c.currSlide]).css({opacity:1,display:"block",visibility:"visible"}),c.API.stackSlides(c.slides[c.currSlide],c.slides[c.nextSlide],!c.reverse),c.pauseOnHover&&(c.pauseOnHover!==!0&&(d=a(c.pauseOnHover)),d.hover(function(){c.API.pause(!0)},function(){c.API.resume(!0)})),c.timeout&&(b=c.API.getSlideOpts(c.currSlide),c.API.queueTransition(b,b.timeout+c.delay)),c._initialized=!0,c.API.updateView(!0),c.API.trigger("cycle-initialized",[c]),c.API.postInitSlideshow()},pause:function(b){var c=this.opts(),d=c.API.getSlideOpts(),e=c.hoverPaused||c.paused;b?c.hoverPaused=!0:c.paused=!0,e||(c.container.addClass("cycle-paused"),c.API.trigger("cycle-paused",[c]).log("cycle-paused"),d.timeout&&(clearTimeout(c.timeoutId),c.timeoutId=0,c._remainingTimeout-=a.now()-c._lastQueue,(c._remainingTimeout<0||isNaN(c._remainingTimeout))&&(c._remainingTimeout=void 0)))},resume:function(a){var b=this.opts(),c=!b.hoverPaused&&!b.paused;a?b.hoverPaused=!1:b.paused=!1,c||(b.container.removeClass("cycle-paused"),0===b.slides.filter(":animated").length&&b.API.queueTransition(b.API.getSlideOpts(),b._remainingTimeout),b.API.trigger("cycle-resumed",[b,b._remainingTimeout]).log("cycle-resumed"))},add:function(b,c){var d,e=this.opts(),f=e.slideCount,g=!1;"string"==a.type(b)&&(b=a.trim(b)),a(b).each(function(){var b,d=a(this);c?e.container.prepend(d):e.container.append(d),e.slideCount++,b=e.API.buildSlideOpts(d),e.slides=c?a(d).add(e.slides):e.slides.add(d),e.API.initSlide(b,d,--e._maxZ),d.data("cycle.opts",b),e.API.trigger("cycle-slide-added",[e,b,d])}),e.API.updateView(!0),g=e._preInitialized&&2>f&&e.slideCount>=1,g&&(e._initialized?e.timeout&&(d=e.slides.length,e.nextSlide=e.reverse?d-1:1,e.timeoutId||e.API.queueTransition(e)):e.API.initSlideshow())},calcFirstSlide:function(){var a,b=this.opts();a=parseInt(b.startingSlide||0,10),(a>=b.slides.length||0>a)&&(a=0),b.currSlide=a,b.reverse?(b.nextSlide=a-1,b.nextSlide<0&&(b.nextSlide=b.slides.length-1)):(b.nextSlide=a+1,b.nextSlide==b.slides.length&&(b.nextSlide=0))},calcNextSlide:function(){var a,b=this.opts();b.reverse?(a=b.nextSlide-1<0,b.nextSlide=a?b.slideCount-1:b.nextSlide-1,b.currSlide=a?0:b.nextSlide+1):(a=b.nextSlide+1==b.slides.length,b.nextSlide=a?0:b.nextSlide+1,b.currSlide=a?b.slides.length-1:b.nextSlide-1)},calcTx:function(b,c){var d,e=b;return e._tempFx?d=a.fn.cycle.transitions[e._tempFx]:c&&e.manualFx&&(d=a.fn.cycle.transitions[e.manualFx]),d||(d=a.fn.cycle.transitions[e.fx]),e._tempFx=null,this.opts()._tempFx=null,d||(d=a.fn.cycle.transitions.fade,e.API.log('Transition "'+e.fx+'" not found.  Using fade.')),d},prepareTx:function(a,b){var c,d,e,f,g,h=this.opts();return h.slideCount<2?void(h.timeoutId=0):(!a||h.busy&&!h.manualTrump||(h.API.stopTransition(),h.busy=!1,clearTimeout(h.timeoutId),h.timeoutId=0),void(h.busy||(0!==h.timeoutId||a)&&(d=h.slides[h.currSlide],e=h.slides[h.nextSlide],f=h.API.getSlideOpts(h.nextSlide),g=h.API.calcTx(f,a),h._tx=g,a&&void 0!==f.manualSpeed&&(f.speed=f.manualSpeed),h.nextSlide!=h.currSlide&&(a||!h.paused&&!h.hoverPaused&&h.timeout)?(h.API.trigger("cycle-before",[f,d,e,b]),g.before&&g.before(f,d,e,b),c=function(){h.busy=!1,h.container.data("cycle.opts")&&(g.after&&g.after(f,d,e,b),h.API.trigger("cycle-after",[f,d,e,b]),h.API.queueTransition(f),h.API.updateView(!0))},h.busy=!0,g.transition?g.transition(f,d,e,b,c):h.API.doTransition(f,d,e,b,c),h.API.calcNextSlide(),h.API.updateView()):h.API.queueTransition(f))))},doTransition:function(b,c,d,e,f){var g=b,h=a(c),i=a(d),j=function(){i.animate(g.animIn||{opacity:1},g.speed,g.easeIn||g.easing,f)};i.css(g.cssBefore||{}),h.animate(g.animOut||{},g.speed,g.easeOut||g.easing,function(){h.css(g.cssAfter||{}),g.sync||j()}),g.sync&&j()},queueTransition:function(b,c){var d=this.opts(),e=void 0!==c?c:b.timeout;return 0===d.nextSlide&&0===--d.loop?(d.API.log("terminating; loop=0"),d.timeout=0,e?setTimeout(function(){d.API.trigger("cycle-finished",[d])},e):d.API.trigger("cycle-finished",[d]),void(d.nextSlide=d.currSlide)):void 0!==d.continueAuto&&(d.continueAuto===!1||a.isFunction(d.continueAuto)&&d.continueAuto()===!1)?(d.API.log("terminating automatic transitions"),d.timeout=0,void(d.timeoutId&&clearTimeout(d.timeoutId))):void(e&&(d._lastQueue=a.now(),void 0===c&&(d._remainingTimeout=b.timeout),d.paused||d.hoverPaused||(d.timeoutId=setTimeout(function(){d.API.prepareTx(!1,!d.reverse)},e))))},stopTransition:function(){var a=this.opts();a.slides.filter(":animated").length&&(a.slides.stop(!1,!0),a.API.trigger("cycle-transition-stopped",[a])),a._tx&&a._tx.stopTransition&&a._tx.stopTransition(a)},advanceSlide:function(a){var b=this.opts();return clearTimeout(b.timeoutId),b.timeoutId=0,b.nextSlide=b.currSlide+a,b.nextSlide<0?b.nextSlide=b.slides.length-1:b.nextSlide>=b.slides.length&&(b.nextSlide=0),b.API.prepareTx(!0,a>=0),!1},buildSlideOpts:function(c){var d,e,f=this.opts(),g=c.data()||{};for(var h in g)g.hasOwnProperty(h)&&/^cycle[A-Z]+/.test(h)&&(d=g[h],e=h.match(/^cycle(.*)/)[1].replace(/^[A-Z]/,b),f.API.log("["+(f.slideCount-1)+"]",e+":",d,"("+typeof d+")"),g[e]=d);g=a.extend({},a.fn.cycle.defaults,f,g),g.slideNum=f.slideCount;try{delete g.API,delete g.slideCount,delete g.currSlide,delete g.nextSlide,delete g.slides}catch(i){}return g},getSlideOpts:function(b){var c=this.opts();void 0===b&&(b=c.currSlide);var d=c.slides[b],e=a(d).data("cycle.opts");return a.extend({},c,e)},initSlide:function(b,c,d){var e=this.opts();c.css(b.slideCss||{}),d>0&&c.css("zIndex",d),isNaN(b.speed)&&(b.speed=a.fx.speeds[b.speed]||a.fx.speeds._default),b.sync||(b.speed=b.speed/2),c.addClass(e.slideClass)},updateView:function(a,b){var c=this.opts();if(c._initialized){var d=c.API.getSlideOpts(),e=c.slides[c.currSlide];!a&&b!==!0&&(c.API.trigger("cycle-update-view-before",[c,d,e]),c.updateView<0)||(c.slideActiveClass&&c.slides.removeClass(c.slideActiveClass).eq(c.currSlide).addClass(c.slideActiveClass),a&&c.hideNonActive&&c.slides.filter(":not(."+c.slideActiveClass+")").css("visibility","hidden"),0===c.updateView&&setTimeout(function(){c.API.trigger("cycle-update-view",[c,d,e,a])},d.speed/(c.sync?2:1)),0!==c.updateView&&c.API.trigger("cycle-update-view",[c,d,e,a]),a&&c.API.trigger("cycle-update-view-after",[c,d,e]))}},getComponent:function(b){var c=this.opts(),d=c[b];return"string"==typeof d?/^\s*[\>|\+|~]/.test(d)?c.container.find(d):a(d):d.jquery?d:a(d)},stackSlides:function(b,c,d){var e=this.opts();b||(b=e.slides[e.currSlide],c=e.slides[e.nextSlide],d=!e.reverse),a(b).css("zIndex",e.maxZ);var f,g=e.maxZ-2,h=e.slideCount;if(d){for(f=e.currSlide+1;h>f;f++)a(e.slides[f]).css("zIndex",g--);for(f=0;f<e.currSlide;f++)a(e.slides[f]).css("zIndex",g--)}else{for(f=e.currSlide-1;f>=0;f--)a(e.slides[f]).css("zIndex",g--);for(f=h-1;f>e.currSlide;f--)a(e.slides[f]).css("zIndex",g--)}a(c).css("zIndex",e.maxZ-1)},getSlideIndex:function(a){return this.opts().slides.index(a)}},a.fn.cycle.log=function(){window.console&&console.log&&console.log("[cycle2] "+Array.prototype.join.call(arguments," "))},a.fn.cycle.version=function(){return"Cycle2: "+c},a.fn.cycle.transitions={custom:{},none:{before:function(a,b,c,d){a.API.stackSlides(c,b,d),a.cssBefore={opacity:1,visibility:"visible",display:"block"}}},fade:{before:function(b,c,d,e){var f=b.API.getSlideOpts(b.nextSlide).slideCss||{};b.API.stackSlides(c,d,e),b.cssBefore=a.extend(f,{opacity:0,visibility:"visible",display:"block"}),b.animIn={opacity:1},b.animOut={opacity:0}}},fadeout:{before:function(b,c,d,e){var f=b.API.getSlideOpts(b.nextSlide).slideCss||{};b.API.stackSlides(c,d,e),b.cssBefore=a.extend(f,{opacity:1,visibility:"visible",display:"block"}),b.animOut={opacity:0}}},scrollHorz:{before:function(a,b,c,d){a.API.stackSlides(b,c,d);var e=a.container.css("overflow","hidden").width();a.cssBefore={left:d?e:-e,top:0,opacity:1,visibility:"visible",display:"block"},a.cssAfter={zIndex:a._maxZ-2,left:0},a.animIn={left:0},a.animOut={left:d?-e:e}}}},a.fn.cycle.defaults={allowWrap:!0,autoSelector:".cycle-slideshow[data-cycle-auto-init!=false]",delay:0,easing:null,fx:"fade",hideNonActive:!0,loop:0,manualFx:void 0,manualSpeed:void 0,manualTrump:!0,maxZ:100,pauseOnHover:!1,reverse:!1,slideActiveClass:"cycle-slide-active",slideClass:"cycle-slide",slideCss:{position:"absolute",top:0,left:0},slides:"> img",speed:500,startingSlide:0,sync:!0,timeout:4e3,updateView:0},a(document).ready(function(){a(a.fn.cycle.defaults.autoSelector).cycle()})}(jQuery),/*! Cycle2 autoheight plugin; Copyright (c) M.Alsup, 2012; version: 20130913 */
    function(a){"use strict";function b(b,d){var e,f,g,h=d.autoHeight;if("container"==h)f=a(d.slides[d.currSlide]).outerHeight(),d.container.height(f);else if(d._autoHeightRatio)d.container.height(d.container.width()/d._autoHeightRatio);else if("calc"===h||"number"==a.type(h)&&h>=0){if(g="calc"===h?c(b,d):h>=d.slides.length?0:h,g==d._sentinelIndex)return;d._sentinelIndex=g,d._sentinel&&d._sentinel.remove(),e=a(d.slides[g].cloneNode(!0)),e.removeAttr("id name rel").find("[id],[name],[rel]").removeAttr("id name rel"),e.css({position:"static",visibility:"hidden",display:"block"}).prependTo(d.container).addClass("cycle-sentinel cycle-slide").removeClass("cycle-slide-active"),e.find("*").css("visibility","hidden"),d._sentinel=e}}function c(b,c){var d=0,e=-1;return c.slides.each(function(b){var c=a(this).height();c>e&&(e=c,d=b)}),d}function d(b,c,d,e){var f=a(e).outerHeight();c.container.animate({height:f},c.autoHeightSpeed,c.autoHeightEasing)}function e(c,f){f._autoHeightOnResize&&(a(window).off("resize orientationchange",f._autoHeightOnResize),f._autoHeightOnResize=null),f.container.off("cycle-slide-added cycle-slide-removed",b),f.container.off("cycle-destroyed",e),f.container.off("cycle-before",d),f._sentinel&&(f._sentinel.remove(),f._sentinel=null)}a.extend(a.fn.cycle.defaults,{autoHeight:0,autoHeightSpeed:250,autoHeightEasing:null}),a(document).on("cycle-initialized",function(c,f){function g(){b(c,f)}var h,i=f.autoHeight,j=a.type(i),k=null;("string"===j||"number"===j)&&(f.container.on("cycle-slide-added cycle-slide-removed",b),f.container.on("cycle-destroyed",e),"container"==i?f.container.on("cycle-before",d):"string"===j&&/\d+\:\d+/.test(i)&&(h=i.match(/(\d+)\:(\d+)/),h=h[1]/h[2],f._autoHeightRatio=h),"number"!==j&&(f._autoHeightOnResize=function(){clearTimeout(k),k=setTimeout(g,50)},a(window).on("resize orientationchange",f._autoHeightOnResize)),setTimeout(g,30))})}(jQuery),/*! caption plugin for Cycle2;  version: 20130306 */
    function(a){"use strict";a.extend(a.fn.cycle.defaults,{caption:"> .cycle-caption",captionTemplate:"{{slideNum}} / {{slideCount}}",overlay:"> .cycle-overlay",overlayTemplate:"<div>{{title}}</div><div>{{desc}}</div>",captionModule:"caption"}),a(document).on("cycle-update-view",function(b,c,d,e){if("caption"===c.captionModule){a.each(["caption","overlay"],function(){var a=this,b=d[a+"Template"],f=c.API.getComponent(a);f.length&&b?(f.html(c.API.tmpl(b,d,c,e)),f.show()):f.hide()})}}),a(document).on("cycle-destroyed",function(b,c){var d;a.each(["caption","overlay"],function(){var a=this,b=c[a+"Template"];c[a]&&b&&(d=c.API.getComponent("caption"),d.empty())})})}(jQuery),/*! command plugin for Cycle2;  version: 20140415 */
    function(a){"use strict";var b=a.fn.cycle;a.fn.cycle=function(c){var d,e,f,g=a.makeArray(arguments);return"number"==a.type(c)?this.cycle("goto",c):"string"==a.type(c)?this.each(function(){var h;return d=c,f=a(this).data("cycle.opts"),void 0===f?void b.log('slideshow must be initialized before sending commands; "'+d+'" ignored'):(d="goto"==d?"jump":d,e=f.API[d],a.isFunction(e)?(h=a.makeArray(g),h.shift(),e.apply(f.API,h)):void b.log("unknown command: ",d))}):b.apply(this,arguments)},a.extend(a.fn.cycle,b),a.extend(b.API,{next:function(){var a=this.opts();if(!a.busy||a.manualTrump){var b=a.reverse?-1:1;a.allowWrap===!1&&a.currSlide+b>=a.slideCount||(a.API.advanceSlide(b),a.API.trigger("cycle-next",[a]).log("cycle-next"))}},prev:function(){var a=this.opts();if(!a.busy||a.manualTrump){var b=a.reverse?1:-1;a.allowWrap===!1&&a.currSlide+b<0||(a.API.advanceSlide(b),a.API.trigger("cycle-prev",[a]).log("cycle-prev"))}},destroy:function(){this.stop();var b=this.opts(),c=a.isFunction(a._data)?a._data:a.noop;clearTimeout(b.timeoutId),b.timeoutId=0,b.API.stop(),b.API.trigger("cycle-destroyed",[b]).log("cycle-destroyed"),b.container.removeData(),c(b.container[0],"parsedAttrs",!1),b.retainStylesOnDestroy||(b.container.removeAttr("style"),b.slides.removeAttr("style"),b.slides.removeClass(b.slideActiveClass)),b.slides.each(function(){var d=a(this);d.removeData(),d.removeClass(b.slideClass),c(this,"parsedAttrs",!1)})},jump:function(a,b){var c,d=this.opts();if(!d.busy||d.manualTrump){var e=parseInt(a,10);if(isNaN(e)||0>e||e>=d.slides.length)return void d.API.log("goto: invalid slide index: "+e);if(e==d.currSlide)return void d.API.log("goto: skipping, already on slide",e);d.nextSlide=e,clearTimeout(d.timeoutId),d.timeoutId=0,d.API.log("goto: ",e," (zero-index)"),c=d.currSlide<d.nextSlide,d._tempFx=b,d.API.prepareTx(!0,c)}},stop:function(){var b=this.opts(),c=b.container;clearTimeout(b.timeoutId),b.timeoutId=0,b.API.stopTransition(),b.pauseOnHover&&(b.pauseOnHover!==!0&&(c=a(b.pauseOnHover)),c.off("mouseenter mouseleave")),b.API.trigger("cycle-stopped",[b]).log("cycle-stopped")},reinit:function(){var a=this.opts();a.API.destroy(),a.container.cycle()},remove:function(b){for(var c,d,e=this.opts(),f=[],g=1,h=0;h<e.slides.length;h++)c=e.slides[h],h==b?d=c:(f.push(c),a(c).data("cycle.opts").slideNum=g,g++);d&&(e.slides=a(f),e.slideCount--,a(d).remove(),b==e.currSlide?e.API.advanceSlide(1):b<e.currSlide?e.currSlide--:e.currSlide++,e.API.trigger("cycle-slide-removed",[e,b,d]).log("cycle-slide-removed"),e.API.updateView())}}),a(document).on("click.cycle","[data-cycle-cmd]",function(b){b.preventDefault();var c=a(this),d=c.data("cycle-cmd"),e=c.data("cycle-context")||".cycle-slideshow";a(e).cycle(d,c.data("cycle-arg"))})}(jQuery),/*! hash plugin for Cycle2;  version: 20130905 */
    function(a){"use strict";function b(b,c){var d;return b._hashFence?void(b._hashFence=!1):(d=window.location.hash.substring(1),void b.slides.each(function(e){if(a(this).data("cycle-hash")==d){if(c===!0)b.startingSlide=e;else{var f=b.currSlide<e;b.nextSlide=e,b.API.prepareTx(!0,f)}return!1}}))}a(document).on("cycle-pre-initialize",function(c,d){b(d,!0),d._onHashChange=function(){b(d,!1)},a(window).on("hashchange",d._onHashChange)}),a(document).on("cycle-update-view",function(a,b,c){c.hash&&"#"+c.hash!=window.location.hash&&(b._hashFence=!0,window.location.hash=c.hash)}),a(document).on("cycle-destroyed",function(b,c){c._onHashChange&&a(window).off("hashchange",c._onHashChange)})}(jQuery),/*! loader plugin for Cycle2;  version: 20131121 */
    function(a){"use strict";a.extend(a.fn.cycle.defaults,{loader:!1}),a(document).on("cycle-bootstrap",function(b,c){function d(b,d){function f(b){var f;"wait"==c.loader?(h.push(b),0===j&&(h.sort(g),e.apply(c.API,[h,d]),c.container.removeClass("cycle-loading"))):(f=a(c.slides[c.currSlide]),e.apply(c.API,[b,d]),f.show(),c.container.removeClass("cycle-loading"))}function g(a,b){return a.data("index")-b.data("index")}var h=[];if("string"==a.type(b))b=a.trim(b);else if("array"===a.type(b))for(var i=0;i<b.length;i++)b[i]=a(b[i])[0];b=a(b);var j=b.length;j&&(b.css("visibility","hidden").appendTo("body").each(function(b){function g(){0===--i&&(--j,f(k))}var i=0,k=a(this),l=k.is("img")?k:k.find("img");return k.data("index",b),l=l.filter(":not(.cycle-loader-ignore)").filter(':not([src=""])'),l.length?(i=l.length,void l.each(function(){this.complete?g():a(this).load(function(){g()}).on("error",function(){0===--i&&(c.API.log("slide skipped; img not loaded:",this.src),0===--j&&"wait"==c.loader&&e.apply(c.API,[h,d]))})})):(--j,void h.push(k))}),j&&c.container.addClass("cycle-loading"))}var e;c.loader&&(e=c.API.add,c.API.add=d)})}(jQuery),/*! pager plugin for Cycle2;  version: 20140415 */
    function(a){"use strict";function b(b,c,d){var e,f=b.API.getComponent("pager");f.each(function(){var f=a(this);if(c.pagerTemplate){var g=b.API.tmpl(c.pagerTemplate,c,b,d[0]);e=a(g).appendTo(f)}else e=f.children().eq(b.slideCount-1);e.on(b.pagerEvent,function(a){b.pagerEventBubble||a.preventDefault(),b.API.page(f,a.currentTarget)})})}function c(a,b){var c=this.opts();if(!c.busy||c.manualTrump){var d=a.children().index(b),e=d,f=c.currSlide<e;c.currSlide!=e&&(c.nextSlide=e,c._tempFx=c.pagerFx,c.API.prepareTx(!0,f),c.API.trigger("cycle-pager-activated",[c,a,b]))}}a.extend(a.fn.cycle.defaults,{pager:"> .cycle-pager",pagerActiveClass:"cycle-pager-active",pagerEvent:"click.cycle",pagerEventBubble:void 0,pagerTemplate:"<span>&bull;</span>"}),a(document).on("cycle-bootstrap",function(a,c,d){d.buildPagerLink=b}),a(document).on("cycle-slide-added",function(a,b,d,e){b.pager&&(b.API.buildPagerLink(b,d,e),b.API.page=c)}),a(document).on("cycle-slide-removed",function(b,c,d){if(c.pager){var e=c.API.getComponent("pager");e.each(function(){var b=a(this);a(b.children()[d]).remove()})}}),a(document).on("cycle-update-view",function(b,c){var d;c.pager&&(d=c.API.getComponent("pager"),d.each(function(){a(this).children().removeClass(c.pagerActiveClass).eq(c.currSlide).addClass(c.pagerActiveClass)}))}),a(document).on("cycle-destroyed",function(a,b){var c=b.API.getComponent("pager");c&&(c.children().off(b.pagerEvent),b.pagerTemplate&&c.empty())})}(jQuery),/*! prevnext plugin for Cycle2;  version: 20140408 */
    function(a){"use strict";a.extend(a.fn.cycle.defaults,{next:"> .cycle-next",nextEvent:"click.cycle",disabledClass:"disabled",prev:"> .cycle-prev",prevEvent:"click.cycle",swipe:!1}),a(document).on("cycle-initialized",function(a,b){if(b.API.getComponent("next").on(b.nextEvent,function(a){a.preventDefault(),b.API.next()}),b.API.getComponent("prev").on(b.prevEvent,function(a){a.preventDefault(),b.API.prev()}),b.swipe){var c=b.swipeVert?"swipeUp.cycle":"swipeLeft.cycle swipeleft.cycle",d=b.swipeVert?"swipeDown.cycle":"swipeRight.cycle swiperight.cycle";b.container.on(c,function(){b._tempFx=b.swipeFx,b.API.next()}),b.container.on(d,function(){b._tempFx=b.swipeFx,b.API.prev()})}}),a(document).on("cycle-update-view",function(a,b){if(!b.allowWrap){var c=b.disabledClass,d=b.API.getComponent("next"),e=b.API.getComponent("prev"),f=b._prevBoundry||0,g=void 0!==b._nextBoundry?b._nextBoundry:b.slideCount-1;b.currSlide==g?d.addClass(c).prop("disabled",!0):d.removeClass(c).prop("disabled",!1),b.currSlide===f?e.addClass(c).prop("disabled",!0):e.removeClass(c).prop("disabled",!1)}}),a(document).on("cycle-destroyed",function(a,b){b.API.getComponent("prev").off(b.nextEvent),b.API.getComponent("next").off(b.prevEvent),b.container.off("swipeleft.cycle swiperight.cycle swipeLeft.cycle swipeRight.cycle swipeUp.cycle swipeDown.cycle")})}(jQuery),/*! progressive loader plugin for Cycle2;  version: 20130315 */
    function(a){"use strict";a.extend(a.fn.cycle.defaults,{progressive:!1}),a(document).on("cycle-pre-initialize",function(b,c){if(c.progressive){var d,e,f=c.API,g=f.next,h=f.prev,i=f.prepareTx,j=a.type(c.progressive);if("array"==j)d=c.progressive;else if(a.isFunction(c.progressive))d=c.progressive(c);else if("string"==j){if(e=a(c.progressive),d=a.trim(e.html()),!d)return;if(/^(\[)/.test(d))try{d=a.parseJSON(d)}catch(k){return void f.log("error parsing progressive slides",k)}else d=d.split(new RegExp(e.data("cycle-split")||"\n")),d[d.length-1]||d.pop()}i&&(f.prepareTx=function(a,b){var e,f;return a||0===d.length?void i.apply(c.API,[a,b]):void(b&&c.currSlide==c.slideCount-1?(f=d[0],d=d.slice(1),c.container.one("cycle-slide-added",function(a,b){setTimeout(function(){b.API.advanceSlide(1)},50)}),c.API.add(f)):b||0!==c.currSlide?i.apply(c.API,[a,b]):(e=d.length-1,f=d[e],d=d.slice(0,e),c.container.one("cycle-slide-added",function(a,b){setTimeout(function(){b.currSlide=1,b.API.advanceSlide(-1)},50)}),c.API.add(f,!0)))}),g&&(f.next=function(){var a=this.opts();if(d.length&&a.currSlide==a.slideCount-1){var b=d[0];d=d.slice(1),a.container.one("cycle-slide-added",function(a,b){g.apply(b.API),b.container.removeClass("cycle-loading")}),a.container.addClass("cycle-loading"),a.API.add(b)}else g.apply(a.API)}),h&&(f.prev=function(){var a=this.opts();if(d.length&&0===a.currSlide){var b=d.length-1,c=d[b];d=d.slice(0,b),a.container.one("cycle-slide-added",function(a,b){b.currSlide=1,b.API.advanceSlide(-1),b.container.removeClass("cycle-loading")}),a.container.addClass("cycle-loading"),a.API.add(c,!0)}else h.apply(a.API)})}})}(jQuery),/*! tmpl plugin for Cycle2;  version: 20121227 */
    function(a){"use strict";a.extend(a.fn.cycle.defaults,{tmplRegex:"{{((.)?.*?)}}"}),a.extend(a.fn.cycle.API,{tmpl:function(b,c){var d=new RegExp(c.tmplRegex||a.fn.cycle.defaults.tmplRegex,"g"),e=a.makeArray(arguments);return e.shift(),b.replace(d,function(b,c){var d,f,g,h,i=c.split(".");for(d=0;d<e.length;d++)if(g=e[d]){if(i.length>1)for(h=g,f=0;f<i.length;f++)g=h,h=h[i[f]]||c;else h=g[c];if(a.isFunction(h))return h.apply(g,e);if(void 0!==h&&null!==h&&h!=c)return h}return c})}})}(jQuery);
    würde mich wirklich sehr freuen, wenn mir jemand helfen könnte !

    Ganz liebe Grüße und danke schonmal !

    Sundream
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.273
    Danke
    22
    Bekam 123 mal "Danke" in 122 Postings

    Standard AW: 2 Slideshows mit cycle2 auf einer Seite

    Hallo,

    Du verwendest id="slideshow"... In Deinem Code sehe ich nur einen Slideshow-Container.
    Wenn Du einen zweiten mit der gleichen ID einbaust, steigen einige Browser aus, weil eine ID einmalig in einem Dokument sein muss!

    Gruß Arne

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 2 Slideshows mit cycle2 auf einer Seite

    Hallo,
    ich weiß, dass das Problem da irgendwo liegt, aber reicht es wenn ich einen zweiten mit exakt demselben Code einfüge und die id beim zweiten einfach in z.b sideshow2 ändere? Nein oder?

    Danke schonmal

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.273
    Danke
    22
    Bekam 123 mal "Danke" in 122 Postings

    Standard AW: 2 Slideshows mit cycle2 auf einer Seite

    Hallo,

    Hast Du es versucht?
    Die Antwort hättest Du dadurch schneller, als darauf zu warten, dass es Dir hier einer vorsagt.

    Aber um diesen Beitrag nicht ganz inhaltslos stehen zu lassen: Das sollte zumindest so gehen.
    Du kannst die ID auch ganz weglassen. Die Plugins greifen i.d.R. auf die Klassenbezeichner zu, eben genau damit man multiple Plugin-elemente haben kann.

    Gruß Arne

  5. Folgende User finden die Antwort von Arne Drews gut:


  6. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    15.03.2015
    Beiträge
    80
    Danke
    38
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 2 Slideshows mit cycle2 auf einer Seite

    Hallo,

    ich war mir gestern um die Uhrzeit nicht mehr sicher, ob ich das schon ausprobiert habe, weil ich doch schon einiges versucht habe, bevor ich hier geschrieben habe. Ich hab immer gedacht, dass ich irgendwo anders (in der cycle2 js datei zum Beispiel) nochmal was ändern muss. Und wenn ich nur alle IDs ändere, damit funktioniert es auch nicht...

    Mein HTML Code sieht gerade so aus:

    HTML-Code:
    <!DOCTYPE HTML>
    
    <head>
        <title>Zimmerei Kohlhepp</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/cycle2.js"></script>
    
        <script>
            $(function() {
                var pull         = $('#pull');
                    menu         = $('nav ul');
                    menuHeight    = menu.height();
    
                $(pull).on('click', function(e) {
                    e.preventDefault();
                    menu.slideToggle();
                });
    
                $(window).resize(function(){
                    var w = $(window).width();
                    if(w > 320 && menu.is(':hidden')) {
                        menu.removeAttr('style');
                    }
                });
            });
        </script>
        
    <meta charset="UTF-8">
    </head>
    
    <body>
    <div class="oben">
        
    
        <header>
            <img src="Bilder/Logo.jpg">
            <h1>Zimmerei Kohlhepp</h1>
        </header>
    
        
    
        <nav class="clearfix">
            <ul class="clearfix">
                <li><a href="Index.html">Start</a></li>
                <li><a href="Ueber_uns.html">Über uns</a></li>
                <li><a href="Leistungen.html"class="active">Leistungen</a></li>
                <li><a href="Kontakt.php">Kontakt</a></li>
                
            </ul>
            <a href="#" id="pull">Menü</a>
        </nav>
    
    </div>
    
    
    
        <section class="main">
    
        <div class="braun">
    
    
        
    
            
                    <h2 class="Unterseiten">Balkone</h2><section id= "banner">    
            <img class="Banner" src="Bilder/Banner.jpg">
        </section>
    <div class="Uns">
        <article>
    <p>
    Balkone verändern auch aus der Entferung sichtbar die Gesamtoptik Ihres Hauses.<br>
    Auch eine Steigerung der Wohnqualität und des Werts Ihrer Immobilie wird durch sie ermöglicht.</p>
    
    <p> 
    Besonders wichtig ist es deswegen hierbei Qualität der Materialien, eine kompetente Beratung und die nötige Erfahrung, um Ihren Balkon zu dem perfekten, individuell auf Sie abgestimmten Ort zu machen. </p>
    
    <p> Durch jahrelange Erfahrung ist es uns möglich den Balkon gemeinsam mit Ihnen mit höchster Sorgfalt und Präzision auf genau auf Ihr Haus abzustimmen. </p>
    
    
    
    
    
        
    
    <div id="container">
        <div id="slideshow" class="cycle-slideshow" 
        data-cycle-fx = "fade"
        data-cycle-speed = "600"
        data-cycle-timeout = "3000"
        data-cycle-pager = "#pager"
        data-cycle-pager-template = "<a href='#'><img src='{{src}}'height=100 width=150/>"
        data-cycle-next = "#next"
        data-cycle-prev = "#prev"
        data-cycle-manual-fx = "scrollHorz"
        data-cycle-manual-speed = "400"
        data-cycle-pager-fx = "fade">
            <img src="Bilder/Balkon1.jpg" alt="">
            <img src="Bilder/Balkon2.jpg" alt="">
            
        </div>
        <div id="pager"></div>
        <img id="prev" src="Bilder/prev.svg"/>
        <img id="next" src="Bilder/next.svg"/>
    </div>
    
    <div id="container2">
        <div id="slideshow2" class="cycle-slideshow" 
        data-cycle-fx = "fade"
        data-cycle-speed = "600"
        data-cycle-timeout = "3000"
        data-cycle-pager = "#pager"
        data-cycle-pager-template = "<a href='#'><img src='{{src}}'height=100 width=150/>"
        data-cycle-next = "#next"
        data-cycle-prev = "#prev"
        data-cycle-manual-fx = "scrollHorz"
        data-cycle-manual-speed = "400"
        data-cycle-pager-fx = "fade">
            <img src="Bilder/Balkon1.jpg" alt="">
            <img src="Bilder/Balkon2.jpg" alt="">
            
        </div>
        <div id="pager2"></div>
        <img id="prev2" src="Bilder/prev.svg"/>
        <img id="next2" src="Bilder/next.svg"/>
    </div>
    
    <a href="Leistungen.html"class="Back">Zurück</a>
    
        </article>
    </div>
        
                </div>
            
    
            
    
        
    
        </div>
    
            
    </section>
    
    <div class="Impressum">
            
        <footer>
                <ul>
                    <li><a href="Impressum.html" >Impressum</a></li>
                </ul>
            </footer>
    </div>
    
    
    </body>
    
    </html>
    Auf der Seite sieht das so aus:

    1.jpg der Pager der unteren Slideshow ist leer
    2.jpg Bei der oberen Slideshow sind auch alle Bilder vom unteren Pager mit im oberen Pager.


    Allgemein funktioniert die untere Slideshow auch garnicht (ändert zwar das Bild, aber beim Klicken auf prev oder next passiert nichts).
    Wenn ich die obere Slideshow anklicke bewegt sich die untere immer mit.

    Weiß jemand, was jetzt noch falsch sein könnte?

    Liebe Grüße

    Sundream

    - - - Aktualisiert - - -

    Hat sich erledigt, musste das untere noch ändern und jetzt funktionierts !
    Vielen vielen Dank !!!!

  7. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.273
    Danke
    22
    Bekam 123 mal "Danke" in 122 Postings

    Standard AW: 2 Slideshows mit cycle2 auf einer Seite

    Hallo,

    Ich würde Dir den bxSlider empfehlen, damit mache ich ständig multiple Slider und Ticker parallel.
    Der hat kein Problem damit.

    Gruß Arne

  8. Folgende User finden die Antwort von Arne Drews gut:


Ähnliche Themen

  1. Antworten: 2
    Letzter Beitrag: 20.12.2010, 15:55
  2. TExtfeld aus HTML-Seite in einer weiteren HTML-Seite anzeige
    Von rubensrodriges im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 14.11.2006, 22:51
  3. Inhalt einer Seite auf einer anderen darstellen
    Von TommyTaifun im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.10.2005, 16:20
  4. PHP seite,in einem iFrame auf einer HTML seite
    Von SonicChriz im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.04.2005, 19:17
  5. mehrere java script slideshows pro html?
    Von faun im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.03.2004, 19:36

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •