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
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by update »

doch doch - es tutet ;)
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
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 »

schön wie er hier 10 leute beschäftigen kann :D
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by update »

:lol:
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by kukki »

Wer den Schaden hat .... :|
Trotzdem aber, es stimmt etwas nicht in diesem Slider, entweder in Zusammenhang mit dieser Version von phpWCMS oder weil ich wirklich hier etwas verka.... habe.

- Alle Scripte werden geladen, keine Fehlermeldungen im < HEAD >.
- die kleinen Bildchen sind auch genriert und versteckt, welche beim Ausblenden von display: none auch zu sehen sind;
- warum befinden sich die Thumbnails nicht im Div-Bereich featured :?:
- Problem: es gibt eine Zeile, die anscheinend keine Funktion/ Reaktion auslöst :!: Darauf hin habe ich mal die Haken aus der Vorlage JS-Bibliotheken entfernt, mit dem Ergebnis, nichts änderte sich -> die JS-Scripte lösen trotz der fehlerfreien Einbindung in HEAD-Bereich keinen Effekt aus.
<div title="TEST TEST TEST" class="ui-tabs-panel" id="fragment-5">
<img width="435" height="249" alt="" src="img/cmsimage.php/435x249x1/2">
<img width="80" height="63" alt="" src="img/cmsimage.php/80x63x1/2" class="hide">
<div class="info">
<h2><a href="so-finden-sie-uns.phtml">So finden Sie uns</a></h2>
<p> »<a href="so-finden-sie-uns.phtml">read more</a></p>
</div>
</div>
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by update »

keine Fehlermedung?
Fehler: console is not defined
Quelldatei: http://www.procomposite-aero.de/templat ... _slider.js
Zeile: 13
Im Safari funktioniert's (irgendwie), im Firefox nicht... da sieht man dann den obigen Fehler...
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
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 »

das teil funktioniert doch wie gewünscht?
es macht genau das auf deiner seite wie ich es vorgesehen habe.

das jquery rubelt die statische template struktur von

Code: Select all

#featured
  div#fragment-1 > img.big+img.thumb.hide+div.info
  div#fragment-5 > img.big+img.thumb.hide+div.info
nach

Code: Select all

#featured
  ul > li > img.thumb
  div#fragment-1 > img.big+div.info
  div#fragment-5 > img.big+div.info
das ist soweit alles korrekt und wird ja auch korrekt dargestellt (ausser einigen css anpassungen)

das einzige was verwirrend ist und was ich heute anders machen würde ist, dass die thumbnails versteckt im #fragment-x block bleiben.
die werden ja in die "tabs" liste kopiert vom jQ und sollten dann eigentlich aus dem DOM verschwinden.
(in Olivers neuem teaser slider template passiert das genau so)

von daher... was ist genau das problem?.

Das einzige was ich gerade feststelle, ist, im IE werden die Thumbnails links nicht angezeigt.
Das liegt daran, das im template, die Thumbnails keine width/height attribute haben.
Eigentlich bräuchte das Script mal ein Update...

zum console fehler.
in der featured slider js die console.log() zeile auskommentieren!
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by kukki »

Dieses Teil funktioniert derzeit nur im Safari, Opera und Chrome, es funktioniert nicht im IE6,7,8 nicht und auch nicht im Firefox, einzig das war mein Problem. :roll:
Und im Safari hört meine Festplatte nicht mehr auf zu rödeln :shock:

Der Bildschirm sieht dann genauso aus:
Image

Nachdem man die Zeile 13 auskommentiert hat, funktioniert es auch im FF und im IE (mit den fehlenden Thumbnails).

Mach doch dann bitte mal ein Update, damit andere User nicht auch über diese Steine stolpern!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
juergen
Moderator
Posts: 4556
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by juergen »

kukki wrote:
Mach doch dann bitte mal ein Update, damit andere User nicht auch über diese Steine stolpern!

Kukki: Du bist dran !!!

:wink:
dastel
Posts: 72
Joined: Wed 18. May 2005, 09:34

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by dastel »

@kukki: kannst du mir mal sagen was du für eine Version benutzt? Ich habe eine r402 und r406 da läuft es Einbahnfrei und eine r412 da geht es nicht!
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by flip-flop »

