Screenshot-Gallerie mit Galleriffic

Montag, 22. Juni 2009

Hier ist eine kurze Anleitung, wie man aus einer Liste von URLs eine Galleriffic-Screenshotgallerie erstellt, wie es im Webbaukasten gemacht wurde. Das Verfahren funktioniert unter Linux, es muss python installiert sein, das bei den meisten Distributionen standardmäßig vorhanden ist. Die Erstellung der Gallerie erfolgt in zwei Schritten: (1) Automatisches Erstellen von Screenshots aus einer Liste von URLs und (2) Generierung der Gallerie aus den erstellten Screenshots.

Laden Sie zunächst folgende Python-Skripte herunter:

Zum Ausführen der Skripte benötigen sie außerdem die Klassenbibliothek PyQt.

1. Liste der URLs

Die Liste der URLs muss in einem Textdokument vorliegen, mit einem Zeilenumbruch nach jeder URL. Beispiel:

http://www.beratungsverbund.uni-erlangen.de
http://www.blogs.uni-erlangen.de
http://www.emf.eei.uni-erlangen.de
http://www.erzaehlen-nach-der-postmoderne.phil.uni-erlangen.de
http://www.ini.fau.de
http://www.jav.uni-erlangen.de
http://www.kowi.wiso.uni-erlangen.de
http://www.raa.phil.uni-erlangen.de
http://www.romanistik.phil.uni-erlangen.de
http://www.slavistik.phil.uni-erlangen.de
http://www.sport.uni-erlangen.de

Nennen Sie die Textdatei „urls.txt“ und speichern Sie diese im selben Ordner, in dem auch die Python-Skripte liegen.

2. Die Skripte anpassen und ausführen

Standardmäßig werden Screenshots der Seiten in der Auflösung 1024*768 gemacht und als png-Dateien abgespeichert. Die Auflösung der Screenshots können Sie in Zeile 5 der Datei script.py anpassen:

resolution = „1024 768“

Das Script wird mit folgendem Befehl ausgeführt:

python script.py

Nach der Ausführung sind alle Bilder als png-Dateien im selben Ordner abgespeichert.

3. Thumbnails erstellen

Legen Sie die Screenshots auf Ihrem Webauftritt in einen eigenen Ordner, z.B. /img/screenshots/large/. Kopieren Sie jeden Screenshot in den Ordner /img/screenshots/small/ und verkleinern Sie ihn auf 85*63 Pixel. Verkleinern Sie auch die Originaldateien im Ordner large auf 675*506 Pixel. Solche Stapelverarbeitung von Bildern ermöglicht zum Beispiel das Windows-Programm XnView oder ein ähnliches Linux-Programm.

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

/img/screenshots/small/output.6.www.jav.uni-erlangen.de.png 85*63 Pixel
/img/screenshots/large/output.6.www.jav.uni-erlangen.de.png 675*506 Pixel

4. Die Gallerie einsetzen

Laden Sie nun das jQuery-Plugin Galleriffic herunter:

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

Die Gallerie 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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.js"></script>

Kopieren Sie folgenden Quelltext an die Stelle im Dokument wo die Gallerie 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/screenshots/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/screenshots/large/".$files[$count]."\" title=\"".$title."\">
								<img src=\"/img/screenshots/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>

 <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:           '&lsaquo; Vorheriges Bild',
					nextLinkText:           'Nächstes Bild &rsaquo;',
					nextPageLinkText:       'Vor &rsaquo;',
					prevPageLinkText:       '&lsaquo; 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/small und /img/large gelegt haben, ändern Sie die entsprechenden Angaben im Quelltext.

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

Kategorie: Webbaukasten