nicht angemeldet
Da dürftest du eher eine Fehlermeldung in der JS-Konsole bekommen, weil »» ein solcher Request die Same Origin Policy verletzt, und somit unter
normalen Umständen gar nicht möglich ist.
Das ich den Status 400 bekomme liegt daran, dass ich bei den URLs, die ich
meiner Javascript Funktion übergebe ein modifiziertes (= so, dass auch
externe URL's möglich sind) timthumb script mitlaufen habe.
Meine URL's sehen beispielsweise so aus :
http://localhost/wordpress/wp-content/themes/gazette/timthumb.php?src=http://c2.ac-images.myspacecdn.com/images02/42/l_b2bc676b05364fb1b61a41abf6e99c1d.jpg&h=270&w=595&zc=1&q=95
Jedoch wäre es schon schön, wenn Du eben mit Beispielcode hilfreich zur »» Seite stündest, um aufzuklären, statt Offensichtlichkeiten abzufragen und
somit den entsetzlichen Stil von Cheatah nachzuäffen.
hmm ... mein Beispielcode ist aber endlos lang. Ich hätte nicht gedacht,
dass jemand sich für meine Leidensgeschichte interessiert :o) Aber bitte:
Ich arbeite an einem Wordpress Theme ähnlich dem WOO Gazette theme.
Dies verwendet die Smooth Gallery von johndesign.net.
Leider besitzt diese Gallerie meines Wissens keine Funktion ein "default"
Bild anzugeben, sollte ein Bild nicht geladen werden können. Diese versuche
ich nun nachträglich hinzuzufügen.
Die Bilder liest die Gallerie aus folgendem html Code aus :
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="gallery-images/item-1/" title="open image" class="open"></a>
<img src="assets/images/samples/77196_6784-gallery.jpg" class="full" alt="Item 1 Title" />
<img src="assets/images/samples/77196_6784-mini.jpg" class="thumbnail" alt="thumbnail of Item 1 Title" />
</div>
</div>
Anfangs hab ich eine Lösung des Problems mit php versucht. Zuerst indem ich
die Existenz der Bilder mit "fopen" abgefragt habe, dann mit cURL und
schlussendlich mit get_headers. Aber die ersten beiden sind recht langsame
Funktionen die die Ladezeit der Seite stark erhöhen, letztere funktioniert
nur mit php5.
Also hab ich mich für eine Client-seitige Lösung entschieden. Javascript.
Zuerst hab ich versucht die Bilder Url mit onerror zu modifizieren, so dass
bei einem Fehler eine Funktion aufgerufen wird, die direkt auf die DOM der
Smooth Gallery zugreift :
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="gallery-images/item-1/" title="open image" class="open"></a>
<img src="assets/images/samples/77196_6784-gallery.jpg" onerror="default_pic(this.src)" class="full" alt="Item 1 Title" />
<img src="assets/images/samples/77196_6784-mini.jpg" onerror="default_pic(this.src)" class="thumbnail" alt="thumbnail of Item 1 Title" />
</div>
</div>
Dazugehörige Javascript Funktion :
function default_pic(src){
var default_thumb = "http://localhost/airbagpromo_testarea/wp-content/themes/gazette/images/default_100x75.png";
var sft = src.search(/h=75/);
var sfi = src.search(/h=270/);
var thumb_src = window.el.innerHTML;
var searchfor = src.replace(/&/g, "&");
searchfor = searchfor.toRegExpString();
searchfor = new RegExp(searchfor, "g");
if(sft != -1){ //it's a thumbnail
thumb_src = thumb_src.replace(searchfor, default_thumb);
window.el.innerHTML = thumb_src;
}
if(sfi != -1){// it's a normal picture
// todo
}
}
// changes any String to a RegExp compatible format replacing reserved chars ^$.*+?=!:|\/()[]{}
String.prototype.toRegExpString = function () { // does not work in netscape 4;
return this.replace(/([\^\$\.\*\+\?\=\!\:\|\\\/\(\)\[\]\{\}])/g,"\\$1");
};
Das Problem hierbei war, dass es mir zwar gelungen ist die DOM der
smooth Gallery (window.el.innerHTML) zu verändern. Diese Veränderungen
jedoch nicht übernommen wurden. Warum weiß ich nicht, dazu hätte ich
den Code der smooth Gallery genauer studieren müssen. Mir ist aber
aufgefallen, dass es wenn ich direkt das smooth Gallery script verändere
funktioniert. Also habe ich abermals meinen Ansatz gewechselt:
In Zeile 149 der jd.gallery.js Version 2.0 versuche ich nun
direkt das Script so zu verändern, dass ein "default"-Bild angezeigt wird.
Den ganzen Code kann ich aufgrund der Beschränkungen des Forums ("sie
sind wohl geschwätzig") nicht posten. Deshalb hier der Auszug :
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
// alert("src: "+ el.getElement(options.imageSelector).getProperty('src'));
var img_exists = file_exist(el.getElement(options.imageSelector).getProperty('src'));
alert(img_exists);
elementDict = {
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
};