Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:nav-list-of-thumbnails [2011/05/16 21:42]
Knut Heermann (flip-flop)
+++ deutsch:phpwcms-system:artikel:contentparts:bilder-spezial:lof-slidernews:nav-list-of-thumbnails [2018/06/03 18:08] (current)
@@ Line 3: / Line 3: @@
 ====== Navi: Thumbnail-Liste (jQuery) ======
-**JQuery Plugin für die Darstellung von Bildern mit zugehörigem Text.**
 **Richtung:** Rechts - Links. Die Navigation ist eine Liste aus kleinen Vorschaubildern //(Thumbnails)//. \\
-Das Plugin erlaubt den Einsatz des Mausrades für die Auswahl des vorherigen|nächsten Bildes in der Liste.
-  * Die Reihenfolge der Bilder wird in CP festgelegt.
-  * Die Anzeige der Bilder in der Serie kann mit einer manuellen Thumbnail-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 48: / Line 23: @@
 ~~UP~~
+\\
+====== Beschreibung: ======
+  * In diesem Beispiel wird für die großen Bilder das Seitenverhältnis 4:3 verwendet. Die Breite sieht 450px vor.
+  * Die Navigationsbilder haben eine Größe von 70px x 25px.
+Diese Parameter werden im Template
+  * großes Bild:
+    * INI: width = 450, height = 350
+    * JS: mainWidth :450
+  * Navi-Thumbnail:
+    * INI: width_zoom = 75 , height_zoom = 25
+und in der CSS-Datei eingestellt.
+Die Bilder werden im CP umgekehrt gegenüber der CP-Feldbeschriftung eingetragen. Das große Bild wird in "Vorschau" und das kleine Bild in "Großansicht" eingetragen //(Könnte im Template geändert werden)//.
+** 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.
+  * 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 54: / Line 56: @@
 **Datei:** template/inc_cntpart/imagespecial/Lof-JSliderNews-images.tmpl
+  * **Für den IE9:** <file>	isPreloaded     : false,   // for IE9 sorry</file>
+\\
 <code html|h Lof-JSliderNews-images.tmpl |h>
 <!--IMAGE_SETTINGS_START//-->
@@ Line 82: / Line 87: @@
 [SUBTITLE]<span style="font-family:arial; font-size:110%;">{SUBTITLE}</span>[/SUBTITLE]
-<div id="lofslidecontent45" class="lof-slidecontent">
+<div class="lof-slidecontent">
 	<div class="lof-main-outer">
   		<ul class="lof-main-wapper">
@@ Line 92: / Line 97: @@
 			<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 97: / Line 103: @@
 					[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">
 					<img src="{IMAGE_REL}" />
@@ Line 209: / Line 216: @@
 </code>
-~~UP~~
-\\
-===== 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;
-}
-</code>
-~~UP~~
 \\
-===== JavaScript: =====
+===== CSS und JavaScript: =====
-**Datei:** template/lib/lofslider/lofslider01.js
+Siehe [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews]]
-<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>
 \\

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

Show page Old revisions