Slider mit jQuery

Dieses Tutorial ist nur ab/für phpwcms version 1.4.4, rev 386, 2009/11/29
Mit dieser neuen phpwcms Version ist es nun möglich neben mootools 1.x auch jquery zu nutzen.

Ich möchte das kurz in diesem Tutorial an einem praktischen Beispiel erklären.

Dem “Featured Slider” mit Hilfe von jQuery, jQueryUI und dem Teaser Contentpart
Demo: http://demo.webdeveloperplus.com/featured-content-slider/ (kein phpwcms )
Das Prinzip des Sliders wird hier erklärt: http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

Docu: –
Forum: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Autor: Marcus Obst (marcus@localhorst) http://www.marcus-obst.de/ 2009/11/30
CMS Version: >= V1.44 r386
Version: V1.0
Update: 1.0 (2009/12/04)
Update: 1.0 (2011/02/02)

Download:
Bis V1.4.7 r409: phpwcms_-_jquery_-_featured_slider_-_2009-12-04.zip (8.65 KiB, 128 downloads)
Ab V1.4.7 r410: phpwcms_-_jquery_-_featured_slider_-_2011-02-02.zip (59.91 KiB, 111 downloads)
(Mit UI-Bibliothek V1.8.9 für jQuery V1.4 in “template/libjquery/plugin/”).

Bedingung: $phpwcms['allow_cntPHP_rt'] = 1; → /config/phpwcms/conf.inc.php —-

1. Bitte stell sicher, dass du phpwcms auf diese Version aktualisiert hast und in der Datei config/phpwcms/conf.inc.php der Wert

$phpwcms['js_lib'] = array('mootools-1.2' => 'MooTools 1.2', 'mootools-1.1' => 'MooTools 1.1', 'jquery' => 'jQuery 1.3');
$phpwcms['allow_cntPHP_rt']   = 1;

gesetzt wurde. (In neueren CMS Versionen können die Versionsnummern der JS-Bibliotheken auch nach oben hin abweichen).

2. Logge dich ins Backend ein und öffne dein Seitentemplate unter ADMIN > Vorlagen
Dort findest du neue Optionen, deine bevorzugte JavaScript Bibliothek auszuwählen, in unserem Falle jQuery 1.3 (ab V1.4.7 r410 → jQuery 1.4). Je nach Anwendungsart (Inline Javascript, Globale Javascript Funktionalität auf allen Seiten) kannst du jQuery immer laden.

Der Vorteil ist, die Bibliothek ist immer verfügbar und wird im Browsercache zwischengespeichert. Optional kannst du die Bibliothek von Google Ajax Lib Service laden. Das wird an der einen oder anderen Stelle im Netz als Performancegewinn beim Laden der Website beschrieben.
Ansonsten wird eine Kopie von jQuery aus dem Ordner template/lib/jquery gezogen.

Das Laden der alten frontend.js wird nur empfohlen, wenn du z.B. vergrößerte Bilder in Popup Fenstern öffnest (anstatt in der hippen Lightbox), ansonsten kannst du das ignorieren.

Speichere dein Template und prüfe im Quelltext der Website ob jquery korrekt eingebunden wird.

3. Als nächstes erstellen wir das Template für den Teaser CP, das dazugehörende CSS und JavaScript, sowie den Teaser CP selbst.

Der Teaser CP soll 3 Artikel darstellen, die alle ein Listing Bild enthalten. Diesem wird das nachfolgende Template zugewiesen - Bildgrößen müssen nicht gesetzt werden, das geschieht im Template!

3.1. Erstelle ein Template für den Teaser CP in template/inc_cntpart/teaser/featured.html
Platziere folgenden Template Code:

<div id="featured">
<!-- JS: featured_slider -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->
 
<!--TEASER_HEAD_END//-->
 
<!--TEASER_ENTRY_START//-->
[IMAGE]
<div id="fragment-{ARTICLEID}" class="ui-tabs-panel" title="{SUMMARY}">
   <img src="img/cmsimage.php/435x249x1/{THUMB_ID}" width="435" height="249" alt="" />
   <img class="hide" src="img/cmsimage.php/80x63x1/{THUMB_ID}" width="80" height="63" alt="" />
    <div class="info" >
      <h2><a href="{ARTICLELINK}">{TITLE}</a></h2>
      <p>{SUBTITLE} &raquo;<a href="{ARTICLELINK}">read more</a></p>
    </div>
