Page 1 of 2

Lightbox-Fotogalerie | alternative Lösung

Posted: Thu Oct 04, 2007 8:00 pm
by babulski
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

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" />
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'.

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
}

?>
(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:

Code: Select all

{lightbox image_name='bildnamensrumpf' start='1' end='25' caption='Eine superdufte Lightbox-galerie'}
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 ...)  ;)

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Fri Oct 05, 2007 12:08 pm
by babulski
Danke für die Blumen bzgl. der Derbi-Site. War ein gutes Stück harter Arbeit.
Dabei stiess ich auch auf das Problem mit der Inkompatibilität der Lightbox.js mit der SWFobjects.js.

Wenn du beide gemeinsam benutzt, crasht es dir sowohl IE7 als auch IE6.

Um lange Webrecherchen zu ersparen, hier die Lösung(en).

IE7/IE6
das Einbinden des Flash-Movies per

Code: Select all

<__script__ defer="defer" type="text/javascript">
"Defer" sorgt dafür, dass das script erstmal vollständig geladen wird und nicht direkt ins DOM schreibt.

IE6:
zusätzlich zum Obigen benötigt man ein weiteres JS, das IE dazu bringt mit mootools/scriptacolous zusammenzuarbeiten (das script-handling vom IE6 ist etwas ... äh, anders als gewohnt). Die angehängte Datei 'ie7-standard-p.txt (bitte umbenennen in ***.js!) bringt IE6 dazu, sich im DOM so zu verhalten, wie IE7.

Soviel aus dem Nähkästchen ...  :D

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Fri Oct 05, 2007 12:40 pm
by babulski
Probier erst mal aus, ob die Lightbox richtig funktioniert ;-)

Das machst du, indem du folgendes im Browser eingibst: http://pfad_zur_lightbox/index.html

Sollte es funktionieren, dann weiter mit:

1. Unter "Erweiterungen/Tags" schauen, ob die Funktion lightbox vorhanden ist ;-)

2. Bilder generieren
Format: Vollbild = vollbild_1.jpg, vollbild_2.jpg ... vollbild_n.jpg
Format: Preview = vollbild_thumb_1.jpg, vollbild_thumb_2.jpg ... vollbild_thumb_n.jpg

3. Bilder hochladen nach -> uploads/images/lightbox (Verzeichnis 'lightbox' natürlich erstellen, wenn noch nicht existent)

4. Neuen Content erstellen

5. Im Content folgendes eingeben:
{lightbox image_name='namens-rumpf-des-bildes(bespiel von oben: "vollbild")' start="1" end='(anzahl deiner galeriebilder)' caption='Bildunterschrift'}

EDIT: Mir ist im Eingangspost ein kleiner Fehler unterlaufen - die Funktion muss natürlich im Verzeichnis "plugins" stehen -- nicht in "lib". Sorry.

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Fri Oct 05, 2007 12:43 pm
by RonnyK
Vielleicht ein dumme Frage, wieso nicht den "Lightbox"-template von Album nutzen. Ich hab nicht alles verstanden (bin kein Deutscher), aber Album hat auch ein Lightbox template drin. Dann kan man doch auch die Albums an Ligtbox-template hangen die Lightbox sein sollen.

Ronny

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Fri Oct 05, 2007 1:01 pm
by babulski
RonnyK wrote: Vielleicht ein dumme Frage, wieso nicht den "Lightbox"-template von Album nutzen. Ich hab nicht alles verstanden (bin kein Deutscher), aber Album hat auch ein Lightbox template drin. Dann kan man doch auch die Albums an Ligtbox-template hangen die Lightbox sein sollen.

Ronny
Möglicherweise GAR keine dumme Frage.
Ich benutze eine ältere Version der Album-Modules. Dass es in V.0.9.2 nun auch die Lightbox unterstützt, habe ich offenbar nicht realisiert  ;)
Werde ich mir bei Gelegenheit genauer anschauen.

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Mon Oct 22, 2007 9:06 pm
by babulski
Hallo Lightstoner.

Eine erste, vage Vermutung nach Sichtung der Seite:
Kann es sein, dass die Bilder auf http://fm-chedit.ch/fm-2008/features/ GRÖSSER sind als bei den anderen Präsenzen?

Lightbox arbeitet ja folgendermassen: klickst du ein Bild an, werden gleichzeitig im Hintergrund die anderen Bilder mit dem gleichen rel="xyz“ geladen.
Dass es ruckelt liegt wahrscheinlich daran, dass das script im Hintergrund mal eben 1MB+ Bilddaten zieht.  ;)

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Mon Oct 22, 2007 9:06 pm
by wjhsmf
Hi,

Can someone here explain this in English? I am really interested in the Lightbox-Fotogalleries. Is this free?

Thanks.
Jimmy

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Tue Oct 23, 2007 6:24 am
by ericob
wjhsmf wrote: Hi,

Can someone here explain this in English? I am really interested in the Lightbox-Fotogalleries. Is this free?

Thanks.
Jimmy
If you submit this page url to one of the online translation services, you'll get back something that might at least give you a *hint* of the conversation.  :)

Re: Lightbox-Fotogalerie | alternative Lösung

Posted: Wed Nov 19, 2008 12:26 pm
by McPaul
;-(

*grrrr* tja, alles so gemacht wie beschrieben, nur wie so geht es bei mir nicht???

wenn ich das hier NICHT ins Template einbaue:






geht wenigstens das Foto in Groß auf, leider im selben Fester aber immer hin.

Wenn ich es in so Template einbaue:

{literal}




{/literal}

kommt ein Zeilenfehler und das Foto/Bild ist nicht mal klickbar?????

HIIILLLFEEEE ????

Ach so:
- ich habe den Download ausgeführt und der Pfad passt auch
- ich habe auch die function.lightbox.php so erstellt & auch per FTP an die stelle geladen
;-((