Pixelfans

jquery Plugin: besseres Sichtbarmachen von Sprungzielen

geschrieben von Pawel

Als Reaktion auf den Laborbericht von Thomas Casper im efa-Blog hat Dirk Ginader ein schönes Plugin entwickelt, welches bei “Duchtabben” die Sprungziele mittels gestrichelter Umrandung sichtbar macht.

Kategorie: JS | Permalink

Flickr mit PHP in eigener Website verwenden (Teil 1)

geschrieben von Pawel

Flickr braucht nicht näher erklärt zu werden. Die Site gehört wohl wie Google zu einer der bekanntesten im Web. Die Benutzerschnittstellen sind sehr intuitiv, selbst die geografische Platzierung eigener Bilder auf einer Yahookarte gelingt kinderleicht mit der Maus. Selbstverständlich stehen auch alle Exif-Daten zu Verfügung. Es liegt also nahe, nicht für jede Website eine eigene Galerie aufzubauen, wenn man die Funktionalität von Flickr nutzt.

Die Möglichkeit Javascript zu nutzen, wird von uns nicht in Betracht gezogen, da unserer Meinung nach die Grundfunktionalität einer Seite auch ohne Javascript erhalten bleiben muss.

Flickr hat seine API glänzend dokumentiert, die Unterstützung durch entsprechende Kits für PHP ist gar nicht so gross, wie man vermuten würde Im ersten Teil gehen wir auf phpflickr von Dan Coulder ein. Dan hatte zuletzt vor 11 Monaten gepostet. dass er noch am Leben ist. Er hat jetzt aber im letzten Monat seine Seite runderneuert und damit signalisiert, dass er die Klasse weiterentwickeln will. Bisher war die Klasse spärlich dokumentiert, was sich jetzt aber vielleicht verbessern wird.

Nach dem Download von der SourceForge-Seite fällt erst mal die Fülle an Ordnern und Dateien auf. Darum muss man sich nicht wirklich kümmern. dan hat ein Supersorglospaket unter Einbeziehung verschiedener PEAR-Klassen gepackt.

Am Besten man packt die gesamten Dateien in ein include-verzeichnis und bindet dann die phpFlickr.php in seine Seite ein.

Zusätzlich benötigt man nur noch den API-Key den man auf der Flickrseite kostenlos beantragen kann. Die Beispiele auf Dans Seite zeigen die Einbindung und Verwendung der Klasse.

Unser Beispiel geht ein bisschen darüber hinaus, da wir nicht nach der Thumbnailvorschau auf der Flickrseite landen wollen, sondern das Foto auf unserer Seite in größerer Auflösung zeigen möchten.

require_once(“includes/phpFlickr.php”);
$f = new phpFlickr(“APIKey”);

Die Klasse wird instanziert

$f->enableCache(“fs”, “cache”);

Das Verzeichnis cache muss beschreibbar sein. Cachen ist insgesamt ratsam, da der Dienst manchmal sehr beansprucht ist.

<echo”<p id=“\zoom\“>“;
$photos = $f->photos_search(array(“tags”=“pixelfans”, “per_page”=20));

Such doch mal alle Fotos, die mit pixelfans getagged sind…

foreach ((array)$photos[‘photo’] as $photo) {
$owner = $f->people_getInfo($photo['owner']);
if (!$owner['realname'])
$owner = $owner['username'];
else
$owner = $owner['realname'];

Wir wollen noch wissen, wer die Fotos gemacht hat. Man muss einen Nutzernamen haben, der Realname ist aber optional. Wir benutzen den Realnamen sofern vorhanden.

$in = array('ö','ü','ä','ß','"');
$out = array('ö','ü','ä','ß','');
$img = str_replace($in,$out , "$photo[title]");

Flickr erlaubt es deutsche Umlaute und Anführungszeichen zu verwenden, weswegen wir den Bildtitel ein wenig bereinigen.

echo"<a href=\"http://farm" . $photo['farm'] . ".static.flickr.com/" . $photo['server'] . "/" . 
$photo['id'] . "_" . $photo['secret'] . $sizes[$size] . ".jpg\" title=\"$img &copy; ".$owner." \">";
echo "<img class=\"flickr\" title=\"$img &copy; ".$owner." \" alt=\"$img\" ".
"src=\"" . $f->buildPhotoURL($photo, "small") . "\" />";
echo "</a>\n";
}
echo”</p>“;

Wir bauen den img-Tag zusammen, der jetzt bei einem Klick auf ein größeres Bild auf unserer Seite verweist. Wir empfehlen in diesem Zusammenhang auf Lightbox oder Fancybox, um die größeren Bilder schick zu präsentieren. Diese verwendeen zwar auch Javascript, da man die größeren Bilder auch ohne Javascript zu sehen bekommt, ist die Verwendung hier angemessen. Bei der Verwendung von FancyBox muss nicht jedes Bild zusätzlich ein ref-Attribut erhalten.

Es reicht, wie in unserem Beispiel den Paragraph, der die Bilder klammert eindeutig zu bezeichnen.

//Activate FancyBox
$(“#content p#zoom a”).fancybox({'hideOnContentClick': true});

Für unser Beispiel reicht dann die o.g. Zeile aus, um für alle unsere Flickrbilder die FancyBox zu aktivieren.

Kategorie: PHP | Kommentare (0) | Permalink