Textlink to Image in Lightbox

[godmd]

@Pepe
Hast ja zweifelsfrei recht, es war bisher echt eine Zeifrage. Deshalb bin ich ja auch immer nur sporadisch hier vertreten und muss dann nach etlichen Monaten immer mal wieder sehen, was es bei euch so neues gibt. Vor längerer Zeit hatte ich mal versucht, eine php/mysql-Umgebung lokal zu installieren, bin aber kläglich gescheitert, aber es gibt ja noch den webspace ...

[pepe]

Also wenn du hier die EXE (7-zip) Version (28 MB) runterlädst,

http://www.apachefriends.org/de/xampp-windows.html

Die Datei unmittelbar in C:/ oder D:/ ablegst... und startest...
Dann entpackt sich dort ein kompletter Server C:/XAMPP oder D:/XAMPP, mit allem was dazu gehört.

Da kannst du dann ohne weitere Einstellungen experimentieren, als wärst du online...
Wenn alles erledigt, einfach den Ordner LÖSCHEN... und fertig ist!
Allerdings...... du wirst ihn nicht löschen, denn das Ding ist unersetzlich für all die kleinen Experimente zwischendurch!

Du kannst das Alles sogar auf einem USB-Stick unterbringen... und deinem Kunden als lauffähige phpWCMS-Demoversion auf seinem eigenen PC vorführen. Die Herren freuen sich da meist wie die kleinen Jungs drüber, du wirst sehen
Oder du schenkst deiner Freundin eine EIGENE SITE funktionsfertig zum Muttertag ... Es gibt 1000 Möglichkeiten


PS
off topic und die andern lesen mal NICHT weiter....
Was ich schon lange fragen wollte... sagt dir Actifry was ??? Ein JA oder NEIN reicht mir schon

Hey, NICHT weiterlesen hatte ich gesagt!

[godmd]

Okay, probier ich dann nochmal. Danke für den Link.

Im Verschenken von Websites bin ich eh groß


Off the record:
Scannst du das Web - im Speziellen chefkoch.de - nach Usernamen oder was??? Ja, hab aber (noch) keine.

[pepe]

Noch mal offtopic... OG möge es noch einmal verzeihen

Ne, ne, Anka, so ist das nicht. Und ich bin auch kein verkappter KGB Agent .
Da aber hier im Forum seit einem Jahr so recht nix mehr los ist, hab ich - neben anderen Dingen - das Backen für mich entdeckt:
http://cookblog.peperkorn-online.de/ (Ich gestehe ja schon, es ist WordPress ) Irgendwie muß man sich ja die Zeit vertreiben

Und in dem Zusammenhang kommt man ganz nebenbei auf die site, die du gerade genannt hast...
Na und da viel mir eben der dein Namen mit der entsprechenden Userkennung auf.
So eine Namensgleichheit wäre ja reichlich zufällig gewesen, oder

So und jetzt werd ich mal eben einen Schokoladenkuchen mit Rumrosinen backen gehen... PROST!

[godmd]

Heiko!!!!!! Ich war schon kurz davor, mich aufzuhängen. Guck mal: http://forum.phpwcms.org/viewtopic.php? ... 884#p99884

LG
Anka

[flip-flop]

So sollte es funktionieren, lediglich die if( ! ( strpos($content["all"],'[LIGHTBOX:')===false ) ) {
ist einige Zeilen höher gerückt. Nun wird abgefragt ob LIGHTBOX: verwendet wird. Wenn das nicht der Fall ist wird auch keine SlimBox/Mootools von diesem Skript hinzugelinkt.

Code: Select all

<?php
// ****************************************************************
// Tue Feb 19, 2008  Heiko H.
// http://forum.phpwcms.org/viewtopic.php?p=99630#p99630
// 
// This RT returns a text link to a picture, 
// this is then shown in a lightbox/slimbox.
//
// Just put this in a *.php file in frontend_render folder.
//  
// Use the RT like this 
// [LIGHTBOX:real_imagename.ext:Your Caption]Your Text[/LIGHTBOX]
// The real imagename (eg. image.jpg) can be found in file center. 
// ****************************************************************

// ----------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) {
   die("You Cannot Access This Script Directly, Have a Nice Day.");
}
// ----------------------------------------------------------------

