Inhalt

1. Einleitung

Galleriffic ist eine JQuery-Fotogalerie, die von Externer Link: Trent Foley entwickelt wurde. Mit ihr können große Mengen von Bildern einfach in einer Galerie untergebracht werden. In der folgenden Beschreibung wird beschrieben, wie sich eine solche Galerie im eigenen Webauftritt unterbringen lässt. Hier kommt ein PHP-Skript zur automatischen Auslesung aller Bilddateien zum Einsatz.

2. Die benötigten Dateien

Laden Sie zuerst die beiden Galleriffic-Dateien herunter:

Kopieren Sie beide Dateien in den CSS-Ordner bzw. JS-Ordner Ihres Webauftritts (/js und /css).

3. Die Bilddateien

Legen Sie die Bilder auf Ihrem Webauftritt in einen eigenen Ordner, z.B. /img/gallerie/large/. Kopieren Sie jedes Bild in den Ordner /img/gallerie/small/ und verkleinern Sie es auf 85*63 Pixel. Verkleinern Sie auch die Originaldateien im Ordner large auf 675*506 Pixel. Eine solche Stapelverarbeitung von Bildern ermöglicht zum Beispiel das Windows-Programm Externer Link: XnView oder ein ähnliches Linux-Programm.

Sie sollten dann von jeder Seite eine kleine und eine große Version haben:

/img/gallerie/small/bild01.jpg 85*63 Pixel
/img/gallerie/large/bild01.jpg 675*506 Pixel

4. Die HTML-Seite

Die Galerie kann jetzt mit einem PHP-Skript generiert werden: Erstellen Sie eine neue php-Datei (z.B. gallerie.php) Sie muss folgende Zeilen innerhalb des <head>-Tags enthalten:

<link rel="stylesheet" href="/css/galleriffic.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Kopieren Sie folgenden Quelltext an die Stelle im Dokument, wo die Galerie erscheinen soll:

<div id="page">
			<div id="container">
       <!-- Start Advanced Gallery Html Containers -->

				<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div id="loading" class="loader"></div>
					<div id="slideshow" class="slideshow"></div>
					<div id="caption" class="embox"></div>
				</div>
				<div id="thumbs" class="navigation">
					<ul class="thumbs noscript">
                    
                    <?php
$path = $_SERVER['DOCUMENT_ROOT']."/img/gallerie/large/";

if($dir=opendir($path))
{
 while($file=readdir($dir))
 {
  if (!is_dir($file) && $file != "." && $file != "..")
  {
   $files[]=$file;
  }
 }
closedir($dir);
}

//print_r ($files);

  for($count = 0; $count < sizeof($files); $count++)
    {
	$wordparts = (explode(".",$files[$count]));
	unset($wordparts[sizeof($wordparts)-1]);
	unset($wordparts[0]);
	unset($wordparts[1]);
	$title = implode(".", $wordparts);
    echo "<li>

							<a class=\"thumb\" href=\"/img/gallerie/large/".$files[$count]."\" title=\"".$title."\">
								<img src=\"/img/gallerie/small/".$files[$count]."\" alt=\"".$title."\" />
							</a>
							<div class=\"caption\">
								
								<div class=\"image-title\">".$title."</div>

								<div class=\"image-desc\"><a href=\"http://".$title."\">Seite aufrufen</a></div>
							</div>
						</li>";
    }


?>   
                    
						

						
					</ul>
				</div>
				<!-- End Advanced Gallery Html Containers -->
			<div style="clear: both;"></div>
			</div>
</div>
	
  <!-- AB HIER KEIN TEXT MEHR --> 
       
        <script type="text/javascript">
			// We only want these styles applied when javascript is enabled
			$('div.navigation').css({'width' : '300px', 'float' : 'left'});
			$('div.content').css('display', 'block');

			// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.67;
			$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
				.hover(
					function () {
						$(this).not('.selected').fadeTo('fast', 1.0);
					}, 
					function () {
						$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
					}
				);

			$(document).ready(function() {
				// Initialize Advanced Galleriffic Gallery
				var galleryAdv = $('#gallery').galleriffic('#thumbs', {
					delay:                  3000,
					numThumbs:              12,
					preloadAhead:           10,
					enableTopPager:         true,
					enableBottomPager:      true,
					imageContainerSel:      '#slideshow',
					controlsContainerSel:   '#controls',
					captionContainerSel:    '#caption',
					loadingContainerSel:    '#loading',
					renderSSControls:       true,
					renderNavControls:      true,
					playLinkText:           'Starte Slideshow',
					pauseLinkText:          'Beende Slideshow',
					prevLinkText:           '‹ Vorheriges Bild',
					nextLinkText:           'Nächstes Bild ›',
					nextPageLinkText:       'Vor ›',
					prevPageLinkText:       '‹ Zurück',
					enableHistory:          true,
					autoStart:              false,
					onChange:               function(prevIndex, nextIndex) {
						$('#thumbs ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onTransitionOut:        function(callback) {
						$('#caption').fadeOut('fast');
						$('#slideshow').fadeOut('fast', callback);
					},
					onTransitionIn:         function() {
						$('#slideshow, #caption').fadeIn('fast');
					},
					onPageTransitionOut:    function(callback) {
						$('#thumbs ul.thumbs').fadeOut('fast', callback);
					},
					onPageTransitionIn:     function() {
						$('#thumbs ul.thumbs').fadeIn('fast');
					}
				});
			});
		</script>

Sollten Sie die Bilder nicht, wie oben beschrieben, in den Ordnern /img/gallerie/small und /img/gallerie/large gelegt haben, ändern Sie die entsprechenden Angaben im Quelltext.

Das Aussehen der Galerie kann in der CSS-Datei galleriffic.css angepasst werden.