Preluând din RSS-uri, plus jQuery


La jumătatea anului trecut am scris despre jQuery Tools. Este o bibliotecă neoficială pentru jQuery ce include o serie de efecte ce arată tare, tare, tare bine. Este o bibliotecă scrisă profesionist, întreţinută, aspectuoasă… Merită folosită. Vă invit să vedem cât de spectaculos putem transforma ceea ce am văzut în articolul anterior, Preluând din RSS-uri. Să zicem că într-un sit dorim să afişăm ultimele noutăţi dintr-un alt sit. Am văzut deja cum putem obţine lista noutăţilor, cu MagpieRSS. Vă invit să mergem mai departe, să facem să arate bine această listă!

imagine

Cât de bine? Păi vedeţi mai jos şi judecaţi singuri. E inserat ca iframe (deci cei ce ne citesc via RSS nu vor vedea). Daţi click pe Inainte. Sau fiind în iframe apăsaţi săgeată în sus sau săgeată în jos. Uau… Ce bine poate arăta aşa ceva integrat într-un sit (portofoliu)! Dacă vreţi să vedeţi exemplul în pagina lui, click aici.

Dar cât de greu este să facem aşa ceva? 45 de linii de cod în total (o adaptare a exemplului oficial de aici). Vedeţi mai jos. Nu am să mai explic partea cu MagpieRSS, tratată în articolul anterior. Am să vorbesc doar de trucul cu imaginea. Ca în articolul anterior, am eliminat tagurile din articolele din RSS şi le-am scurtat (primele 300 de caractere). Dar arată mai bine o imagine lângă. Pentru aceasta sunt liniile 26-29. Am folosit preg_match pentru a descoperi imaginile din articol (atenţie: eu intenţionat am limitat la JPG-uri, pentru că în articole mai apar „zâmbăreţi”, GIF-uri, şi nu am dorit să fie preluate ca imagine-thumbnail a articolului). Din CSS am făcut alinierea şi redimensionarea. Şi desigur am afişat o imagine doar dacă există (testul din linia 28). Atât. E atât de simplu! MagpieRSS şi jQuery (sau aici în particular jQuery Tools) fac casă bună împreună.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet2.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MagpieRSS + jQuery Tools</title>
<script src="jquery.tools.min.js"></script>
</head>
<body>
<div id="actions">
<a class="prevPage">&laquo; Inapoi</a>
<a class="nextPage">Inainte &raquo;</a>
</div>
<div class="scrollable vertical">
<div class="items">
<?php
define(‘MAGPIE_INPUT_ENCODING’, ‘UTF-8’);
define(‘MAGPIE_OUTPUT_ENCODING’, ‘UTF-8’);
require_once ‘magpierss/rss_fetch.inc’;
$rss = fetch_rss("http://www.cnet.ro/feed/");
foreach ($rss->items as $item ) {
echo "<div>"."\n";
$titlu = $item[title];
$link = $item[link];
$continut=strip_tags($item[content][encoded]);
$matches = array();
preg_match_all(‘!http://.+\.(?:jpe?g)!Ui’ , $item[content][encoded] , $matches);
if(sizeof($matches[0]))
echo "<img src=".$matches[0][0].">";
echo "<h1><a href=$link target=_blank>$titlu</a></h1><br>"."\n";
echo substr($continut,0,stripos($continut," ",300))."…"."\n";
echo "</div>"."\n";
}
?>
</div>
</div>
<script>
$(function() {
$("div.scrollable").scrollable({
vertical:true,
size: 3
}).mousewheel();
});
</script>
</body>[/HTML]


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *