Lof SliderNews (jQuery)

Lof SliderNews 1.0 - Jquery 1.3 & Easing plugin → The Lof JSiderNews Plugin

JQuery Plugin für die Darstellung von Bildern mit zugehörigem Text.

Richtung: Rechts - Links.

JS Bibliothek:* In der Vorlage mindestens “jQuery 1.4” einstellen. Die Navigation: * ist eine Liste aus Zahlen (1 2 3 4 5 …). * besteht aus Knöpfen an der linken und rechten Seite. * ist eine Liste aus kleinen Vorschaubildern (Thumbnails). Das Plugin erlaubt den Einsatz des Mausrades für die Auswahl des vorherigen|nächsten Bildes. * Die Reihenfolge der Bilder wird im CP festgelegt. * Die Anzeige der Bilder in der Serie kann mit einer manuellen Navigation oder Automatik gesteuert werden. * Als Bildwechselfunktion können “Bilder horizontal schieben” oder “Opazität” gewählt werden. CP: Bilder spezial —-

—- Docu: –
Forum: LofSlider and LofSliderNews - both new since 1.4.7 r410 Idee und Basis: The Lof JSiderNews Plugin
Adaptiert: O.Georgi http://phpwcms.de
Erweitert: K.Heermann (flip-flop) http://planmatrix.de 2011/05/03
CMS version: >= V1.4.7 r410
Version: V1.0
Update: – Tag: –
Bedingung: → /config/phpwcms/conf.inc.php * $phpwcms['allow_cntPHP_rt'] = 1; * phpwcms['allow_ext_init'] = 0; —- —-
===== Für alle folgenden jQuery Varianten: ===== * Navi: 1-2-3-Liste (jQuery) * Navi: Buttons links/rechts (jQuery) * Navi: Thumbnail-Liste (jQuery)
==== CSS: ==== Datei: template/lib/lofslider/css/lofslider-style01.css <code css|h lofslider-style01.css |h> .lof-slidecontent { position:relative; overflow:hidden; width:450px; height:350px; } .lof-slidecontent .preload { height:100%; width:100%; background:#FFF; position:absolute; top:0; left:0; z-index:100000; color:#FFF; text-align:center } .lof-slidecontent .preload div { height:100%; width:100%; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%; position:relative; } .lof-main-outer{ position:relative; height:100%; width:450px; z-index:3px; overflow:hidden; } .lof-main-item-desc{ z-index:100px; position:absolute; bottom:10px; left:0px; width:450px; background:url(../images/transparent_bg.png); padding:2px; color:#aaa; } .lof-main-item-desc b { font-size: 110%; color: #009bff; } .lof-main-item-desc h3 { color:#DDD; margin:0; font-size:140%; padding:0px 8px 2px; font-family:“Trebuchet MS”, Trebuchet, Arial, Verdana, sans-serif; } .lof-main-item-desc a, .lof-main-item-desc a:link,.lof-main-item-desc a:visited { font-size:110%; } } .lof-main-item-desc h3 a { color:#FFF; margin:0; font-family:“Trebuchet MS”, Trebuchet, Arial, Verdana, sans-serif; } .lof-main-item-desc h3 a:hover { color:#FF6; text-decoration:underline; } .lof-main-item-desc p{ margin:0 0 0 10px; padding:5px 0 0 5px; line-height: 16px; } .lof-main-item-desc strong { margin:0; padding:0; font-size:120%; color:#eee; } ul.lof-main-wapper { overflow:hidden; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; height:345px; width:450px; position:absolute; overflow:hidden; } ul.lof-main-wapper li { overflow:hidden; padding:0px; margin:0px; height:100%; width:450px; float:left; position:relative; } .lof-opacity { overflow:visible !important;; position:absolute !important; } .lof-opacity li{ position:absolute !important;; top:0; left:0; float:inherit !important; } ul.lof-main-wapper li img { padding:0px; width:450px; } li-desc { z-index:100; position:absolute; top:150px; left:50px; width:400px; background:url(../images/transparent_bg.png); } li-desc p { color:#FFF; margin:0 8px; padding:8px 0 } li-desc h3 a { color:#FFF; margin:0; font-size:140%; padding:20px 8px 2px; font-family:“Trebuchet MS”, Trebuchet, Arial, Verdana, sans-serif; } li-desc h3 a:hover { color:#FF6; text-decoration:underline; } .lof-navigator-wapper { position:absolute; top:10px; right:10px; background:#000; padding:5px 15px; -moz-border-radius:5px 5px 5px 5px; } .lof-navigator-outer{ position:relative; z-index:100; height:180px; width:310px; overflow:hidden; color:#FFF; float:left } ul.lof-navigator{ top:0; padding:0; margin:0; position:absolute; width:100%; } ul.lof-navigator li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin-left:0px; overflow:hidden; float:left; display:block; text-align:center; } ul.lof-navigator li.active , ul.lof-navigator li:hover { color:#000; display:block; } ul.lof-navigator li img{ border:#666 solid 3px; } ul.lof-navigator li.active img, ul.lof-navigator li:hover img { border:#A8A8A8 solid 3px; } .lof-navigator-wapper .lof-next, .lof-navigator-wapper .lof-previous{ display:block; width:22px; height:30px; color:#FFF; cursor:pointer; } .lof-navigator-wapper .lof-next { float:left; text-indent:-999px; margin-right:5px; background:url(../images/arrow-l.png) no-repeat right center; } .lof-navigator-wapper .lof-previous { float:left; text-indent:-999px; margin-left:5px; background:url(../images/arrow-r.png) no-repeat left center; } .lof-main-outer .lof-next, .lof-main-outer .lof-previous{ display:block; width:40px; color:#FFF; cursor:pointer; position:absolute; height:100%; z-index:3; top:0; text-indent:-999px; } .lof-main-outer .lof-next { right:05px; background:url(../images/b_next.png) no-repeat right center; } .lof-main-outer .lof-previous { left:05px; background:url(../images/b_prev.png) no-repeat left center; } </code>
==== JavaScript: ==== Datei: template/lib/lofslider/lofslider01.js <code js|h lofslider01.js |h> JavaScript Document (function($) { $.fn.lofJSidernews = function( settings ) { return this.each(function() { get instance of the lofSiderNew. new $.lofSidernews( this, settings ); }); } $.lofSidernews = function( obj, settings ){ this.settings = { direction : '', mainItemSelector : 'li', navInnerSelector : 'ul', navSelector : 'li' , navigatorEvent : 'click', wapperSelector: '.lof-main-wapper', interval : 4000, auto : true, whether to automatic play the slideshow maxItemDisplay : 3, startItem : 0, navPosition : 'vertical', navigatorHeight : 100, navigatorWidth : 310, duration : 600, navItemsSelector : '.lof-navigator li', navOuterSelector : '.lof-navigator-outer' , isPreloaded : true, easing : 'easeInOutQuad', mainItemDesc : '.lof-main-item-desc' if set, smooth output of Desc text in direction mode = “opacity” +KH 08.05.11 } $.extend( this.settings, settings ||{} ); this.nextNo = null; this.previousNo = null; this.maxWidth = this.settings.mainWidth || 600; this.wrapper = $( obj ).find( this.settings.wapperSelector ); this.slides = this.wrapper.find( this.settings.mainItemSelector ); if( !this.wrapper.length || !this.slides.length ) return ; set width of wapper if( this.settings.maxItemDisplay > this.slides.length ){ this.settings.maxItemDisplay = this.slides.length; } this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem; this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector ); this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ; this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector ); if( this.settings.navPosition == 'horizontal' ){ this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth ); this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth ); this.navigatorOuter.height( this.settings.navigatorHeight ); } else { this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight ); this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight ); this.navigatorOuter.width( this.settings.navigatorWidth ); } this.navigratorStep = this.getPositionMode( this.settings.navPosition ); this.directionMode = this.getDirectionMode(); if( this.settings.direction == 'opacity') { this.wrapper.addClass( 'lof-opacity' ); $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1); Rolling back to the beginning when the end is reached this.caption = $( obj ).find( '.lof-main-item-desc' ); $( obj ).find( '.lof-main-item-desc' ).hide().eq(0).show(); this.caption = $( obj ).find( this.settings.mainItemDesc ); $( obj ).find( this.settings.mainItemDesc ).hide().eq(0).show(); } else { this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } ); } if( this.settings.isPreloaded ) { this.preLoadImage( this.onComplete ); } else { this.onComplete(); } } $.lofSidernews.fn = $.lofSidernews.prototype; $.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend; $.lofSidernews.fn.extend({ startUp:function( obj, wrapper ) { seft = this; this.navigatorItems.each( function(index, item ){ $(item).click( function(){ seft.jumping( index, true ); seft.setNavActive( index, item ); } ); $(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} ); }) this.registerWheelHandler( this.navigatorOuter, this ); this.setNavActive(this.currentNo ); if( this.settings.buttons && typeof (this.settings.buttons) == “object” ){ this.registerButtonsControl( 'click', this.settings.buttons, this ); } if( this.settings.auto ) this.play( this.settings.interval,'next', true ); return this; }, onComplete:function(){ setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( ); }, preLoadImage:function( callback ){ var self = this; var images = this.wrapper.find( 'img' ); var count = 0; images.each( function(index,image){ if( !image.complete ){ image.onload =function(){ count++; if( count >= images.length ){ self.onComplete(); } } image.onerror =function(){ count++; if( count >= images.length ){ self.onComplete(); } } }else { count++; if( count >= images.length ){ self.onComplete(); } } } ); }, navivationAnimate:function( currentIndex ) { if (currentIndex ⇐ this.settings.startItem || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) { this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2; if (this.settings.startItem < 0) this.settings.startItem = 0; if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) { this.settings.startItem = this.slides.length-this.settings.maxItemDisplay; } } this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), {duration:500, easing:'easeInOutQuad'} ); }, setNavActive:function( index, item ){ if( (this.navigatorItems) ){ this.navigatorItems.removeClass( 'active' ); $(this.navigatorItems.get(index)).addClass( 'active' ); this.navivationAnimate( this.currentNo ); } }, getPositionMode:function( position ){ if( position == 'horizontal' ){ return ['left', this.settings.navigatorWidth]; } return ['top', this.settings.navigatorHeight]; }, getDirectionMode:function(){ switch( this.settings.direction ){ case 'opacity': this.maxSize=0; return ['opacity','opacity']; default: this.maxSize=this.maxWidth; return ['left','width']; } }, registerWheelHandler:function( element, obj ){ element.bind('mousewheel', function(event, delta ) { var dir = delta > 0 ? 'Up' : 'Down', vel = Math.abs(delta); if( delta > 0 ){ obj.previous( true ); } else { obj.next( true ); } return false; }); }, registerButtonsControl:function( eventHandler, objects, self ){ for( var action in objects ){ switch (action.toString() ){ case 'next': objects[action].click( function() { self.next( true) } ); break; case 'previous': objects[action].click( function() { self.previous( true) } ); break; } } return this; }, onProcessing:function( manual, start, end ){ this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1); this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length); return this; }, finishFx:function( manual ){ if( manual ) this.stop(); if( manual && this.settings.auto ){ this.play( this.settings.interval,'next', true ); } this.setNavActive( this.currentNo ); }, getObjectDirection:function( start, end ){ return eval(”({'”+this.directionMode[0]+”':-”+(this.currentNo*start)+”})”); }, fxStart:function( index, obj, currentObj ){ if( this.settings.direction == 'opacity' ) { $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} ); $(this.slides).eq(index).stop().animate( {opacity:1},this.settings.duration, this.settings.easing, function(){ $(currentObj.caption.slideUp().eq(index)).slideDown(); } ); }else { this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} ); } return this; }, jumping:function( no, manual ){ this.stop(); if( this.currentNo == no ) return; var obj = eval(”({'”+this.directionMode[0]+”':-”+(this.maxSize*no)+”})”); this.onProcessing( null, manual, 0, this.maxSize ) .fxStart( no, obj, this ) .finishFx( manual ); this.currentNo = no; }, next:function( manual , item){ this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length); this.onProcessing( item, manual, 0, this.maxSize ) .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ) .finishFx( manual ); }, previous:function( manual, item ){ this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1; this.onProcessing( item, manual ) .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ) .finishFx( manual ); }, play:function( delay, direction, wait ){ this.stop(); if(!wait){ this[direction](false); } var self = this; this.isRun = setTimeout(function() { self[direction](true); }, delay); }, stop:function(){ if (this.isRun == null) return; clearTimeout(this.isRun); this.isRun = null; } }) })(jQuery) </code>

===== Kleine Linkübersicht =====