Scripts
Flickr Fotoalbum
Inleiding: Dit is een simpel fotoalbum dat gebruik maar van de foto service flickr. Daarmee heb je het gemak van de upload en beheer tools van flickr, maar kan je toch de bezoekers van je eigen website een fotoalbum aanbieden. Uitbreiden: Dit is een erg eenvoudige versie, je kan zelf uitbreiden door de class die gebaseerd is op deze code. Met de call methode van de class kan je ook andere flickr api methoden aanroepen. Gebruik: Om dit te kunnen gebruiken, moet je eerst je eigen flickr API key aanvragen, dat kan hier. De API Key kan je ingeven in flickr.inc.php op deze regel: Of je kan de API key via de consructor opgeven. Ook moet je, je userid aanpassen, dat gaat in photosets.php op deze regel: Lightbox: Dit script maakt gebruik van lightbox 2 en die zal je ook zelf nog moeten toevoegen, download kan hier (beschikbaar onder de Creative Commons Attribution 2.5 License). Downloaden: Je kan het script ook downloaden met lightbox al inbegrepen: download.
flickr-fotoalbum
================
flickr.inc.php
================
[code]<?php
/**
* Contact the Flickr photo API
*
* @author Boaz den Besten
* @version 1.1.15-4-2007
* @contact www.n3rd.nl
* @PHPversion: 5+
*/
class clsFlickr{
/**
* You API key
*
* @var String API key
*/
private $sAPIKey = '';
/**
* Method requests are handled by Flickr
*
* @var String format
*/
const FORMAT = 'php_serial';
/**
* Constructor
*
* @param String API Key (Optional)
*/
public function __construct($p_sAPIKey=null){
if(!is_null($p_sAPIKey)){
$this->sAPIKey = $p_sAPIKey;
}
}
/**
* Change the used API Key
*
* @param String API Key
*/
public function setAPIKey($p_sAPIKey){
$this->sAPIKey = $p_sAPIKey;
}
/**
* Call a Flickr API method
*
* @param String Method Name (example: flickr.people.getPublicPhotos)
* @param Array Method arguments
* @return Array Flickr response
*/
public function call($p_sFlickrApiMethod, $p_aArguments=array()){
$aReturn = null;
$aParams[] = 'api_key='.$this->sAPIKey;
$aParams[] = 'method='.$p_sFlickrApiMethod;
$aParams[] = 'format='.self::FORMAT;
foreach($p_aArguments as $sKey => $sValue){
$aParams[] = urlencode($sKey).'='.urlencode($sValue);
}
$sURL = "http://api.flickr.com/services/rest/?".implode('&', $aParams);
$sRsp = file_get_contents($sURL);
$aReturn = unserialize($sRsp);
// Als de request mislukt is:
if($aReturn['stat'] != 'ok'){
throw new Exception($aReturn['message'], $aReturn['code']);
}
// Als de request gelukt is:
return $aReturn;
}
}
?>[/code]
================
photosets.php
================
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Photosets</title>
<style type="text/css">
@import url('photos.css');
</style>
</head>
<body>
<?php
require_once 'flickr.inc.php';
$oFlickr = new clsFlickr();
$oRsp = $oFlickr->call('flickr.photosets.getList', array('user_id' => '7750512@N08'));
echo '<div id="photos">';
foreach($oRsp['photosets']['photoset'] as $aPhotoset){
$sThumb = 'http://farm'.$aPhotoset['farm'].'.static.flickr.com/'.$aPhotoset['server'].'/'.$aPhotoset['primary'].'_'.$aPhotoset['secret'].'_s.jpg';
echo '<div class="album">';
echo '<a href="photoset.php?id='.$aPhotoset['id'].'"><img alt="'.$aPhotoset['title']['_content'].'" title="'.$aPhotoset['title']['_content'].'" src="'.$sThumb.'"></a>';
echo '<small>'.$aPhotoset['title']['_content'].'</small>';
echo '<br><small>'.$aPhotoset['photos'].' Photos</small>';
echo '</div>';
}
echo '</div>';
?>
</body>
</html>[/code]
================
photoset.php
================
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Photoset</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
@import url('photos.css');
</style>
</head>
<body>
<?php
require_once 'flickr.inc.php';
$oFlickr = new clsFlickr();
$per_page = 20;
$page = !empty($_GET['page']) ? $_GET['page'] : 1;
$photoset_id = !empty($_GET['id']) ? $_GET['id'] : header('Location: photosets.php');
$oRsp = $oFlickr->call('flickr.photosets.getPhotos', array('photoset_id' => $photoset_id, 'page' => $page, 'per_page' => $per_page));
echo '<div id="photos">';
echo '<p class="back">< <a href="photosets.php">View all sets</a></p>';
foreach($oRsp['photoset']['photo'] as $aPhoto){
$sThumb = 'http://farm'.$aPhoto['farm'].'.static.flickr.com/'.$aPhoto['server'].'/'.$aPhoto['id'].'_'.$aPhoto['secret'].'_t.jpg';
$sBig = 'http://farm'.$aPhoto['farm'].'.static.flickr.com/'.$aPhoto['server'].'/'.$aPhoto['id'].'_'.$aPhoto['secret'].'.jpg';
echo '<a class="img" href="'.$sBig.'" rel="lightbox[myphotos]" title="'.$aPhoto['title'].'"><img alt="'.$aPhoto['title'].'" title="'.$aPhoto['title'].'" src="'.$sThumb.'"></a>';
}
if($oRsp['photoset']['pages'] > 1){
echo '<p class="pagenumbers"><span>Page:</span> ';
for($i=1;$i<=$oRsp['photoset']['pages'];$i++){
echo '<a href="?id='.$photoset_id.'&page='.$i.'" '.($i == $page ? 'class="active"' : '').'>'.$i.'</a>';
}
echo '</p>';
}
echo '</div>';
?>
</body>
</html>[/code]
================
photos.css
================
[code]div#photos *{
font-family: Verdana, sans-serif;
}
/**
* Single Set
*/
div#photos p.back{
font-size: 11px;
}
div#photos p.back a{
color: black;
}
div#photos a.img{
margin: 10px;
}
div#photos img{
border: 0;
}
div#photos p.pagenumbers span{
margin-top: 5px;
font-size: 12px;
float: left;
}
div#photos p.pagenumbers a{
display: block;
float: left;
text-align: center;
font-size: 12px;
margin: 3px;
padding: 3px 5px 3px 5px;
border: 1px solid black;
color: black;
}
div#photos p.pagenumbers a:hover, div#photos p.pagenumbers a.active{
border: 1px solid silver;
color: silver;
}
/**
* Sets Overview
*/
div#photos div.album{
margin:10px;
padding: 5px;
padding-bottom: 20px;
padding-top: 10px;
border: 1px solid silver;
border-bottom: 2px solid black;
border-left: 2px solid black;
width:95px;
text-align: center;
float: left;
}
div#photos div.album img{
border: 0;
}
div#photos div.album small{
font-size: 9px;
display: block;
}[/code]
Reacties
0