Lightbox-Fotogalerie | alternative Lösung
Posted: Thu Oct 04, 2007 8:00 pm
Hallo.
Ein Kunde wollte für seine Site eine Lightbox-Fotogalerie. Dummerweise gab es bereits etliche Galerien, die über das Album-Modul realisiert wurden. Ich brauchte also eine Lösung, die mir viel händische Arbeit abnimmt -- sonst hätte ich mehrere hundert Bilder folgendermassen einpflegen müssen:
Keine gute Idee.
Mein Workaround:
1. Lightbox installieren (gibt's hier: http://www.huddletogether.com/projects/lightbox2/)
2. Lightbox ins template einbinden
3. Bestehende Bilder werden per Photoshop-Batch folgendermassen umbenannt:
die Vollbilder = bildname_1.jpg
die Previews = bildname_thumb_1.jpg
Also folgende Konvention:
Bildname + "_" + laufende Nummer (startend bei 1) + ".jpg"
Bildname + "_thumb" + laufende Nummer (startend bei 1) + ".jpg" bei den Previews
Um mir die Arbeit des händischen Eingebens der Bildnamen zu ersparen erstellte ich die Funktion 'lightbox'.
(Text einfach kopieren, in Texteditor öffnen, speichern als "function.lightbox.php" und per FTP nach "plugins")
Jetzt war es ein Leichtes, die umbenannten Bilder per simplem Tag einzubinden:
BTW: wie das nachher aussieht, erfahrt ihr hier.
Ich hoffe, ich konnte irgendwem damit helfen.
(Eine Lösung für das Problem im Zusammenspiel der lightbox.js mit swfobjects.js beim kranken IE6 könnte ich auf Anfrage liefern ...)
Ein Kunde wollte für seine Site eine Lightbox-Fotogalerie. Dummerweise gab es bereits etliche Galerien, die über das Album-Modul realisiert wurden. Ich brauchte also eine Lösung, die mir viel händische Arbeit abnimmt -- sonst hätte ich mehrere hundert Bilder folgendermassen einpflegen müssen:
Keine gute Idee.
Mein Workaround:
1. Lightbox installieren (gibt's hier: http://www.huddletogether.com/projects/lightbox2/)
2. Lightbox ins template einbinden
Code: Select all
<__script__ type="text/javascript" src="pfad_zur_lightbox/js/prototype.js"></__script>
<__script__ type="text/javascript" src="pfad_zur_lightbox/js/scriptaculous.js?load=effects"></__script>
<__script__ type="text/javascript" src="pfad_zur_lightbox/js/lightbox.js"></__script>
<link rel="stylesheet" href="pfad_zur_lightbox/css/lightbox.css" type="text/css" media="screen" />
die Vollbilder = bildname_1.jpg
die Previews = bildname_thumb_1.jpg
Also folgende Konvention:
Bildname + "_" + laufende Nummer (startend bei 1) + ".jpg"
Bildname + "_thumb" + laufende Nummer (startend bei 1) + ".jpg" bei den Previews
Um mir die Arbeit des händischen Eingebens der Bildnamen zu ersparen erstellte ich die Funktion 'lightbox'.
Code: Select all
<?php
#CMS - CMS Made Simple
#(c)2004 by Ted Kulp (wishy@users.sf.net)
#This project's homepage is: http://cmsmadesimple.sf.net
#
#This program is free software; you can redistribute it and/or modify
#it under the terms of the GNU General Public License as published by
#the Free Software Foundation; either version 2 of the License, or
#(at your option) any later version.
#
#This program is distributed in the hope that it will be useful,
#but WITHOUT ANY WARRANTY; without even the implied warranty of
#MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
#GNU General Public License for more details.
#You should have received a copy of the GNU General Public License
#along with this program; if not, write to the Free Software
#Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
function smarty_cms_function_lightbox($params, &$smarty)
{
global $gCms;
$output = '<div class="lightbox_gallery">'.chr(10);
if( !empty($params['image_name'] ) )
{
$index = 1;
$count = $params['end'] - $sparams['start'];
while( $index <= $count)
{
$output .= '<a href="uploads/images/lightbox/'.$params['image_name'].'_'.$index.'.jpg"'.' rel="lightbox[gallery]"'.' title="'.$params['caption'].'"><img alt="" src="uploads/images/lightbox/'.$params['image_name'].'_thumb_'.$index.'.jpg" /></a>'.chr(10);
$index++;
}
$output .='</div>';
} else {
$output = '<!-- oops, no images to display! -->';
}
return $output;
}
function smarty_cms_help_function_lightbox()
{
?>
<h3>What does this do?</h3>
<p{lightbox} automatically generates an Lightbox-Gallery. <br /> You just have to name your gallery-pictures like that:<br />image_1.jpg, image_2.jpg ... image_n.jpg / image_thumb_1.jpg, image_thumb_2.jpg ... image_thumb_n.jpg</p>
<h3>How to use it?</h3>
<p>Simply insert this plugin in your template or your content this way: <code>{lightbox image_name='name_of_picture' start='1' end='10' caption='This appears beneath the image'}</code></p>
<h3>What parameters does it take?</h3>
<ul>
<li><em>(required)</em> <tt>image_name</tt> - Name of the images; Name-convention: preview picture = 'picture_thumb_1.jpg' | full picture = 'picture_1.jpg' | The pictures have to be in the directory 'uploads/images/lightbox!</li>
<li><em>(required)</em> <tt>start</tt> - Number of the first picture (should be: 1)</li>
<li><em>(required)</em> <tt>end</tt> - Number of the last gallery-picture (i.e. 20)</li>
<li><em>(required)</em> <tt>caption</tt> - Image/Gallery-description</li>
</ul>
<?php
}
function smarty_cms_about_function_lightbox()
{
?>
<p>Author: hoppengarten•com</p>
<p>Version 1.0</p>
<?php
}
?>
Jetzt war es ein Leichtes, die umbenannten Bilder per simplem Tag einzubinden:
Code: Select all
{lightbox image_name='bildnamensrumpf' start='1' end='25' caption='Eine superdufte Lightbox-galerie'}
Ich hoffe, ich konnte irgendwem damit helfen.
(Eine Lösung für das Problem im Zusammenspiel der lightbox.js mit swfobjects.js beim kranken IE6 könnte ich auf Anfrage liefern ...)
