[[Lof SliderNews (jQuery)]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » phpwcms System » ARTIKEL » ContentParts » Bilder spezial » Lof SliderNews (jQuery)
Show pageOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews [2011/05/16 17:23]
Knut Heermann (flip-flop) 		deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews [2018/06/03 18:08] (current)
Line 1: Line 1:
{{indexmenu_n>10}} {{indexmenu_n>10}}
-====== Lof SliderNews ======+====== Lof SliderNews (jQuery) ====== 
 + 
 +**Lof SliderNews 1.0 - Jquery 1.3 & Easing plugin** -> [[http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html|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 
 + 
 + 
 +---- 
 +\\ 
 +[[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-1-2-3|{{deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:fe_image_special_opacity01_1.gif?260 }}]] 
 +[[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-buttons-left-right|{{deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:fe_image_special_opacity03_1.gif?265 }}]] 
 +[[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-of-thumbnails|{{deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:fe_image_special_opacity02_1.gif?260 }}]] 
 + 
 + 
 +~~CLEARFLOAT~~ 
 + 
 +\\ 
 +---- 
 +Docu: -- \\ 
 +Forum: [[ttp://forum.phpwcms.org/viewtopic.php?f=1&t=20941|LofSlider and LofSliderNews - both new since 1.4.7 r410]] 
 + 
 + 
 +**Idee und Basis:** [[http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html| 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:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]]  
 +  * $phpwcms['allow_cntPHP_rt']   = 1;  
 +  * phpwcms['allow_ext_init']  = 0; 
 + 
 +---- 
 +---- 
 +\\ 
 + 
 +===== Für alle folgenden jQuery Varianten: ===== 
 + 
 +  * [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-1-2-3]] 
 +  * [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-buttons-left-right]] 
 +  * [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-of-thumbnails]] 
 + 
 +\\ 
 + 
 +==== CSS: ==== 
 + 
 +**Datei:** template/lib/lofslider/css/lofslider-style01.css 
 + 
 + 
 +<code css|h lofslider-style01.css |h> 
 +.lof-slidecontent { 
 + position:relative; 
 + overflow:hidden; 
 +/* border:#F4F4F4 solid 1px; */ 
 + 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; 
 +/* height:100px; */ 
 + background:url(../images/transparent_bg.png);  
 + /* filter:0.7(opacity:60) */ 
 + 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%; 
 +/* padding:15px 16px 2px; */ 
 +} 
 + 
 +} 
 +.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; 
 +} 
 + 
 +/* main flash */ 
 +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; 
 +} 
 +/* Desc text */ 
 +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; 
 +} 
 + 
 +/* item navigator */ 
 +.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  { 
 +/* background:#FFF; */ 
 + 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; 
 +} 
 + 
 +/* Demo 6 Right/LEft button */ 
 +.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> 
 +/** 
 + * LofSliderNews 
 + * Copyright (c) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved. 
 + * This plugin is dual-licensed under the GNU General Public License and the MIT License 
 + * http://landofcoder.com/our-porfolios/jquery-plugins/item/10-the-lof-jsidernews-plugin.html 
 + */ 
 +// 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> 
 + 
 +\\ 
 + 
 + 
-Lof SliderNews 1.0 - Jquery 1.3 & Easing plugin 
\\ \\
deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews.1305559430.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
Show pageOld revisions
Back to top
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0