</div>
[/IMAGE]
<!--TEASER_ENTRY_END//-->
 
<!--TEASER_SPACER_START//-->
 
<!--TEASER_SPACER_END//-->
 
<!--TEASER_FOOTER_START//-->
</div>
[PHP]
$GLOBALS['block']['custom_htmlhead']['featured_slider_css']="
<style>
/* -- Featured - contentslider */
 
#featured .hide {display:none;}
 
#featured{
   padding-right:265px;
   position:relative;
   border:5px solid #ccc;
   height:249px;
   background:#fff;
   margin-bottom:2em;
}
#featured ul.ui-tabs-nav{
   position:absolute;
   top:0;
   left:435px;
   list-style:none;
   padding:0;
   margin:0;
   width:265px;
}
#featured ul.ui-tabs-nav li{
   padding:0;
   padding-left:13px;
   font-size:12px;
   color:#666;
}
#featured ul.ui-tabs-nav li img{
   float:left; margin:2px 5px;
   background:#fff;
   padding:2px;
   border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
   font-size:11px;
   line-height:18px;
}
#featured li.ui-tabs-nav-item a{
   display:block;
   height:73px;
   color:#333;
   background:#fff;
   line-height:20px;
   padding:5px 0;
}
#featured li.ui-tabs-nav-item a:hover{
   background:#f2f2f2;
}
#featured li.ui-tabs-selected{
   background:url('../inc_layout/contentslider/selected-item.gif') center left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
   background:#ccc;
}
#featured .ui-tabs-panel{
   width:400px; height:250px;
   background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
   position:absolute;
   top:179px; left:0;
   height:70px;
   background: url('../inc_layout/contentslider/transparent-bg.png');
   overflow:hidden;
   min-width:60%;
}
#featured .info h2{
   font-size:18px; font-family:Georgia, serif;
   color:#fff; padding:5px; margin:0;
   overflow:hidden;
}
#featured .info p{
   margin:0 5px;
   font-family:Verdana; font-size:11px;
   line-height:15px; color:#f0f0f0;
}
#featured .info a{
   text-decoration:none;
   color:#fff;
}
#featured .info a:hover{
   text-decoration:underline;
}
#featured .ui-tabs-hide{
   display:none;
}
 
</style>
";
[/PHP]
<!--TEASER_FOOTER_END//-->

UPDATE 02.02.2011:

Ab der CMS-Version V1.4.7 r410 muss

<!-- JS: featured_slider -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->

ersetz werden durch

[PHP]
initJSPlugin('featured_slider');
$GLOBALS['block']['custom_htmlhead']['jqueryui'] = getJavaScriptSourceLink(html_specialchars('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'));
[/PHP]

da mit dem TAG <!-- JS:....--> keine JS-Datei von einer externen Seite mehr eingebunden werden kann.
(Bei der oben gezeigt Einbindung der UI-Version 1.8.9 muss die jQuery V1.4x Lib im Template eingeschaltet sein).

Alternativ kann auch die statische UI-Bibliothek (im Downloadpaket 2011-02-02 enthalten) verwendet werden mit

<!-- JS: featured_slider -->
<!-- JS: ui-1.8.9.custom.min -->

Erstelle folgende Javascript Datei /template/lib/jquery/plugin/jquery.featured_slider.js

jQuery(document).ready(function() {
 
var featured = $("#featured");
var panels = $("#featured .ui-tabs-panel");
featured.find('.hide').css('display','none'); //just make sure they are hidden ;-)
   // build the featured slider list
   var list = '<ul class="ui-tabs-nav">';
   panels.each(function(e){
      var imghide = $(this).find('.hide');
      var imgsrc  = imghide.attr('src');
      var imgw    = imghide.attr('width');
      var imgh    = imghide.attr('height');
//      console.log(imgh)
      var text    = $(this).find('h2').text();
      var id      = $(this).attr('id');
      list += '<li class="ui-tabs-nav-item"><a href="#'+id+'"><img src="'+imgsrc+'" style="width:'+imgw+'px;height:'+imgh+'px" alt="" /><span>'+text+'</span></a></li>';
   });
   list += '</ul>';
    featured.prepend(list);
 
   featured.tabs({
      fx:{opacity: "toggle"}}
      ).tabs("rotate", 9000, true);
 
});

Erklärungen zum HTML:

Für den Slider wird zusätzlich die jQuery UI Lib benötigt und etwas JS Code um die im Originalbeispiel vorgegebene HTML Struktur zu generieren, da dies nicht von PHPWCMS bewerkstelligt werden kann, sowie der Aufruf der Slider Funktion.

Dazu gibt es neu den Template Replacer

<!-- JS: PluginName|my.js //Whatever text -->

In unserem Falle wird zuerst die jQuery UI lib der Einfachheithalber vom Google Ajax Lib Service geladen.
Als nächstes wird unser jquery.featured_slider.js Datei geladen.

Solltest du den Fehler: $(”#featured > ul”).tabs is not a function in der Firebug Console bekommen, dann setze den JS aufruf im Template so:

<!-- JS: featured_slider -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->

<note> # Info für Entwickler:
Alternativ können JS Dateien natürlich auch in einer template/inc_script/frontend_render/*.php Datei geladen werden.

initJSPlugin('featured_slider');

Diese Funktion läd das jquery.featured_slider.js Script UND jQuery wenn es noch nicht in $block['custom_htmlhead']['jquery.js'] vorhanden ist.

Dazu bitte diese Infos beachten und die neuen php Dateien ansehen um zu verstehen was da passiert!
Sollte das JS aus unserem Beispiel via frontend_render Script global in die Seite eingefügt werden, würde ich das so machen:

// load jqueryui (be sure you load jquery permanently!)
$block['custom_htmlhead']['jqueryui.js'] = getJavaScriptSourceLink('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js');
// load jquery.featured_slider.js
initJSPlugin('featured_slider');
// print_r($block['custom_htmlhead']); just to check the order of loaded JS files

</note>

Weiter im Template - danach erzeugen wir die Teasereinträge.

Ich benutze cmsimage.php um entsprechend ein großes und ein kleines Bild für den Slider zu erzeugen.
Um {THUMB_ID} nutzen zu können, muss [IMAGE] im Template existieren, das ist neu seit rev. r381.

Die Listenstruktur mit den kleinen Vorschaubildern wird mit jQuery erzeugt, da dies mit dem Teasertemplate nicht möglich ist.
Dazu legen wir versteckt ein kleines Bild ab

<img class="hide" style="display:none;" src="img/cmsimage.php/80x63x1/{THUMB_ID}" alt="" />

Dieses wird dann vom JavaScript über die CSS Klasse .hide geholt und dynamisch in die Liste inkl. der Überschriften eingefügt.
Das JavaScript dafür ist von der HTML Struktur des Templates abhängig - also Vorsicht bei Änderungen!

Ja und wenn Du alles richtig gemacht hast, rotiert der Slider durch deine Teaserartikel.

PS: Dies ist nach besten Wissen erstellt worden. Es gibt mit den neuen JS Lib Funktionen in PHPWCMS mehrere Wege zum Ziel zu kommen. Ich habe das oben kurz angerissen.

Der hier vorgestellte weg, ist der einfachste, da Templatebasiert - für so kleine Anwendungen ist das ausreichend. Je nach Arbeitsweise, können Skripte/Funktionen als einzelne Plugins abgelegt und geladen werden oder in einer einzigen Datei gepackt werden. Dieses Tutorial ist zum lernen gedacht, wenn ein Fehler drin ist, berichtigt mich bitte, ansonsten gutes Gelingen.

Und nochwas - es ist natürlich Unsinn, für diesen Effekt gleich die gesamte jQuery-UI Bibliothek zu laden. Den bekommt man sicher auch irgendwo als Standalone, aber wenn man sowieso jQueryUI in seiner Website Verwendet, für Dialoge, Datepicker, Slider oder weiss der Geier was, dann ist der featured_slider einfach eine fixe Erweiterung.

Versteht das Tutorial bitte als Beispiel, wie man eigene Scripte für JQuery oder Mootools in PHPWCMS einfügt. Das sollte nicht unbedingt produktiv genutzt werden.