mmh, ich frag mich warum das bei mir funktioniert?!
Knut hat aber recht, das Tutorial/script ist in Internetzeit gerechnet irgendwo in der Renaissance anzusiedeln. Also 1 Jahr alt.
Inzwischen gabs Fortschritte und Updates und wie gesagt - ich würde es jetzt auch etwas anders machen.
Ich wollte ursprünglich mit dem Tutorial auch nur die Möglichkeiten illustrieren, sowas in phpwcms einzubinden.
Es sollte keine Out-of-the-Box Lösung sein, wie z.B. der mittlerweile integrierte LofSlider, der so ähnlich funktioniert.
Weiterhin ist es quatsch für so einen simplen Effekt die JqueryUI Bibliothek zu laden.
Das ich den console.log() Aufruf im Skript vergessen habe zu entfernen ist blöd weil man im schlechtesten Falle nicht weiss, warum das Skript nicht läuft. Aber Firebug hat doch eigentlich jeder Webentwickler an oder?
Ok, also nochmal prüfen:
console.log() aus dem featured_slider.js raus.
Wenn jQ 1.4 geladen wird dann hier den link zur richtigen jQ UI raussuchen
http://code.google.com/apis/libraries/d ... l#jqueryUI
https://ajax.googleapis.com/ajax/libs/j ... -ui.min.js
Ladereihenfolge ist
jQuery 1.4
jQueryUI 1.8
frontend_slider.js
blublub offensichtlich funktioniert es jetzt auf deiner seite
jetzt muss nur doch das CSS und evt die dimensionen der Bilder angepasst werden...
Hiernochmal das featured slider script ohne log()
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');
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.find('.hide').remove();
featured.tabs({
fx:{opacity: "toggle"}}
).tabs("rotate", 9000, true);
});
edit: Codeupdate: entfernen der versteckten thumbs aus dem DOM via featured.find('.hide').remove();