NAVIGATION
This is an old revision of the document!
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.
CP: Bilder spezial
Docu: –
Forum: LofSlider and LofSliderNews - both new since 1.4.7 r410
Idee und Basis: 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: → /config/phpwcms/conf.inc.php * $phpwcms['allow_cntPHP_rt'] = 1;
Diese Parameter werden im Template
und in der CSS-Datei eingestellt.
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).
Im Infotext kann auch zu jedem Bild eine URL eingebunden werden.
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.
Datei: template/inc_cntpart/imagespecial/Lof-JSliderNews-1-2-3.tmpl
Für den IE9: isPreloaded : false,
<!--IMAGE_SETTINGS_START//--> ; this is formatted like WIN.INI ; please: do not use comments for value lines ; settings will overwrite CP settings width = 450 height = 350 width_zoom = 450 height_zoom = 350 col = 1 ;space = 10 zoom = 1 lightbox = 0 ;nocaption = 0 ; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical ;center = 2 crop = 0 crop_zoom = 0 ;fx1 = 0 ;fx2 = 0 ;fx3 = 0 <!--IMAGE_SETTINGS_END//--> <!--IMAGES_HEADER_START//--> [TITLE]<h3 style="float:left; padding-right:10px;">{TITLE}</h3>[/TITLE] [SUBTITLE]<span style="font-family:arial; font-size:110%;">{SUBTITLE}</span>[/SUBTITLE] <div class="lof-slidecontent"> <div class="lof-main-outer"> <ul class="lof-main-wapper"> <!--IMAGES_HEADER_END//--> <!--IMAGES_ENTRY_START//--> <!-- {IMAGE_NAME} -{IMGID} --> <li> <img src="{THUMB_REL}" title="{TITLE}" height="{THUMB_HEIGHT_MAX}" width="{THUMB_WIDTH_MAX}" alt="{ALT}" /> <div class="lof-main-item-desc" style="z-index:1;"> [TITLE]<!--<h3>{TITLE}</h3>//-->[/TITLE] [INFOTEXT]{INFOTEXT}[/INFOTEXT] [TITLE]<p>[IMAGE_URL]<a href="{IMAGE_URL}" target="_blank"><b>»</b> [/IMAGE_URL]{TITLE}[IMAGE_URL]</a>:[/IMAGE_URL] {ALT}</p>[/TITLE] </div> <div class="lof-nav-item"> <span>[PHP]echo {IMGID}+1;[/PHP]</span> </div> </li> <!-- Thumbnail image: {THUMB_NAME} Title text: {TITLE} Caption text: {CAPTION} // Same like TITLE if no |Alt text is available Alt text: {ALT} // The same like CAPTION text ID/Hash/Ext: {THUMB_ID}/{THUMB_HASH}/{THUMB_EXT} relative: {THUMB_REL} absolute: {THUMB_ABS} height/width: {THUMB_HEIGHT}px/{THUMB_WIDTH}px height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px columns: {THUMB_COLUMNS} If you are not sure wrap zoomed image: [ZOOM] Zoomed (big) image: {IMAGE_NAME} ID/Hash/Ext: {IMAGE_ID}/{IMAGE_HASH}/{IMAGE_EXT} relative: {IMAGE_REL} absolute: {IMAGE_ABS} height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px [/ZOOM] Image URL: {IMAGE_URL}, Target: {IMAGE_TARGET} [EFFECT_1]Yes Effect 1[/EFFECT_1] [EFFECT_2]Yes Effect 2[/EFFECT_2] [EFFECT_3]Yes Effect 3[/EFFECT_3] //--> <!--IMAGES_ENTRY_END//--> <!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//--> <!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//--> <!--IMAGES_FOOTER_START//--> </ul> </div> </div> [TEXT]{TEXT}[/TEXT] <!-- CSS: {TEMPLATE}lib/lofslider/css/lofslider-style01.css --> <!-- CSS: /* Hide the nav item element by default - we use JS to move it at right place */ .lof-nav-item {display:none;} --> <!-- JS: dimensions.min --><!-- JS: easing.min --><!-- JS: mousewheel.min --><!-- JS: {TEMPLATE}lib/lofslider/lofslider01.js --> <!-- JS: // build lofslider navigational element jQuery(document).ready(function(){ // iterate all nav items "div.lof-nav-item $('ul.lof-main-wapper').each(function(){ // append lof navigator wrapper and lof navigator element var nav_wrapper = $('<div class="lof-navigator-wapper"><'+'/div>').insertAfter( $(this).parent() ); var nav_wrapper1= $('<div class="lof-navigator-outer"><'+'/div>').appendTo( nav_wrapper ); var nav = $('<ul class="lof-navigator"><'+'/ul>').appendTo( nav_wrapper1 ); // now iterate all and remove it from DOM the same step var navitems = $(this).find('li div.lof-nav-item').detach(); navitems.each(function(){ // append it to navigator element $('<li><div>' + $(this).html() + '<'+'/div><'+'/li>').appendTo(nav); }); var lof_options = { interval : 4000, easing : 'easeInOutSine', duration : 1000, direction :'[EFFECT_1]opacity[/EFFECT_1]', // 'opacity' auto : false, maxItemDisplay : 3, startItem :0, navPosition : 'horizontal', // horizontal navigatorHeight : 15, navigatorWidth : 25, mainWidth :450, isPreloaded : false, // for IE9 sorry mainItemDesc : '[EFFECT_2].lof-main-item-desc[/EFFECT_2]' // '.lof-main-item-desc' if set, smooth output of Desc text in direction mode = "opacity" +KH 08.05.11 }; $(this).parent().parent().lofJSidernews(lof_options); }); }); --> <!--IMAGES_FOOTER_END//-->
Datei: template/lib/lofslider/css/lofslider-style01.css
Änderung gegenüber Navi: Thumbnail-Liste (jQuery): Zeile 188 entkommentieren (background:#FFF;)
:
ul.lof-navigator li.active , ul.lof-navigator li:hover { background:#FFF;
.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; }
Datei: template/lib/lofslider/lofslider01.js
/** * 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)