function lightbox_link($real_imgname, $caption, $link_text="")
{

//hash des files ermitteln
$sql = "SELECT f_hash "."FROM ".DB_PREPEND."phpwcms_file WHERE f_name LIKE '".$real_imgname."' AND f_trash = '0'";
$result = mysql_query($sql);
$row = mysql_fetch_row($result);
$img_hash = $row[0];

//link zusammenstellen
$lightbox_link = "<a href=".PHPWCMS_FILES.$img_hash.".jpg class=\"lightbox_link\" rel=\"lightbox\" title=\"".$caption."\" target=\"_blank\">";
$lightbox_link .= $link_text."</a>";

//link ausgeben
return $lightbox_link;
}

if( ! ( strpos($content["all"],'[LIGHTBOX:')===false ) )
{
//Prüfung ob slimbox.css usw. schon vorhanden
   if (!isset ($GLOBALS['block']['custom_htmlhead']['lightbox.css']))
   {
    $GLOBALS['block']['custom_htmlhead']['lightbox.css']   = '  <link rel="stylesheet" href="'.TEMPLATE_PATH.'slimbox/css/slimbox.css" type="text/css" media="screen" />';
   }
   if (!isset ($GLOBALS['block']['custom_htmlhead']['mootools.js']))
   {
    $GLOBALS['block']['custom_htmlhead']['mootools.js']   = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
   }
   if (!isset ($GLOBALS['block']['custom_htmlhead']['slimbox.js']))
   {
    $GLOBALS['block']['custom_htmlhead']['slimbox.js']      = '  <script src="'.TEMPLATE_PATH.'slimbox/js/slimbox.js" type="text/javascript"></script>';
    }

$content['all'] = preg_replace('/\[LIGHTBOX:(.*?):(.*?)\](.*?)\[\/LIGHTBOX]/e','lightbox_link("$1","$2","$3");',$content['all']);
}
?>

[Heiko H.]

ähem, ich meinte das --> page peel (bzw. page curl) JS.
Auf der von dir genannten Seite verbergen sich darin einige Links, die ein Pop-up öffnen wollen, was aber wegen der gleichnamigen --> Blocker nicht funktioniert....

Ich weiß...

[Heiko H.]

