Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:nav-list-1-2-3 [2011/05/17 01:40]
Knut Heermann (flip-flop)
+++ deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:nav-list-1-2-3 [2018/06/03 18:08] (current)
@@ Line 3: / Line 3: @@
 ====== Navi: 1-2-3-Liste (jQuery) ======
-**JQuery Plugin für die Darstellung von Bildern mit zugehörigem Text.**
 **Richtung:** Rechts - Links. Die Navigation ist eine Liste aus Zahlen //(1 2 3 4 5 ...)//. \\
-Das Plugin erlaubt den Einsatz des Mausrades für die Auswahl des vorherigen|nächsten Bildes in der Liste.
-  * 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: [[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:** 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;
-----
 ----
 \\
-\\
 ===== Frontendausgabe: =====
@@ Line 64: / Line 40: @@
 Das große Bild wird im CP in das Feld "Vorschau" eingetragen, da dieser Eintrag zwingend ist damit ein Bild generiert wir.
-Im CP kann durch die Effektschalter bestimmt werden, ob Opazität //(Effekt 1)// oder der Infotext bewegt eingeblendet wird //(Effekt 2 nur bei Opazität möglich)//.
+** InfoBox:**
+  * Im CP kann durch die Effektschalter bestimmt werden, ob Opazität //(Effekt 1)// oder der Infotext bewegt eingeblendet wird //(Effekt 2 nur bei Opazität möglich)//.
-Im Infotext kann auch zu jedem Bild eine URL eingebunden werden.
+  * Im Infotext kann auch zu jedem Bild eine URL eingebunden werden.
+  * Mit dem Schalter "Vorschaubilder ohne Bildunterzeile" wird die Ausgabe der InfoBox abgeschaltet.
 Wie in der oben gezeigten Backendgrafik zu sehen werden fast alle Einstellmöglichkeiten im CP in das Template verlagert um mögliche Fehler bei der EIngabe im CP zu vermeiden.
@@ Line 76: / Line 53: @@
 **Datei:** template/inc_cntpart/imagespecial/Lof-JSliderNews-1-2-3.tmpl
-**Für den IE9:** ##''isPreloaded : false,''##
+  * **Für den IE9:** <file>	isPreloaded     : false,   // for IE9 sorry</file>
+  * **Navi Hintergrundfarbe:** <file>
+<!-- CSS:
+	/* Set Navi background color for active and hover */
+	ul.lof-navigator li.active , ul.lof-navigator li:hover  {background:#FFF;}
+-->
+</file>
+\\
 <code html|h Lof-JSliderNews-1-2-3.tmpl |h>
 <!--IMAGE_SETTINGS_START//-->
@@ Line 116: / Line 100: @@
 			<li>
 				<img src="{THUMB_REL}" title="{TITLE}" height="{THUMB_HEIGHT_MAX}" width="{THUMB_WIDTH_MAX}" alt="{ALT}" />
+				[CAPTION]
 				<div class="lof-main-item-desc" style="z-index:1;">
 					[TITLE]<!--<h3>{TITLE}</h3>//-->[/TITLE]
@@ Line 121: / Line 106: @@
 					[TITLE]<p>[IMAGE_URL]<a href="{IMAGE_URL}" target="_blank"><b>&raquo;</b> [/IMAGE_URL]{TITLE}[IMAGE_URL]</a>:[/IMAGE_URL] &nbsp;{ALT}</p>[/TITLE]
 				</div>
+				[/CAPTION]
 				<div class="lof-nav-item">
 					<span>[PHP]echo {IMGID}+1;[/PHP]</span>
@@ Line 173: / Line 159: @@
 	/* Hide the nav item element by default - we use JS to move it at right place */
 	.lof-nav-item {display:none;}
+	/* Set Navi background color for active and hover */
+	ul.lof-navigator li.active , ul.lof-navigator li:hover  {background:#FFF;}
 -->
 <!-- JS: dimensions.min --><!-- JS: easing.min --><!-- JS: mousewheel.min --><!-- JS: {TEMPLATE}lib/lofslider/lofslider01.js -->
@@ Line 227: / Line 215: @@
 \\
-===== CSS: =====
+===== CSS und JavaScript: =====
-**Datei:** template/lib/lofslider/css/lofslider-style01.css
+Siehe [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews]]
-**Änderung** gegenüber [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-of-thumbnails]]: Zeile 188 entkommentieren ''(background:#FFF;)'':
-<code css>
-ul.lof-navigator li.active , ul.lof-navigator li:hover  {
-	background:#FFF;
-</code>
 \\
-<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;
-}
-</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			: false,
-			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>
-\\

deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews/nav-list-1-2-3.1305589207.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions