{{indexmenu_n>10}}

====== 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]]

**The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.** 

**Direction:** right - left. 

**JS Library:** Set in the template at least ##jQuery 1.4##. 

**The Navigation:** 
  * is a list of numbers //(1 2 3 4 5 ...)//. 
  * consists of buttons on the left and right.
  * is a list of small thumbnails.

The plugin allows the use of the mouse wheel to select the previous | next picture.

  * The sequence of images is defined in the CP. 
  * The display of the pictures in the series can be controlled with a manual or automatic navigation.
  * As a screen change function "images move horizontally" or "opacity" is selected. 

**CP:** image special


----
\\
[[english/phpwcms-system/article/contentparts/images-special/lof-slidernews/nav-list-1-2-3|{{deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:fe_image_special_opacity01_1.gif?260 }}]]
[[english/phpwcms-system/article/contentparts/images-special/lof-slidernews/nav-buttons-left-right|{{deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:fe_image_special_opacity03_1.gif?265 }}]]
[[english/phpwcms-system/article/contentparts/images-special/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: [[http://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]] \\
**Adapted:** O.Georgi http://phpwcms.de \\
**Enhanced:** K.Heermann (flip-flop) http://planmatrix.de //2011/05/03 // \\
**CMS version:** >= V1.4.7 r410\\
**Version:** V1.0 \\
**Update:** --

**Tag:** -- \\

**Condition:**  -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml|/config/phpwcms/conf.inc.php]]
  * $phpwcms['allow_cntPHP_rt']   = 1; 
  * phpwcms['allow_ext_init']  = 0;

----
----
\\

===== For all subsequent versions (jQuery): =====

      

  * [[english/phpwcms-system/article/contentparts/images-special/lof-slidernews/nav-list-1-2-3]]
  * [[english/phpwcms-system/article/contentparts/images-special/lof-slidernews/nav-buttons-left-right]]
  * [[english/phpwcms-system/article/contentparts/images-special/lof-slidernews/nav-list-of-thumbnails]]

\\

==== CSS: ====

**File:** 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: ====

**File:** 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>

\\





\\

===== Short link overview =====

{{indexmenu>english:phpwcms-system:article:contentparts:images-special:lof-slidernews|js#doku navbar msort nsort nocookie notoc}}