So sollte es funktionieren, lediglich die if( ! ( strpos($content["all"],'[LIGHTBOX:')===false ) ) {
ist einige Zeilen höher gerückt. Nun wird abgefragt ob LIGHTBOX: verwendet wird. Wenn das nicht der Fall ist wird auch keine SlimBox/Mootools von diesem Skript hinzugelinkt.

Danke Knut,

wie bereits gesagt das ist frühestes Alphastadium...
Das Skript fliegt auch auf die Schn... wenn der "Real-Bildername" mehrfach vorkommt, was ja problemlos machbar ist...
Die Anzeige der Bilder erfolgt auch in der "Originalgröße" (so wie hochgeladen) da man der Slimbox keine Anzeigengröße mitgeben kann, verwende ich bei der genannten Seite LightboxEx auch weil das eine Diashow ermöglicht...

Grüße Heiko

[Heiko H.]

Heiko!!!!!! Ich war schon kurz davor, mich aufzuhängen.

Neeeeeeeee!!!!!!!!!! Nich machen....
Aber der gute Knut hat dir ja schon zur Seite gestanden.

Kopf hoch , Heiko...

[Cipolla]

I know ist's not perfect, feel free to use it, change it to your needs, or what ever...

Ich nehme mir das jetzt mal zu Herzen, insbesondere das "..or what ever..."
Ein Kunde von mir wollte genau diese Textlinks mit Bilder + Lightbox haben. Also, Heikos RT eingebaut und gut ist...Denkste!
Kunde mault rum, viel zu kompliziert, will das nicht von Hand eingeben, muss immer die Bildnamen raussuchen etc.

Also hab ich mich mal rangesetzt und eine andere Lösung gestrickt und die sieht so aus:

HINWEIS VORAB: Dieser Hack verändert Systemdateien (Core), daher bitte alte Dateien sichern falls Ihr nicht wisst was Ihr tut
Attention: This hack changes system files (core), so please save original files!

Das Konzept:
Concept:

Damit das ganze funktioniert muss folgende Datei angepasst werden:
The following file has to be customized to make it work:

Code: Select all

/include/inc_ext/fckeditor/editor/dialog/fck_link/fck_link.js

Ab Zeile 300 findet Ihr die Link Attribute:
from line 300 you find the advanced link attributes:

Code: Select all

	// Get Advances Attributes
	GetE('txtAttId').value			= oLink.id ;
	GetE('txtAttName').value		= oLink.name ;
	GetE('cmbAttLangDir').value		= oLink.dir ;
	GetE('txtAttLangCode').value	= oLink.lang ;
	GetE('txtAttAccessKey').value	= oLink.accessKey ;
	GetE('txtAttTabIndex').value	= oLink.tabIndex <= 0 ? '' : oLink.tabIndex ;
	GetE('txtAttTitle').value		= oLink.title ;
	GetE('txtAttContentType').value	= oLink.type ;
	GetE('txtAttCharSet').value		= oLink.charset ;

Hier verändern wir den letzten Eintrag, oLink.charset ersetzen mit oLink.rel
change the last entry "oLink.charset" to "oLink.rel"

Code: Select all

	GetE('txtAttCharSet').value		= oLink.rel ;

Dann weiter unten ab Zeile 595:
beneath from line 595:

Code: Select all

		// Advances Attributes
		SetAttribute( oLink, 'name'		, GetE('txtAttName').value ) ;
		SetAttribute( oLink, 'dir'		, GetE('cmbAttLangDir').value ) ;
		SetAttribute( oLink, 'lang'		, GetE('txtAttLangCode').value ) ;
		SetAttribute( oLink, 'accesskey', GetE('txtAttAccessKey').value ) ;
		SetAttribute( oLink, 'tabindex'	, ( GetE('txtAttTabIndex').value > 0 ? GetE('txtAttTabIndex').value : null ) ) ;
		SetAttribute( oLink, 'title'	, GetE('txtAttTitle').value ) ;
		SetAttribute( oLink, 'type'		, GetE('txtAttContentType').value ) ;
		SetAttribute( oLink, 'charset'	, GetE('txtAttCharSet').value ) ;

Hier 'charset' ebenfalls durch 'rel' ersetzen.
also change "charset" to "rel"

Code: Select all

		SetAttribute( oLink, 'rel'	, GetE('txtAttCharSet').value ) ;

Ich habe "charset" gewählt, da das m.e. eh nie verwendet wird, zumindest habe ich das noch nie verwendet.
i select "charset" because i think this attribute isn´t used normaly

Es kann sein, dass ihr den browser cache löschen müsst damit die geänderte Datei neu geladen wird!
maybe you need to clear the browser cache so that the changed file will be reloaded by the browser!

Im FCK-Editor den Text markieren und auf Link klicken. Im folgenden Fenster ganz normal ein Bild als Ziel auswählen z.B. mittel Server durchsuchen:
Mark you text in FCK-Editor and klick the link-button. Choose a picture in the following window that you wish to display e.g. browse server...



In den Erweiterten Eigenschaften folgendes für die Lightbox eintragen:
In advanced link properties type in the following:



Die Bildunterschrift kommt in das Feld "Titel Beschriftung" und die Angabe das Lightbox verwendet werden soll kommt in das Feld "Ziel-Zeichensatz"
Put the image signature in the field "title caption" and the statement to use the lightbox in the fied "target charset"



Damit die Lightbox dann auch eingebunden wird habe ich mir freundlicherweise Heikos Code kopiert:
in order that the lightbox is embedded in the code i borrowed Heikos script:

Code: Select all

//Prüfung ob slimbox.css usw. schon vorhanden
   if (!isset ($GLOBALS['block']['custom_htmlhead']['lightbox.css']))
   {
    $GLOBALS['block']['custom_htmlhead']['lightbox.css']   = '  <link rel="stylesheet" href="'.TEMPLATE_PATH.'slimbox/css/slimbox.css" type="text/css" media="screen" />';
   }
   if (!isset ($GLOBALS['block']['custom_htmlhead']['mootools.js']))
   {
    $GLOBALS['block']['custom_htmlhead']['mootools.js']   = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
   }
   if (!isset ($GLOBALS['block']['custom_htmlhead']['slimbox.js']))
   {
    $GLOBALS['block']['custom_htmlhead']['slimbox.js']      = '  <script src="'.TEMPLATE_PATH.'slimbox/js/slimbox.js" type="text/javascript"></script>';
    }

Den packen wir in einen html CP. Das sieht dann in etwa so aus:
put this script in a html CP, your content could look like this:

1. CP html -> obiges Script [PHP]...Prüfung ob Lightbox vorhanden...[/PHP]
2. CP WYSISWG Text eingeben und dann mit den obigen parametern verlinken

1. CP html -> above script [PHP]...check for lightbox...[/PHP]
2. CP WYSISWG type your text and use the link button with the above parameters

Fertig!
Thats it!

Das funktioniert logischerweise auch mit Bildern, allerdings ist die Handhabung etwas anders als gewohnt:
you can use this methode also for pictures, but the handling is a little bit different:

Im Editor das Bild einfügen, den Link auf das Lightbox-Bild aber NICHT bei den Bild-Eigenschaften eingeben!
Jetzt das Bild markieren und den Link-Button aus dem Editor verwenden und dort wie beim Textlink verfahren.
Insert a picture that should open with lightbox effekt in your content e.g. WYSIWYG, but don´t use the link shown in the picture properties!
No mark your image and klick the link-button of the editor and input the text like you did for a textlink.

Getestet habe ich das ganze unter 1.3.5 also mit dem aktuellen FCKEditor. Hoffe ich hab es verständlich rübergebracht.
Testet with 1.3.5 actual FCKEditor. Hope all is understandable.
Please excuse my bad english!

[Heiko H.]

Hallo Cipolla,

nicht übel ...
Mein Ansinnen war halt, nicht extra Bilder hochzuladen (ob das einfacher ist?), sondern sie aus der Dateizentrale zu "nehmen".
ABER - customer is king!!!

Grüße Heiko...

[phalancs]

Danke,

der Part:

1. CP html -> obiges Script [PHP]...Prüfung ob Lightbox vorhanden...[/PHP]

war gerade genau das wa sich gebraucht habe Hat mir eine Menge Sucherei erspart!

[flip-flop]

Die Prüfung sollte automatisch passieren, Bedingung ist ein eindeutiger Name.

Code: Select all

   if (!isset ($GLOBALS['block']['custom_htmlhead']['lightbox.css']))
   {
    $GLOBALS['block']['custom_htmlhead']['lightbox.css']   = '  <link rel="stylesheet" href="'.TEMPLATE_PATH.'slimbox/css/slimbox.css" type="text/css" media="screen" />';
   }

Sollte so ausreichen:

Code: Select all

    $GLOBALS['block']['custom_htmlhead']['lightbox.css']   = '  <link rel="stylesheet" href="'.TEMPLATE_PATH.'slimbox/css/slimbox.css" type="text/css" media="screen" />';

Wenn in anderen Aufrufen auch ['custom_htmlhead']['lightbox.css'] verwendet wird.
(Allerdings weiß ich nicht ob du noch andere spezielle Dinge durch die Abfrage anstößt).

Knut