• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

slideshow funktioniert nicht ?

I

im-takt

Neues Mitglied
Hallo liebes da bin ich schon wieder mal ^^ .. ohne euch wäre ich schon längst aufgeschmissen ..
danke für euer Zeit und eure Hilfe

ich weiß nicht was ich da falsch mache, ich habe diesen so kopiert und in mein head Bereich eingefügt aber funktionieren tut es nicht. Vil wisst ihr was ich da falsch mache :) ..

vielen dank im Voraus

denn code hab ich von hier:
http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/


Code: 
<style type="text/css">
/*<![CDATA[*/

.jms-slideshow {
    position: relative;
    width: 80%;
    max-width: 1400px;
    min-width: 640px;
    margin: 20px auto;
    height: 460px;
}

.jms-wrapper {
    width: auto;
    min-width: 600px;
    height: 440px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;   
    background-clip: padding-box;
    border: 10px solid #fff;
    border: 10px solid rgba(255, 255, 255, 0.9);
    outline: none;
    transition: background-color 1s linear;
}

.color-1 {
    background-color: #E3D8FF;
    background-color: rgba(227, 216, 268, 1);
}
.color-2 {
    background-color: #EBBBBC;
    background-color: rgba(235, 187, 188, 1);
}

.step {
    width: 900px;
    height: 420px;
    display: block;
    transition: opacity 1s;
}
.step:not(.active) {
    opacity: 0;
}

.jms-content{
    margin: 0px 370px 0px 20px;
    position: relative;
    clear: both;
}
.step h3{
    color: #fff;
    font-size: 52px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    margin: 0;
    padding: 60px 0 10px 0;
}
.step p {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-size: 34px;
    font-weight: normal;
    position: relative;
    margin: 0;
}

a.jms-link{
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(top, #969696 0%,#727272 100%);
    padding: 8px 15px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-radius: 4px;
    opacity: 1;
    margin-top: 40px;
    clear: both;
    transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
    opacity: 0;
    margin-top: 80px;
}

.step img{
    position: absolute;
    right: 0px;
    top: 30px;
}

.jms-dots{
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0px;
    bottom: 20px;
    z-index: 2000;
    user-select: none;
}

.jms-dots span{
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #777;
    margin: 3px;
    cursor: pointer;
    box-shadow:
        1px 1px 1px rgba(0,0,0,0.1) inset,
        1px 1px 1px rgba(255,255,255,0.3);
}

.jms-dots span.jms-dots-current:after{
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

.jms-arrows{
    user-select: none;
}
.jms-arrows span{
    position: absolute;
    top: 50%;
    margin-top: -40px;
    height: 80px;
    width: 30px;
    cursor: pointer;
    z-index: 2000;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
    background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
    left: -10px;
}
.jms-arrows span.jms-arrows-next{
    background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
    right: -10px;
}

/*]]>*/
</style>
 
Und hier der javascript teil :)

Code: 
<script type="text/javascript">
//<![CDATA[

$( '#jms-slider' ).jmslideshow();

jmpressOpts : {
    // set the viewport
    viewPort        : {
        height  : 400,
        width  : 1300,
        maxScale: 1
    },
    fullscreen      : false,
    hash            : { use : false },
    mouse          : { clickSelects : false },
    keyboard        : { use : false },
    animation      : { transitionDuration : '1s' }
},

// specify the jmpress options
var jmpressOpts = {
    animation      : { transitionDuration : '0.8s' }
};
// call the jmslideshow plugin
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
    autoplay    : true,
    bgColorSpeed: '0.8s',
    arrows      : false
}));

$.JMSlideshow.defaults      = {
    // options for the jmpress plugin.
    // you can add more options...
    jmpressOpts : {
        // set the viewport
        viewPort        : {
            height  : 400,
            width  : 1300,
            maxScale: 1
        },
        fullscreen      : false,
        hash            : { use : false },
        mouse          : { clickSelects : false },
        keyboard        : { use : false },
        animation      : { transitionDuration : '1s' }
    },
    // for this specific plugin we will have the following options:
    // shows/hides navigation arrows
    arrows      : true,
    // shows/hides navigation dots/pages
    dots        : true,
    // each step's bgcolor transition speed
    bgColorSpeed: '1s',
    // slideshow on / off
    autoplay    : false,
    // time between transitions for the slideshow
    interval    : 3500
};

