Skip to content

Instantly share code, notes, and snippets.

@mikhailov

mikhailov/gist:115918

Created May 22, 2009 03:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikhailov/115918 to your computer and use it in GitHub Desktop.
Save mikhailov/115918 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery beatiful code examples by RailsGeek.com
Raw
gistfile1.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {
position:relative;
}
#images div {
float:left;
width:100px;
height:100px;
}
div.button{
clear:both;
margin:10px;
padding:10px;
border:1px solid gray;
cursor:pointer;
width:100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flickr_load").click(function(){
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=34427469792@N01&lang=en-us&format=json&jsoncallback=?", function(data){
var j = 0;
var h = "";
$.each(data.items, function(i,p){
if (j < 10) {
var pic = (p.media.m).replace("_m.jpg", "_s.jpg");
h += '<img src="' + pic + '" alt="' + p.title + '" title="' + p.title + '"/>';
}
j++;
});
$("#flickr_load").hide();
$("#pics_hide, #pics_show, #pics_move, #pics_reorder, #pics_anim").show();
$('#images').append(h);
$('#images').children().wrap(document.createElement("div"));
});
});
$("#pics_hide").click(function(){
$("#images div:first-child").animate({opacity: "0.1"}, 300, function(){
$(this).next().animate({opacity: "0.1"}, arguments.callee);
return false
});
});
$("#pics_show").click(function(){
$("#images div:last-child").animate({opacity: "1.0"}, 300, function(){
$(this).prev().animate({opacity:"1.0"}, arguments.callee);
return false
});
});
$("#pics_move").hover(
function(){
$("#images div:even").hide("slow")
},
function(){
$("#images div:even").show("slow")
});
$("#pics_reorder").click(function(){
$("#images div:last-child").insertBefore($("#images div:first-child"));
$("#images div:even").animate({opacity: "0.4"}, 300);
$("#images div:odd").animate({opacity: "1.0"}, 300);
});
$("#pics_anim").click(function(){
$("#images div:odd").animate({top: '-=20px'}, 300);
$("#images div:even").animate({top: '+=20px'}, 300);
});
});
</script>
<body>
<div id="flickr_load" class="button">Get some photos from Flickr!</div>
<div id='pics_show' style="display:none;" class="button">unhide</div>
<div id='pics_hide' style="display:none;" class="button">hide</div>
<div id='pics_reorder' style="display:none;" class="button">reorder</div>
<div id='pics_anim' style="display:none;" class="button">anim</div>
<div id='pics_move' style="display:none;" class="button">move</div>
<div id="images"/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment