Content Slider mit jQuery ab phpwcms 1.4.4 rev 386

[update]

doch doch - es tutet

[marcus@localhorst]

schön wie er hier 10 leute beschäftigen kann

[update]

[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>

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

[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!

[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.
Und im Safari hört meine Festplatte nicht mehr auf zu rödeln

Der Bildschirm sieht dann genauso aus:


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!

[juergen]

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

Kukki: Du bist dran !!!

[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!

[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

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

[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]

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.

[marcus@localhorst]

http://jsbin.com/eqifa4

achja und console.log() aus dem featured_slider.js script entfernen, falls firebug bei dir nicht läuft.

[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