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 ...)
?