SHOW:
|
|
- or go back to the newest paste.
| 1 | <!DOCTYPE html> | |
| 2 | ||
| 3 | <!-- HTML5 Mobile Boilerplate --> | |
| 4 | <!--[if IEMobile 7]><html class="no-js iem7"><![endif]--> | |
| 5 | <!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]--> | |
| 6 | ||
| 7 | <!-- HTML5 Boilerplate --> | |
| 8 | <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
| 9 | <!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> | |
| 10 | <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> | |
| 11 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> | |
| 12 | <head> | |
| 13 | ||
| 14 | <meta charset="utf-8"> | |
| 15 | <link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" /> | |
| 16 | <meta property="og:image" content="http://esmes.fi/flowfestival/instaflow/instaflow.jpg"/> | |
| 17 | <meta property="og:title" content="instaflow - Flow Festival as seen on Instagram"/> | |
| 18 | <meta property="og:description" content="Flow Festival is a music and arts festival in Helsinki, Finland. Instagram is a free photo-sharing program."/> | |
| 19 | <title>instaflow - Flow Festival as seen on Instagram</title> | |
| 20 | <meta name="description" content="Flow Festival is a music and arts festival in Helsinki, Finland. Instagram is a free photo-sharing program."> | |
| 21 | <meta name="author" content="Esmes Digital"> | |
| 22 | <meta name="HandheldFriendly" content="True"> | |
| 23 | <meta name="MobileOptimized" content="320"> | |
| 24 | <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0"> | |
| 25 | <link rel="stylesheet" href="css/base.css" media="screen"> | |
| 26 | <link rel="stylesheet" href="css/layout.css" media="screen"> | |
| 27 | <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css"> | |
| 28 | <link rel="stylesheet" href="css/instaflow.css" type="text/css"> | |
| 29 | <script src="js/modernizr.js"></script> | |
| 30 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| 31 | <script>window.jQuery || document.write('<script src="js/jquery-1.8.2.min.js"><\/script>')</script>
| |
| 32 | <script src="js/jquery.instagram.js"></script> | |
| 33 | <script type='text/javascript' src='js/jquery.fancybox-1.3.4.pack.js'></script> | |
| 34 | <script type="text/javascript"> | |
| 35 | $(document).ready(function(){
| |
| 36 | $('a.group').live('mouseenter', function(){
| |
| 37 | $(this).fancybox({
| |
| 38 | 'nextEffect' : 'fade', | |
| 39 | 'prevEffect' : 'fade', | |
| 40 | 'overlayOpacity' : 0.8, | |
| 41 | 'overlayColor' : '#000000', | |
| 42 | 'arrows' : false, | |
| 43 | 'titlePosition': 'inside', | |
| 44 | 'titleFromAlt' : true , | |
| 45 | }); | |
| 46 | }); | |
| 47 | }); | |
| 48 | $(function(){
| |
| 49 | ||
| 50 | var | |
| 51 | insta_container = $(".instagram")
| |
| 52 | , insta_next_url | |
| 53 | ||
| 54 | insta_container.instagram({
| |
| 55 | hash: 'flowfestival' | |
| 56 | , clientId : '0a15d0cfc6bd49f480b527e6a27f9d40' | |
| 57 | ,onLoad : function() {
| |
| 58 | $('#button').text('Loading...');
| |
| 59 | } | |
| 60 | , onComplete : function (photos, data) {
| |
| 61 | $('#button').text('Load more');
| |
| 62 | insta_next_url = data.pagination.next_url | |
| 63 | } | |
| 64 | ||
| 65 | }) | |
| 66 | ||
| 67 | $('button').on('click', function(){
| |
| 68 | var | |
| 69 | button = $(this) | |
| 70 | , text = button.text() | |
| 71 | if (button.text() != 'All items loaded') | |
| 72 | {
| |
| 73 | if (button.text() != 'Loading...'){
| |
| 74 | button.text('Loading...')
| |
| 75 | insta_container.instagram({
| |
| 76 | next_url : insta_next_url | |
| 77 | ||
| 78 | , onComplete : function(photos, data) {
| |
| 79 | insta_next_url = data.pagination.next_url | |
| 80 | if (insta_next_url == null ) | |
| 81 | {
| |
| 82 | button.text('All items loaded')
| |
| 83 | } | |
| 84 | else {
| |
| 85 | button.text(text) | |
| 86 | } | |
| 87 | } | |
| 88 | }) | |
| 89 | } | |
| 90 | } | |
| 91 | $("a.group").fancybox({
| |
| 92 | 'nextEffect' : 'fade', | |
| 93 | 'prevEffect' : 'fade', | |
| 94 | 'overlayOpacity' : 0.8, | |
| 95 | 'overlayColor' : '#000000', | |
| 96 | 'arrows' : false, | |
| 97 | 'titlePosition': 'inside', | |
| 98 | 'titleFromAlt' : true , | |
| 99 | }); | |
| 100 | }) | |
| 101 | }); | |
| 102 | ||
| 103 | ||
| 104 | </script> | |
| 105 | ||
| 106 | <meta http-equiv="cleartype" content="on"> | |
| 107 | <style> | |
| 108 | ||
| 109 | img | |
| 110 | {
| |
| 111 | border-style: none; | |
| 112 | } | |
| 113 | ||
| 114 | ||
| 115 | .thumbnail:hover { -webkit-filter: grayscale(100%); }
| |
| 116 | ||
| 117 | </style> | |
| 118 | </head> | |
| 119 | <body> | |
| 120 | <div class="container clearfix"> | |
| 121 | ||
| 122 | ||
| 123 | <div role="main" class="content clearfix"> | |
| 124 | <section class="row" role="content"> | |
| 125 | <div class="rslides_container"> | |
| 126 | <ul class="rslides" id="slider1"> | |
| 127 | <img src="instaflow-header.jpg" alt="" /> | |
| 128 | ||
| 129 | </ul> | |
| 130 | </div> | |
| 131 | <section class="gallery row instagram"></section> | |
| 132 | ||
| 133 | </section> | |
| 134 | ||
| 135 | </div> | |
| 136 | <div style="text-align: center; margin: 20px 0 20px 0;"> | |
| 137 | <button id="button" class="button orange">Load more</button> | |
| 138 | </div> | |
| 139 | ||
| 140 | ||
| 141 | <footer role="contentinfo" class="row"> | |
| 142 | <div style="width:100px;margin: 20px auto"> | |
| 143 | <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fesmes.fi%2Fflowfestival%2Finstaflow%2F&send=false&layout=button_count&width=250&show_faces=false&font&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> | |
| 144 | </div> | |
| 145 | ||
| 146 | </footer> | |
| 147 | </div> | |
| 148 | <script src="js/respond.js"></script> | |
| 149 | <script src="js/jquery.flexnav-min.js"></script> | |
| 150 | <script src="js/tabs.js"></script> | |
| 151 | <script src="js/responsiveslides.min.js"></script> | |
| 152 | <script src="js/responsive_dropdown.js"></script> | |
| 153 | <script src="js/responsive_slideshow.js"></script> | |
| 154 | <script src="js/plugins.js"></script> | |
| 155 | <script src="js/script.js"></script> | |
| 156 | <script src="js/helper.js"></script> | |
| 157 | ||
| 158 | ||
| 159 | <script type="text/javascript"> | |
| 160 | var _gaq = _gaq || []; | |
| 161 | _gaq.push(['_setAccount', 'UA-36963537-1']); | |
| 162 | _gaq.push(['_trackPageview']); | |
| 163 | ||
| 164 | (function() {
| |
| 165 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
| |
| 166 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
| |
| 167 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
| |
| 168 | })(); | |
| 169 | </script> | |
| 170 | </body> | |
| 171 | </html> |