Twitpic photo stream

Ne znam koliko vas koristi twitpic.com ali je jako dobra stvar. Deljenje slike preko tvitera (da, mora tviter nalog). Pa ako koristite pomenute servise i zelite stream slika sa twitpic-a evo, uz minimalno PHP kodiranje :)

HTML blok

Pre svega HTML, prvi deo je poprilicno klasican, "uvlacenje" jQuery fajlova, prvij je jQ, ostala tri linka je ustvari plugin pisan od strane Mike Alsup, i na kraju malo CSS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<style type="text/css">
	#slideshow { height: 182px; width: 182px;}
	#slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; cursor: pointer;}
	.nav {width: 182px;}
	.status {width: 140px; float: left;}
	#prev {width: 20px; float: left;}
	#next {width: 20px; float: right;}
</style>

Sledeci deo nema puno za objasnjavati, dva DIV-a, prvi #slideshow koji "drzi" slike, i drugi #nav koji sadrzi dve slike koje sluze za kontrolu prikaza, tu je i PHP foreach koja "izvrti" xml objekat koji je ranije pre svega pozvan.

<div id="slideshow" class="pics">
	<?php foreach($xml->channel->item as $path) { ?>
		<a title="<?php echo str_replace('miff78: ', '',$path->title);?>" href="<?php echo $path->link;?>">
			<img src="<?php echo findThumb($path->link);?>" alt="" width="150" height="150"/>
		</a>
	<?php } ?>
</div>
<div class="nav">
	<div id="prev"><img src="twp/prev1.png"/></div>
	<div class="status"></div>
	<div id="next"><img src="twp/next1.png"/></div>
</div>

JS blok

Ispod svega jQuery tj JS blok, ready funkcija koja poziva plugin cycle i pomocna funkcija onAfter ako zelite da se nesto dogadja posle prelistane slike :)

<script type="text/javascript">
    $(document).ready(function () {
		$('#slideshow').cycle({
			fx:     'scrollHorz', 
			prev:   '#prev', 
			next:   '#next', 
			timeout: 0
			//after: onAfter 
		});
		function onAfter() {
			$('.status').html(this.title);
		}
    });
</script>

PHP blok

PHP blok ima dve funkcije, prilicno jednostavno. Prva, ucita xml fajl za datog korisnika u jedan veliki niz, dok druga dodje kao pomagac i bavi se str_replace operacijom.

<?php
function getPic($uid){
		$url = 'http://twitpic.com/photos/'. $uid . '/feed.rss';
		$xml = simplexml_load_file($url) or die('Nisam uspeo da se ucitam fajl!');
		return($xml);
	}
	function findThumb($s) {
		$thumb = str_replace('http://twitpic.com', 'http://twitpic.com/show/thumb', $s);
		return($thumb);
	}
?>

Zadnju liniju koda koju ce te dodati je:

<?php $xml = getPic('miff78');?>

i ona ide u sam vrh dokumenta.

Source je ovde.

Ne zaboravite da mora SimpleXML, svuda gde pise miff78 zameniti sa zeljenim korisnickim imenom, takodje  na pojedinim hostovima mora da se doda php.ini u direktorijumu gde je skripta, ovaj red allow_url_fopen = on.