watchmen/giphy-watch.html at master · Manewolf/watchmen · GitHub

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
<html>
	<head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

		<title>Giphy Watch!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.css"/>
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick-theme.min.css"/>


		<style>
			html,body{
				padding:0;
				margin:0;
				text-align:center;
              background:#ddd;

			}
			#query{

			}
			#gifs{
			  position:relative;
  height:100%;
  width:100%;
  margin-left:30px;

			}
			#search{
				margin:5px;
			}
			iframe{
				width:100%;
				height:100%;
			}
			h1{
				font-size:20px;
				font-family:helvetica,arial;
				padding:0;
				margin:5px;
			}
          .mask{
       position:absolute;
       top:0;
       bottom:0;
       right:0;
       left:0;
       opacity:0.6;
       filter:alpha(opacity=60);

              }
		</style>

	</head>
	<body>
		<h1>GIPHWATCH</h1>
		<form id="search_giphy">
			<input id="query"  value="banana" /><br/>
			<input type="submit" id="search"/>
		</form>
		<div id="gifs">
		</div>


      <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.js"></script>
		<script>
			$(document).ready(function(e){

				$("#search_giphy").submit(function(e){
					e.preventDefault();
					var rand = Math.floor(Math.random()*15);
					var q = encodeURIComponent($("#query").val());
					var xhr = $.get("http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=3&q="+q);
					xhr.done(function(data) {
                      $("#gifs").empty();
						$.each(data.data,function(i,obj){
							 //if(rand ==i){
								$("#gifs").append("<div><div class='mask'></div><iframe src="+obj.embed_url+"/></div>");
						});
						$('#gifs').slick();
						// initialize slick

					});
				})
			});
		</script>

	</body>
</html>0