Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

If you have created additional (non official) documentation or tutorials or something like that please post this here
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by marcus@localhorst »

Update: 2009-12-04 Script überarbeitet und update für jQuery-UI 1.7.2

(short english description: http://forum.phpwcms.org/viewtopic.php?p=121208#p121208)

Dieses Tutorial ist nur 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/featur ... nt-slider/ (kein phpwcms ;-))
Das Prinzip des Sliders wird hier erklärt: http://webdeveloperplus.com/jquery/feat ... jquery-ui/

Hier erstmal alle benötigten Dateien:
phpwcms - jquery - featured slider - 2009-12-04.zip
update
(8.62 KiB) Downloaded 618 times
1. Bitte stell sicher, dass du phpwcms auf diese Version aktualisiert hast und in der Datei config/phpwcms/conf.inc.php der Wert

Code: Select all

$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.

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.
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
Plaziere folgenden Template Code:

Code: Select all

<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//-->
Erstelle folgende Javascript Datei /template/lib/jquery/plugin/jquery.featured_slider.js

Code: Select all

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.
UPDATE Solltest du den Fehler:
$("#featured > ul").tabs is not a function in der Firebug Console bekommen, dann
setze den JS aufruf im Template so:

Code: Select all

<!-- JS: featured_slider -->
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js -->
See http://forum.phpwcms.org/viewtopic.php?p=121240#p121240

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

Code: Select all

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:

Code: Select all

// 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
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. 381.
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

Code: Select all

<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 ;-)

Cheers marcus
Last edited by marcus@localhorst on Fri 4. Dec 2009, 09:27, edited 6 times in total.
User avatar
markus s
Moderator
Posts: 654
Joined: Sat 16. Dec 2006, 19:21
Location: Radfeld / Tirol
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by markus s »

sehr gut erläutert und dargestellt !
die beschreibung ist sehr informativ - danke für die mühen.
moderator
propelled by fresh air from tirol
XING|FACEBOOK|OMENTO
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

Hi, I see the demo and it looks great!
Could be possibile to have an english translation?
I've tried to translate the post with google, but unfortunately I don't understand some things.

Thanks a lot.
Campeones del mundo!
Vegetables!
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by marcus@localhorst »

ok very short version in english - hope you can figured out.

1. update to the very latest version (r386 from SVN)! check the new configvars in config.inc.php
2. login and goto ADMIN > Templates - see the new options - choose jquery, load instantly (?), use google ajax lib if you prefer.
It's just important to choose jQuery at this first test ;-)
3. downlaod phpwcms - jquery - featured slider.zip in my first post and drop it into your installation.
take a look at the files/structure.
Setup a Teaser Contentpart with 3 entries - they all need listing images to display!
choose the teaser template provided with the zip file.
save and you should be done :)

For more information, visit this page and peek into the new php files to get a hint what happen!

There is a new Template replacer to add JavaScript dynamically <!-- JS: featured_slider --> need exactly the following file in that path template/lib/jquery/plugin/jquery.featured_slider.js you can use something like <!-- JS: http:/ /ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js --> too.
thats for the template.
In php scripts (at example special frontend_render cases or modules) you can use

Code: Select all

<?php
initJSPlugin('featured_slider');
?>
it's the same.
In case you call a plugin in these ways, jQuery Lib will always be included.
That's all.
Give it a try and tell if it works this way :)
read the code to get the idea behind.
There are some more options like inlineJS calls and onunload calls and stuff, but that's for special cases.
If you switch to jquery all of your previous mootools scripts will not work any longer - slimbox will, because it's included as jQuery version.
so take care of any live environment - make backups or setup a new system to play with that.

cheers
marcus

EDIT: corrected the path to jquery plugins. Thanks Oliver
Last edited by marcus@localhorst on Fri 4. Dec 2009, 09:29, edited 3 times in total.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by Oliver Georgi »

marcus@localhorst wrote:Mit dieser neuen phpwcms Version ist es nun möglich neben mootools 1.x auch jquery zu nutzen.
Um exakt zu sein: MooTools 1.1.x (alt aber aus Kompatibilitätsgründen noch dabei) und MooTools 1.2.x (zu bevorzugen)
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by Oliver Georgi »

marcus@localhorst wrote:...need exactly the following file in that path template/lib/jquery/jquery.featured_slider.js...
template/lib/jquery/plugin/jquery.featured_slider.js
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

Hi marcus, first of all thank for your kindly answer.
marcus@localhorst wrote:ok very short version in english - hope you can figured out.

1. update to the very latest version! check the new configvars in config.inc.php
2. login and goto ADMIN > Templates - see the new options - choose jquery, load instantly (?), use google ajax lib if you prefer.
It's just important to choose jQuery at this first test ;-)
3. downlaod phpwcms - jquery - featured slider.zip in my first post an drop it into your installation.
take a look at the files/structure.
Setup a Teaser Contentpart with 3 entries - they all need listing images to display!
choose the teaser template provided with the zip file.
save and you should be done :)

