mikhailov (owner)

Revisions

  • 96640a Thu May 21 21:00:22 -0700 2009
  • 227c34 Thu May 21 20:55:18 -0700 2009
gist: 115918 Download_button fork
public
Description:
jQuery beatiful code examples by RailsGeek.com
Public Clone URL: git://gist.github.com/115918.git
Embed All Files: show embed
JavaScript #
raw 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

<!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>