_init : function( options ) {
         
    this.options        = $.extend( true, {}, $.JMSlideshow.defaults, options );
 
    // the slides
    this.$slides        = $('#jms-slider').children('div');
    // total number of slides
    this.slidesCount    = this.$slides.length;
    // step's bgcolor
    this.colors        = $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
    // build the necessary structure to run jmpress
    this._layout();
    // initialize the jmpress plugin
    this._initImpress();
    // if support (function implemented in jmpress plugin)
    if( this.support ) {
 
        // load some events
        this._loadEvents();
        // if autoplay is true start the slideshow
        if( this.options.autoplay ) {
     
            this._startSlideshow();
     
        }
     
    }
 
},

_layout            : function() {
         
    // adds a specific class to each one of the steps
    this.$slides.each( function( i ) {
 
        $(this).addClass( 'jmstep' + ( i + 1 ) );
 
    } );
 
    // wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
    this.$jmsWrapper    = this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();
 
    // transition speed for the wrapper bgcolor
    this.$jmsWrapper.css( {
        '-webkit-transition-duration'  : this.options.bgColorSpeed,
        '-moz-transition-duration'      : this.options.bgColorSpeed,
        '-ms-transition-duration'      : this.options.bgColorSpeed,
        '-o-transition-duration'        : this.options.bgColorSpeed,
        'transition-duration'          : this.options.bgColorSpeed
    } );
 
    // add navigation arrows
    if( this.options.arrows ) {
 
        this.$arrows    = $( '<nav class="jms-arrows"/>' );
     
        if( this.slidesCount > 1 ) {
     
            this.$arrowPrev = $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
            this.$arrowNext = $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );
         
        }
        this.$el.append( this.$arrows )
 
    }
 
    // add navigation dots
    if( this.options.dots ) {
 
        this.$dots      = $( '<nav class="jms-dots"/>' );
     
        for( var i = this.slidesCount + 1; --i; ) {
     
            this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );
     
        }
     
        if( this.options.jmpressOpts.start ) {
         
            this.$start    = this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;
         
            ( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;
         
            this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
     
        }
     
        this.$el.append( this.$dots )
 
    }
 
},

_initImpress        : function() {
         
    var _self = this;
 
    this.$jmsWrapper.jmpress( this.options.jmpressOpts );
    // check if supported (function from jmpress.js):
    // it adds the class not-suported to the wrapper
    this.support    = !this.$jmsWrapper.hasClass( 'not-supported' );
 
    // if not supported remove unnecessary elements
    if( !this.support ) {
 
        if( this.$arrows ) {
     
            this.$arrows.remove();
     
        }
     
        if( this.$dots ) {
     
            this.$dots.remove();
     
        }
     
        return false;
 
    }
 
    // redefine the jmpress setActive method
    this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {
     
        // change the pagination dot active class       
        if( _self.options.dots ) {
         
            // adds the current class to the current dot/page
            _self.$dots
                .children()
                .removeClass( 'jms-dots-current' )
                .eq( slide.index() )
                .addClass( 'jms-dots-current' );
     
        }
     
        // delete all current bg colors
        this.removeClass( _self.colors );
        // add bg color class
        this.addClass( slide.data( 'color' ) );
     
    } );
 
    // add step's bg color to the wrapper
    this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );
 
},

// start slideshow if autoplay is true
    _startSlideshow    : function() {
 
        var _self  = this;
     
        this.slideshow  = setTimeout( function() {
         
            _self.$jmsWrapper.jmpress( 'next' );
         
            if( _self.options.autoplay ) {
         
                _self._startSlideshow();
         
            }
     
        }, this.options.interval );
 
    },
    // stops the slideshow
    _stopSlideshow      : function() {
 
        if( this.options.autoplay ) {
             
            clearTimeout( this.slideshow );
            this.options.autoplay  = false;
     
        }
 
    },

_loadEvents        : function() {
         
    var _self = this;
 
    // navigation arrows
    if( this.$arrowPrev && this.$arrowNext ) {
 
        this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
         
            _self._stopSlideshow();
     
            _self.$jmsWrapper.jmpress( 'prev' );
            return false;
     
        } );
     
        this.$arrowNext.on( 'click.jmslideshow', function( event ) {
         
            _self._stopSlideshow();
         
            _self.$jmsWrapper.jmpress( 'next' );
         
            return false;
     
        } );
     
    }
 
    // navigation dots
    if( this.$dots ) {
 
        this.$dots.children().on( 'click.jmslideshow', function( event ) {
         
            _self._stopSlideshow();
         
            _self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );
         
            return false;
     
        } );
 
    }
 
    // the touchend event is already defined in the jmpress plugin.
    // we just need to make sure the slideshow stops if the event is triggered
    this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
 
        _self._stopSlideshow();
 
    } );
 
}

//]]>
</script>
[/CODE]
 
Hast Du denn auch jQuery eingebunden? Ideal wäre es wenn Du einen Link zu deiner Seite zeigst - denn dort liegt ja das Problem ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben