HöTöMöLö täynnä JavaScript-himmeleitä

<!DOCTYPE html>

<!-- HTML5 Mobile Boilerplate -->
<!--[if IEMobile 7]><html class="no-js iem7"><![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>

 <meta charset="utf-8">
 <link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" />
<meta property="og:image" content="http://esmes.fi/flowfestival/instaflow/instaflow.jpg"/>
<meta property="og:title" content="instaflow - Flow Festival as seen on Instagram"/>
<meta property="og:description" content="Flow Festival is a music and arts festival in Helsinki, Finland. Instagram is a free photo-sharing program."/>
<title>instaflow - Flow Festival as seen on Instagram</title>
 <meta name="description" content="Flow Festival is a music and arts festival in Helsinki, Finland. Instagram is a free photo-sharing program.">
 <meta name="author" content="Esmes Digital">
 <meta name="HandheldFriendly" content="True">
 <meta name="MobileOptimized" content="320">
 <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">
 <link rel="stylesheet" href="css/base.css" media="screen">
 <link rel="stylesheet" href="css/layout.css" media="screen">
 <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css">
<link rel="stylesheet" href="css/instaflow.css" type="text/css">
 <script src="js/modernizr.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/jquery-1.8.2.min.js"><\/script>')</script>
 <script src="js/jquery.instagram.js"></script>
<script type='text/javascript' src='js/jquery.fancybox-1.3.4.pack.js'></script>
 <script type="text/javascript">
        $(document).ready(function(){
            $('a.group').live('mouseenter', function(){
                $(this).fancybox({
                'nextEffect'    :   'fade',
                'prevEffect'    :   'fade',
                'overlayOpacity' :  0.8,
                'overlayColor' : '#000000',
                'arrows' : false,
                'titlePosition': 'inside',
                'titleFromAlt' :  true ,
            });
            });
        });
        $(function(){

  var
    insta_container = $(".instagram")
  , insta_next_url

  insta_container.instagram({
      hash: 'flowfestival'
    , clientId : '0a15d0cfc6bd49f480b527e6a27f9d40'
    ,onLoad : function() {
        $('#button').text('Loading...');
    }
    , onComplete : function (photos, data) {
        $('#button').text('Load more');
    insta_next_url = data.pagination.next_url
    }

  })

  $('button').on('click', function(){
    var
      button = $(this)
    , text = button.text()
    if (button.text() != 'All items loaded')
{
    if (button.text() != 'Loading...'){
      button.text('Loading...')
      insta_container.instagram({
          next_url : insta_next_url

        , onComplete : function(photos, data) {
          insta_next_url = data.pagination.next_url
          if (insta_next_url == null )
          {
              button.text('All items loaded')
            }
      else {
          button.text(text)
      }
        }
      })
    }
    }
     $("a.group").fancybox({
                'nextEffect'    :   'fade',
                'prevEffect'    :   'fade',
                'overlayOpacity' :  0.8,
                'overlayColor' : '#000000',
                'arrows' : false,
                'titlePosition': 'inside',
                'titleFromAlt' :  true ,
            });
  })
});


</script>

 <meta http-equiv="cleartype" content="on">
<style>

img
{
    border-style: none;
}


.thumbnail:hover { -webkit-filter: grayscale(100%);   }

</style>
</head>
<body>
  <div class="container clearfix">


    <div role="main" class="content clearfix">
      <section class="row" role="content">
        <div class="rslides_container">
          <ul class="rslides" id="slider1">
        <img src="instaflow-header.jpg" alt="" />

          </ul>
        </div>
        <section class="gallery row instagram"></section>

      </section>

    </div>
        <div style="text-align: center; margin: 20px 0 20px 0;">
<button id="button" class="button orange">Load more</button>
</div>


      <footer role="contentinfo" class="row">
        <div style="width:100px;margin: 20px auto">
              <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fesmes.fi%2Fflowfestival%2Finstaflow%2F&amp;send=false&amp;layout=button_count&amp;width=250&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
        </div>

      </footer>
  </div>
  <script src="js/respond.js"></script>
  <script src="js/jquery.flexnav-min.js"></script>
  <script src="js/tabs.js"></script>
  <script src="js/responsiveslides.min.js"></script>
  <script src="js/responsive_dropdown.js"></script>
  <script src="js/responsive_slideshow.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <script src="js/helper.js"></script>


  <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-36963537-1']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</body>
</html>