For more information, visit this page and peek into the new php files to get a hint what happen!
Ok, I've done this, but seems that it doesn't work :?

This is my configuration, at r386
Here I load the jquery:

Image

Then I set the teaser CP, choosing the featured.html template:

Image

And here you can see the result:
http://www.angelosignore.it/WEB_TEMP/in ... 59,0,0,1,0
Campeones del mundo!
Vegetables!
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by Oliver Georgi »

Update really all files. It seems there are some missing - so it is not parsed as expected.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

Oliver Georgi wrote:Update really all files. It seems there are some missing - so it is not parsed as expected.
Ok, thanks for the answer, I will try to start with a fresh installation and let you know.
Campeones del mundo!
Vegetables!
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

Ok, I have a fresh installation (r386) with only 4 article.
In the Homepage article I put a teaser CP, with 3 articles, but nothing appear:

http://www.angelosignore.it/TEMPORANEA/index.php?aid=1
Campeones del mundo!
Vegetables!
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by marcus@localhorst »

the sourcecode shows clearly the JS replacer and nothing is loaded

Code: Select all

<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js -->
<!-- JS: featured_slider -->
it seems you are using a version before r385 because these replacers came later.
http://code.google.com/p/phpwcms/source/list

be sure you use r386 ! it's important, because of some bugs and enhancement!
did you get your version directly from svn?
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

marcus@localhorst wrote:the sourcecode shows clearly the JS replacer and nothing is loaded

Code: Select all

<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js -->
<!-- JS: featured_slider -->
it seems you are using a version before r385 because these replacers came later.
http://code.google.com/p/phpwcms/source/list

be sure you use r386 ! it's important, because of some bugs and enhancement!
did you get your version directly from svn?
Yes, I have a svn version on my desktop, and that's the versione I'm using.

Anyway, now I'm downloading the phpwcmsr386.zip version from here:

http://www.phpwcms-docu.de/download-dev-versions.phtml

I will try to re-upload all the files.
Campeones del mundo!
Vegetables!
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

Ok, I have uploaded the latest versione and put the settings in, but there's no way.

http://www.angelosignore.it/TEMPORANEA/index.php

Moreover, a part of the code is rendered in the page (you can see it behind the second image)

Code: Select all

$GLOBALS['block']['custom_htmlhead']['featured_slider_css']=" "; 
:?
Campeones del mundo!
Vegetables!
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by marcus@localhorst »

ok, looks better now :)
first set

Code: Select all

$phpwcms['allow_cntPHP_rt']   = 1;
in config.inc.php
so you are able to render the [PHP] Tags which set the CSS to the header.
( or just put the complete CSS from template into a css file and load it from there or remove the "[PHP]$GLOBALS..."... "[/PHP]" and leave the <style> inline... )

next thing is a bit odd
all JS files are loaded correctly, but in wrong order.
please switch the <!-- JS: ... --> in template to:

Code: Select all

<!-- JS: featured_slider -->	
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js -->
To be honest - it's a bit mad to load the complete jQueryUI just for that tabs effect which is animated ;-)
but this tutorial is just an example how to work with your preferred JS Lib in phpwcms and not really useful for production.
If you use jQuery-UI Lib for other stuff like dialog, datepicker or whatever - so it's nice to use that effect along with other stuff of UI.
But as standalone it's not best practice (you can load that Tab Script as standalone for sure)
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by sustia »

Hi marcus
marcus@localhorst wrote:ok, looks better now :)
first set

Code: Select all

$phpwcms['allow_cntPHP_rt']   = 1;
in config.inc.php
so you are able to render the [PHP] Tags which set the CSS to the header.
( or just put the complete CSS from template into a css file and load it from there or remove the "[PHP]$GLOBALS..."... "[/PHP]" and leave the <style> inline... )
Yes, my fault, sorry, I forgot to set that parameter...
next thing is a bit odd
all JS files are loaded correctly, but in wrong order.
please switch the <!-- JS: ... --> in template to:

Code: Select all

<!-- JS: featured_slider -->	
<!-- JS: http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js -->
To be honest - it's a bit mad to load the complete jQueryUI just for that tabs effect which is animated ;-)
but this tutorial is just an example how to work with your preferred JS Lib in phpwcms and not really useful for production.
If you use jQuery-UI Lib for other stuff like dialog, datepicker or whatever - so it's nice to use that effect along with other stuff of UI.
But as standalone it's not best practice (you can load that Tab Script as standalone for sure)
Perfect, it works, thanks a lot! :D

Only one thing: why the image thumbnail is displayed at the bottom too?

Image
Campeones del mundo!
Vegetables!
Post Reply