Page 1 of 2

Textlink to Image in Lightbox

Posted: Tue 19. Feb 2008, 21:52
by Heiko H.
I have made a small RT. Perhaps nobody needs him except me, but I have needed it for a project and I just want to share it.
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.

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+ext des files ermitteln
$sql = "SELECT f_hash, f_ext "."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];
$img_ext = $row[1];


//link zusammenstellen
$lightbox_link = "<a href=\"".PHPWCMS_FILES.$img_hash.".".$img_ext."\" 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']);
}
?>
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.
I know ist's not perfect, feel free to use it, change it to your needs, or what ever...

[EDIT]
I Changed the code now the original uploaded image is shown in Lightbox and you can add a caption-text.
CSS Class added .lightbox_link
[/EDIT]


Greets Heiko...

Re: Textlink to Image in Lightbox

Posted: Tue 19. Feb 2008, 22:06
by Cipolla
that´s really funny!

regarding this link (german) -> http://forum.phpwcms.org/viewtopic.php?f=16&t=16656
your rt hack needs only a small modification and the guy asking for slimbox in contenpart wysiwyg is happy.

good job, this is a usefull peace of work.

EDIT: sorry to fast...no need to change anything. just put img between rt and u have a picture link. i was a little bit confused because of the $link_text but it has no value in your code.

Re: Textlink to Image in Lightbox

Posted: Tue 19. Feb 2008, 22:09
by Heiko H.
I have answerd allready in this thread... :wink:

Re: Textlink to Image in Lightbox

Posted: Tue 19. Feb 2008, 22:12
by Cipolla
i see, i am always to slow... :wink:

Re: Textlink to Image in Lightbox

Posted: Tue 19. Feb 2008, 22:41
by Jensensen
thanks...
in addition...similar thread [german]

Lightbox anpassen (html in lightbox caption) [SOLVED]
http://forum.phpwcms.org/viewtopic.php?f=16&t=16603

Bildunterschrift - ein Wort andersfarbig?
http://forum.phpwcms.org/viewtopic.php?f=16&t=16199

Re: Textlink to Image in Lightbox

Posted: Fri 22. Feb 2008, 14:53
by godmd
Cool! Danke. Das hat wirklich gefehlt. (Ärgerlich nur noch die verschiedenen Bilderverzeichnisse, wenn man ein [IMAGE] als thumb reinsetzt ...)

Re: Textlink to Image in Lightbox

Posted: Fri 22. Feb 2008, 19:27
by Heiko H.
godmd wrote:Cool! Danke.
Danke :)
Wie gesagt, es ist nicht perfekt, es ist eher so hingebastelt, dass es für meine Ansprüche genügt...
http://www.kangaroo-stop.de/
godmd wrote:Ärgerlich nur noch die verschiedenen Bilderverzeichnisse, wenn man ein [IMAGE] als thumb reinsetzt ...
Warum nutzt Du dafür nicht den CP Bilder, Text mit Bild, etc. ...???

Heiko...

Re: Textlink to Image in Lightbox

Posted: Fri 22. Feb 2008, 23:05
by godmd
Heiko H. wrote:Warum nutzt Du dafür nicht den CP Bilder, Text mit Bild, etc. ...???
Weil der zwar eine Menge Möglichkeiten bietet, aber in diesem Fall brauch ich die ganz freie Positioniermöglichkeit für einzelne Bilder. Innerhalb von RTs kann man keine Inlinestyles anbringen, oder?

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 01:19
by Heiko H.
godmd wrote:Innerhalb von RTs kann man keine Inlinestyles anbringen, oder?
Was hast Du vor?
Wenn Du eine Klasse zum RT brauchst...
take that :wink:

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+ext des files ermitteln
$sql = "SELECT f_hash, f_ext "."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];
$img_ext = $row[1];


//link zusammenstellen
$lightbox_link = "<a href=".PHPWCMS_FILES.$img_hash.".".$img_ext." 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']);
}
?>
.lightbox_link {
was immer Du willst;
}

