NAVIGATION
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}} | ||