Get images with Flickr API for your webpage
First : create a .js file (EX: JQflirck.js)
//Second : Put the bellow code
$(document).ready(function () {
buscarimagens();
setInterval("slideSwitch_info()", 3000);
imagens();
});
//images with animation
function buscarimagens() {
$.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",{
tags:
"dog",tagmode:
"any",format:
"json",},
function (dados, status) {$.each(dados.items,
function (i, item) {
$("<img/>").attr("src", item.media.m).appendTo("#flickr_img");
if (i == 4) return false;
});
// using animation
$('#flickr_img img:first').addClass('active'); //atribuir class:active a primeira imagem});
}
//simple images
function imagens() {
$.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",{
tags:
"cat",tagmode:
"any",format:
"json",},
function (dados, status) {
$.each(dados.items,
function (i, item)
{
$("<img/>").attr("src", item.media.m).appendTo("#imagens");
if (i == 10) return false; //Limitar o retorno de nr de items 0,1,...,10});
});
}
//JQuery animation function
function slideSwitch_info() {
var $active = $('#flickr_img IMG.active');
if ($active.length == 0) $active = $('#flickr_img IMG:last');
var $next = $active.next().length ? $active.next(): $(
'#flickr_img IMG:first');$active.addClass(
'last-active');$next.css({ opacity: 0.0 })
.addClass('active').animate({ opacity: 1.0 }, 1000,
function () {$active.removeClass('active last-active');
});
}
//Create a html page( or use in your web page)
<html ><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- FLICKR file function-->
<script type="text/javascript" src="jq/JQflirck.js"></script>
<!--end FLICKR -->
<style type="text/css" >
#page{ margin:0 auto; width:900px; height:600px;}
#flickr { float:left; position:relative;}
/* flickr_img Animation*/#flickr_img IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width: 400px;
height: 300px}#flickr_img IMG.active { z-index:10; opacity:1.0; }
#flickr_img IMG.last-active { z-index:9; }
/*END flickr_img Animation*/
#splt{float:right;width:450px;height:300px; padding-left:20px;}
#Fimg{ padding-top:20px; margin:20px; float:left; position :relative;}
</style>
<title>FlickrJQuery</title></
head>
<body >
<div id="page">
<div id="flickr">
<div id="flickr_img">
<!-- Div where the images will apear and animated with jquery--> </div>
</div>
<div id="splt">
<p>
On the left we have images from <br /><br />
Flickr API<br /><br />
animated with JQuery Function
</p>
<hr />
<p>
On bottom we have images from<br /><br />
Flickr API<br /><br />
Simple Way
</p>
</div>
<div id="Fimg">
<div id="imagens">
<!-- Div where the images will apear -->
</div> <!---->
</div>
</div>
</body></
html>
Demo2 - all the images came from flickr with API
Sem comentários:
Enviar um comentário