[[Navi: Thumbnail-Liste (jQuery)]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » phpwcms System » ARTIKEL » ContentParts » Bilder spezial » Lof SliderNews (jQuery) » Navi: Thumbnail-Liste (jQuery)
Show pageOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

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 22:56]
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) ====== ====== 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)//. \\ **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 im 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 \\ **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 48: Line 23:
~~UP~~ ~~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 **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> <code html|h Lof-JSliderNews-images.tmpl |h>
<!--IMAGE_SETTINGS_START//--> <!--IMAGE_SETTINGS_START//-->
Line 82: Line 87:
[SUBTITLE]<span style="font-family:arial; font-size:110%;">{SUBTITLE}</span>[/SUBTITLE] [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"> <div class="lof-main-outer">
   <ul class="lof-main-wapper">    <ul class="lof-main-wapper">
Line 92: Line 97:
<li> <li>
<img src="{THUMB_REL}" title="{TITLE}" height="{THUMB_HEIGHT_MAX}" width="{THUMB_WIDTH_MAX}" alt="{ALT}" /> <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;"> <div class="lof-main-item-desc" style="z-index:1;">
[TITLE]<!--<h3>{TITLE}</h3>//-->[/TITLE] [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] [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> </div>
 + [/CAPTION]
<div class="lof-nav-item"> <div class="lof-nav-item">
<img src="{IMAGE_REL}" /> <img src="{IMAGE_REL}" />
Line 212: Line 219:
\\ \\
-===== 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-1-2-3]]: Zeile 188 kommentieren ''(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 : 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.1305579395.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
Show pageOld revisions
Back to top
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0