-> Externe JavaScripte
Ab Version r410 ist der Aufruf von Scripten die sich auf externen Seiten befinden mit z.B. <!-- JS: http:// XYZ.js --> aus Sicherheitsgründen nicht mehr möglich.

Alternativ kann diese Methode gewählt werden:
[PHP]$GLOBALS['block']['custom_htmlhead']['XYZ'] = getJavaScriptSourceLink(html_specialchars('http://XYZ.js'));[/PHP]
Also hieße das in diesen Fall:

Code: Select all

[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]
Auch das Plugin muss hier so eingebunden werden, da sonst die Reihenfolge nicht stimmt.

Alternativ kann natürlich auch:

Code: Select all

<!-- JS: featured_slider -->
<!-- JS: ui-1.8.9.custom.min -->
diese Variante gewählt werden, wenn jqueryui im Pluginordner liegt.
Download der letzten "Stable" Release unter http://jqueryui.com/download
Dann aus dem Paket die "jquery-ui-x.x.x.custom.min.js" nach "template/jquery/plugin/jquery.ui-x.x.x.custom.min.js" kopieren.
(x.x.x steht für die gerade aktuelle Version).

Bei diesen Einbindungen als erstes im generierten Quelltext schauen, ob alle angeforderten Ressourcen geladen werden wenn irgendetwas nicht funktioniert!!!

Knut
Last edited by flip-flop on Wed 2. Feb 2011, 16:20, edited 1 time in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
dastel
Posts: 72
Joined: Wed 18. May 2005, 09:34

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by dastel »

Hallo Flip-Flop,
danke für deine Antwort, ich habe das so

Code: Select all

<!--TEASER_HEAD_START//-->
<div id="featured">
[PHP]
initJSPlugin('featured_slider');
$GLOBALS['block']['custom_htmlhead'][md5($js)] = getJavaScriptSourceLink(html_specialchars('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'));
[/PHP]

<!--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
 * @author marcus@localhorst
 * based on an idea found here:
 * http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
 * */

#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//-->]
eingebunden.

Im Quelltext wird auch alles eingebunden:

Code: Select all

  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.featured_slider.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
aber trotzdem sieht die Seite so aus: http://s355045873.online.de/index.php?home

Bei Versionen bis r406 geht es Problemlos, was mache ich falsch?

Danke.
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 »

Code: Select all

[PHP]
$GLOBALS['block']['custom_htmlhead']['jqueryui'] = getJavaScriptSourceLink('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js');
initJSPlugin('featured_slider');
[/PHP]
es muss erst jqueryui geladen werden, dann das script was die bibliothek verwendet.
und ändere mal [md5($js)] in ['jqueryui'] - $js als variable sollte garnicht verfügbar sein ;-)

Hoffe das hilft.

Tests bestätigen es funktioniert! >> jsbin.com/eqifa4/edit (auf preview gehen)
dastel
Posts: 72
Joined: Wed 18. May 2005, 09:34

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by dastel »

Hallo Marcus,
das war es leider auch noch nicht!

Erkläre mir bitte mal wofür das hier ist:
Tests bestätigen es funktioniert! >> jsbin.com/eqifa4/edit (auf preview gehen)
Aber schon mal Danke für die Hilfe.
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 »

http://jsbin.com/eqifa4

achja und console.log() aus dem featured_slider.js script entfernen, falls firebug bei dir nicht läuft.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

Post by flip-flop »

@Dastel: Du bindest die falsche jquery lib ein, zu der aktuellen UI gehört die Lib 1.4. Oder du bindest ein passendes UI Set zu der Lib 1.3 ein.
Bitte etwas mit der Materie auseinandersetzen, denn diese Bibliotheken sind von der Entwicklung her sehr dynamisch, alles muss zusammen passen. (Im nächsten Monat kann der Bezug schon wieder anders aussehen). -> http://code.google.com/intl/de-DE/apis/ ... guide.html
Diese Wissen darum sollte vorhanden sein wenn man solche Teile anwenden möchte.

@Marcus: $js ist natürlich quatsch, habe das geändert.
Die jquery lib wird mit dem Aufruf des Plugin automatisch in der richtigen Reihenfolge geladen.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Post Reply