Textlink to Image in Lightbox

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Textlink to Image in Lightbox

Post 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...
Last edited by Heiko H. on Sat 6. Dec 2008, 10:08, edited 7 times in total.
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
Cipolla
Posts: 451
Joined: Sat 16. Feb 2008, 20:39
Location: Muppet Show

Re: Textlink to Image in Lightbox

Post 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.
Last edited by Cipolla on Tue 19. Feb 2008, 22:11, edited 1 time in total.
...
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Textlink to Image in Lightbox

Post by Heiko H. »

I have answerd allready in this thread... :wink:
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
Cipolla
Posts: 451
Joined: Sat 16. Feb 2008, 20:39
Location: Muppet Show

Re: Textlink to Image in Lightbox

Post by Cipolla »

i see, i am always to slow... :wink:
...
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: Textlink to Image in Lightbox

Post 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
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
godmd

Re: Textlink to Image in Lightbox

Post by godmd »

Cool! Danke. Das hat wirklich gefehlt. (Ärgerlich nur noch die verschiedenen Bilderverzeichnisse, wenn man ein [IMAGE] als thumb reinsetzt ...)
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Textlink to Image in Lightbox

Post 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...
Last edited by Heiko H. on Sat 23. Feb 2008, 00:04, edited 1 time in total.
Not longer here - sorry...

Haubner-IT GbR Dresden
godmd

Re: Textlink to Image in Lightbox

Post 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?
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Textlink to Image in Lightbox

Post 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...
Last edited by Heiko H. on Fri 21. Mar 2008, 00:17, edited 1 time in total.
Not longer here - sorry...

Haubner-IT GbR Dresden
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: Textlink to Image in Lightbox

Post 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...
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: Textlink to Image in Lightbox

Post 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
Not longer here - sorry...

Haubner-IT GbR Dresden
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Textlink to Image in Lightbox

Post 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.) ....
godmd

Re: Textlink to Image in Lightbox

Post 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:
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Textlink to Image in Lightbox

Post 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:
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: Textlink to Image in Lightbox

Post 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....
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
Post Reply