Differences

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

deutsch:phpwcms-system:artikel:contentparts:teaser-artikellink:slider-mit-jquery [2009/12/07 20:42]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:teaser-artikellink:slider-mit-jquery [2018/06/03 18:08] (current)
Line 1: Line 1:
 +{{indexmenu_n>10}}
 +
{{indexmenu_n>10}} {{indexmenu_n>10}}
Line 10: Line 12:
Ich möchte das kurz in diesem Tutorial an einem praktischen Beispiel erklären. 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 ;-)) \\+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/]] Das Prinzip des Sliders wird hier erklärt: [[http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/]]
Line 23: Line 26:
**Version:** V1.0 \\ **Version:** V1.0 \\
**Update:** 1.0 (2009/12/04) \\ **Update:** 1.0 (2009/12/04) \\
 +**Update:** 1.0 (2011/02/02) \\
-**Download**: {{:deutsch:phpwcms-system:artikel:contentparts:teaser-artikellink:phpwcms_-_jquery_-_featured_slider_-_2009-12-04.zip|phpwcms_-_jquery_-_featured_slider_-_2009-12-04.zip}}+**Download**: \\ 
 +Bis V1.4.7 r409: {{:deutsch:phpwcms-system:artikel:contentparts:teaser-artikellink:phpwcms_-_jquery_-_featured_slider_-_2009-12-04.zip|phpwcms_-_jquery_-_featured_slider_-_2009-12-04.zip}} \\ 
 +Ab V1.4.7 r410:  
 +{{:deutsch:phpwcms-system:artikel:contentparts:teaser-artikellink:phpwcms_-_jquery_-_featured_slider_-_2011-02-02.zip|phpwcms_-_jquery_-_featured_slider_-_2011-02-02.zip}} \\ //(Mit UI-Bibliothek V1.8.9 für jQuery V1.4 in "template/libjquery/plugin/")//.
- 
- 
- 
-Dateiname: **random_image.tmpl** \\ 
-Verzeichnis: ** /template/inc_cntpart/images/ ** 
**Bedingung:** ##$phpwcms['allow_cntPHP_rt']   = 1;## -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] **Bedingung:** ##$phpwcms['allow_cntPHP_rt']   = 1;## -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]]
Line 36: Line 38:
---- ----
\\ \\
 +
 +===== Anleitung: =====
 +
**1.** Bitte stell sicher, dass du phpwcms auf diese Version aktualisiert hast und in der Datei **config/phpwcms/conf.inc.php** der Wert **1.** Bitte stell sicher, dass du phpwcms auf diese Version aktualisiert hast und in der Datei **config/phpwcms/conf.inc.php** der Wert
Line 43: Line 48:
$phpwcms['allow_cntPHP_rt']   = 1; $phpwcms['allow_cntPHP_rt']   = 1;
</code> </code>
-gesetzt wurde.+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** \\ **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. +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. 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. 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. \\ 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.+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. 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.
Line 189: Line 194:
<!--TEASER_FOOTER_END//--> <!--TEASER_FOOTER_END//-->
</code> </code>
 +
 +\\
 +**UPDATE 02.02.2011:**
 +
 +Ab der CMS-Version V1.4.7 r410 muss
 +
 +<code html>
 +<!-- JS: featured_slider -->
 +<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->
 +</code>
 +
 +ersetz werden durch
 +
 +<code php>
 +[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]
 +</code>
 +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
 +<code html>
 +<!-- JS: featured_slider -->
 +<!-- JS: ui-1.8.9.custom.min -->
 +</code>
 +
\\ \\
Line 207: Line 240:
      var imgw    = imghide.attr('width');             var imgw    = imghide.attr('width');      
      var imgh    = imghide.attr('height');       var imgh    = imghide.attr('height');
-      console.log(imgh)      +//      console.log(imgh)      
      var text    = $(this).find('h2').text();             var text    = $(this).find('h2').text();      
      var id      = $(this).attr('id');         var id      = $(this).attr('id');  
Line 295: Line 328:
\\ \\
- 
-===== Kleine Linkübersicht ===== 
- 
-{{indexmenu>deutsch:phpwcms-system:artikel:contentparts:/teaser-artikellink|js#doku navbar msort nsort nocookie notoc}} 
deutsch/phpwcms-system/artikel/contentparts/teaser-artikellink/slider-mit-jquery.1260214939.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
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