php / js Frage

[Susanne81]

Hi.
Ist wohl das falsche Board, aber hier kann mir bestimmt jemand helfen.

Es gibt da dieses JS:

var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}
function CloseNewWin(){if(win!=null && win.open)win.close()}

Der Code, um ein Popup zu öffnen sieht z.B. so aus:

<a href="test/test.jpg" onclick="NewWindow(this.href,'image','850','578','yes','center');return false" onfocus="this.blur()"  name="image" alt="image">test</a>

Funktioniert wunderbar.
Nun möchte ich das automatisiert auf alle Links anwenden, die auf ein Bild verweisen. Dazu habe ich mir ein Plugin geschnappt, welches eigentlich nur das rel="lightbox" Attribut hinzufügt und anstelle dessen versucht das

onclick="NewWindow(this.href,'image','850','578','yes','center');return false" onfocus="this.blur()"

einzusetzen.

so, z.B.

add_filter('the_content', 'addlightboxrel_replace');
function addlightboxrel_replace ($content)
{   global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 onclick="NewWindow(this.href,image,850,578,yes,center);return false" onfocus="this.blur()" name="image" alt="image">$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    $content = str_replace("%LIGHTID%", $post->ID, $content);
    return $content;
}

Behalte ich die ' ' bei image, 850, usw drin gibt es einen php Error, nehme ich sie raus, so wie oben zu sehen, oder ersetze sie durch " " passiert leider nichts.

Wie mache ich das denn nun, meine Lieben?

Einen sonnigen Tag,
su*

[codestyling]

Hallo,

es gibt da einige Möglichkeiten, das zu automatisieren. Da du sowieso Javascript voraussetzt, ist es unnötiger Rechenaufwand, die Fenster auf dem Server reincodieren zu lassen. Das kann auch ein weiteres Script auf dem Client erledigen und verringert deine Serverbeanspruchung.

Allerdings müsste man wissen, ob du immer nur jpg oder auch andere Bildformate benutzt, welche WP Version du einsetzt und ob das für alle <a> gilt, deren href auf ein Bild verweist.

Der Vorteil in clientseitigen Bearbeitung (per Script) liegt in der weiterhin gegebenen Validierung und für Leute, die kein Javascript angeschaltet haben, in der Benutzung der Links, die dann trotzdem funktionieren sollten (könnte man ja noch einen target='_blank' reinmachen).

Du kannst die o.g. Informationen hier posten oder mir eine PM schicken, dann kann ich dir die max. 10 Zeilen JS Code anpassen und bereitstellen.

[Susanne81]

hi!
ich habe es jetzt zwar hinbekommen, das o.g. script läuft, aber wenn du noch eine bessere Lösung weisst, dann immer her damit!

Hier die Infos:
- wp: 2.5.1
- jpg, gif, png
- alle a innerhalb des contents

Zwei Fragen: bekommst Du es auch hin, dass das Popup genausogroß wie das zu öffnende Bild ist? Und kannst Du dem Popup auch css styles zuweisen?

s.

[codestyling]

Bei diesen Zusatzwünschen und möglichen Blockierung der Popup Windows durch Popup Blocker, wäre es vermutlich eine bessere Option, eines der Plugins zu verwenden, die Bilder in div overlays darstellen.
So was wie Gallery Plugins usw.

Ich selbst benutze diese Plugins allerdings nicht, denn ich habe keine Gallerien. Allenfalls ein Bild, das ich gezoomed in einem div als Overlay haben will. Dafür hab ich eigene Scripts, die allerdings etwas Ballast mit sich bringen, denn das ist nicht das Einzige, was ich mit Scripts mache.

Wenn du dennoch auf der window.open( Variante bestehts, dann kann ich dir das Script bereitstellen. Aber Freude macht das dann den Besuchern deiner Seite nicht, denn der Popup Blocker wird da u.U. eingreifen.

[Susanne81]

Danke für die schnelle Antwort!

Leider kann ich keine Lightbox o.ä. benutzen, da der Blog in einem Iframe (ja, muss so, leider) läuft. Dazu gibt es auch schon einen Thread: myGallery: Problem mit der Anzeige des Bildtitels...

Bin jetzt mit popups auch ganz zufrieden und finde sie auch hinsichtlich der großen Verbreitung von Lightbox und co. schon wieder ganz cool.

Würde also bei win.open bleiben wollen, ja.
Aber Danke für den Tipp!

[codestyling]

Anbei ein kleines Plugin (kannst je gern umbenennen), das alle Links in einer Seite, deren href auf png | jpg | gif enden, in einem Popup darstellen.
Um die Größen korrekt automatisch zu ermitteln, müsste ich mehr Zeit reinstecken in die Entwicklung, wäre aber machbar.

In dieser Version ist deshalb die Größe der Öffnung halbautomatisch:

<a href="/media/bug.jpg" alt="500|300" title="was auch immer">TEST BILD</a>

Im alt Attribute musst du Breite und Höhe als erstes mit | getrennt angeben, dann wird das Fenster in dieser Größe geöffnet.
Wenn das nicht geht bei dir, dann im javascript des Plugins wieder feste Wert weiterhin benutzen.

[Susanne81]

Oh Wow!
Danke Dir!

Selten, dass sich jemand so viel Mühe gibt! Ich teste das gleich morgen früh.

bussi,
su*

[codestyling]

... Anhang geupdated, jetzt sollte es auch automatisch die richtigen Größen als alt Attribute in die <a> Tags reinschreiben.
Also nun braucht's nur so zu sein:

<a href="http://www.bmeise.test/media/bug.jpg">Testbild</a>

und daraus macht das Plugin dann:

<a title="Bugfix: WordPress 2.3.3 und TinyMCE 2.1.1.1" alt="300|200" name="image" href="http://www.bmeise.test/media/bug.jpg">Testbild</a>

Der Title des Bildes ist dann zusätzlich der Post Title, wenn du das nicht möchtest, nimms raus.
Ist so konzipiert, das es auch mit relativen URI Angaben zurechtkommen sollte, hängt aber im Einzelfall davon ab, woher die Bilder kommen, ob es dann auch geht.

[Susanne81]

Gerade getestet. (OS X - FF, Safari, Opera, jeweils neueste Verision)
Leider führt das Popup zu einem 404.

Der Code, der im Frontend generiert wird, sieht so aus:

<a href=".../wp-content/uploads/2008/05/test.jpg" name="image" alt="850|580" title="Bild Test"><img class="alignnone size-medium wp-image-14" title="lykke-li1" src=".../wp-content/uploads/2008/05/test-500x341.jpg" alt="" width="500" height="341" /></a>

Geändert habe ich nichts ausser, dass ich das Plugin und die Dateien von Susanne81 in img_popup umbenannt habe. (Ebenfalls in der php Zeile 31)

Läuft das bei Dir?

Einen schönen Wochenstart,
die su*

[codestyling]

Also nun wundere ich mich aber.
Wie kommt es denn zu dieser Ausgabe ?

href=".../wp-content/uploads/2008/05/test.jpg"

Dies ist keine gültige, relative Angabe für das Bild. 2 Punkte würde ich ja noch verstehen, aber wie kommt es zu 3 Punkten ?
Es ist dadurch natürlich nicht möglich, das Bild zu finden und somit kommt ein 404. Werden die Bilder mit einem anderen Plugin in den Post integriert oder schreibst du das selbst in den Post ?