Gute Nacht...

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 01:38
by Jensensen
@Anka
mit dem CP images <div> hast du weitestgehende möglichkeiten, da du jeweils individuelle templates damit verbinden kannst.
innerhalb dieser kannst du nach belieben ID oder class um den output deiner bilder "wrappen" und brauchst dann nur noch deine CSS files anzupassen....
also prinzipiell:

HTML:
<div class="meine_bilders_2">
-- output -- class=xy [siehe *template*]
</div>

CSS:
.meine_bilders_2 .XY {float:left; padding:3px....}
.meine_bilders_3 .XYZ23 {float:right; margin-top:3px....}

andersrum gefragt: wie positionierst du denn [*bis*] jetzt bilder "ganz frei"...???



@Heiko H.
diese page dingens [wie heißen die noch? komme ich grad nich drauf] sind zwar immer irgend wie eindrucksvoll, aber mit --> open pop-up klappt's nicht...

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 01:51
by Heiko H.
Jensensen wrote:@Heiko H.
diese page dingens [wie heißen die noch? komme ich grad nich drauf] sind zwar immer irgend wie eindrucksvoll, aber mit --> open pop-up klappt's nicht...
Hääääääääääääääääääääääääää??????????????????????????
Sorry, wie war das? Sprechen Sie deutschlich und geben Sie sich transparent :!:

Soll heißen, ich kann Dir grad nicht folgen...


Heiko

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 01:52
by pepe
godmd wrote:...Weil der zwar eine Menge Möglichkeiten bietet, aber in diesem Fall brauch ich die ganz freie Positioniermöglichkeit für einzelne Bilder. Innerhalb von RTs kann man keine Inlinestyles anbringen, oder?
Du kannst - mit einem Trick - doch jeden ContentPart eines Artikels (oder meinst du wirklich RT) modifizieren, indem du jeweils ein CP-HTML davor und eins dahinter anordnest..

HTML : <div class="AnkasEigeneKlasse" style="... auch das noch...">
beliebiger CP an dieser Stelle einfügen
HTML: </div>

Jetzt kannst du den CP innerhalb der CSS-Datei beliebig (na ja, in weiten Grenzen) manipulieren (eigene Layer etc.) ....

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 09:01
by godmd
O je, hier fühlt man sich ja echt gut aufgehoben. Muss zu meiner Schande gestehen, dass ich bisher die feinen Unterschiede zwischen den einzelnen "normalen" CP (wysiwyg/html/text w/image/div images ...) nie wirklich ausprobiert hatte - Zeitfrage bzw. die der Prioritäten ...

Inzwischen habe ich Heikos Tipp befolgt (text w/image) und das geht eigentlich ganz gut.

Inline-styling hatte mich v.a. interessiert für [IMG], wenn man mal Bilder individuell formatieren/positionieren will, ohne für solche Einzelaktionen gleich neue KLassen anzulegen.

Ich sollte mir vielleicht doch mal ein reines Sandkasten wcms aufsetzen. :roll:

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 11:38
by pepe
Wie Anka, du hast noch keine "sandbox on your localhost" ???

Da mußt du ja alles "on the job" machen... das kostet Nerven, kann ich mir gut vorstellen!

Alle ContentParts mal auszuprobieren ist sehr interessant, denn die Unterschiede sind doch recht nützlich, wenn man sie kennt! Dann kann man im "Ernstfall" auch schnell mal eine Lösung "rüberkopieren" und hat dann Zeit gespart :wink:

Re: Textlink to Image in Lightbox

Posted: Sat 23. Feb 2008, 13:06
by Jensensen
Heiko H. wrote:
Jensensen wrote:@Heiko H.
diese page dingens [wie heißen die noch? komme ich grad nich drauf]...
Hääääääääääääääääääääääääää??????????????????????????
Sorry, wie war das? Sprechen Sie deutschlich und geben Sie sich transparent :!: ...
ä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....