NAVIGATION
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 10:55] 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) ====== | ====== 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 ...)//. \\ | **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:** 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 \\ | **Version:** V1.0 \\ | ||
**Update:** -- | **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: ===== | ===== Frontendausgabe: ===== | ||
Line 246: | Line 221: | ||
\\ | \\ | ||
- | ===== CSS: ===== | ||
- | **Datei:** template/lib/lofslider/css/lofslider-style01.css | ||
- | |||
- | **Ä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; | ||
- | } | ||
- | |||
- | /* 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> | ||
- | |||
- | \\ | ||
- | ===== CSS und JavaScript: ===== | ||
- | |||
- | Siehe [[deutsch/phpwcms-system/artikel/contentparts/bilder-spezial/lof-slidernews]] | ||
- | |||
- | |||
- | \\ | ||