Yannis Kolovos: Load example with images

    
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Getting pictures!</title>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'helvetica neue', arial, helvetica;
}

a img {
  border: 0;
}

img {
/*  border: 5px solid #000;*/
/*  margin: 10px;*/
}

ul {
  width: 315px;
  height: 100%;
  overflow-y: auto;
  white-space: nowrap;
  list-style: none;
}

li {
  display: block;
  float: left;
  height: 75px;
  cursor: pointer;
}

#loadingStatus {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  padding: 5px 10px;
  background: #c00;
  color: #fff;
}

#main {
  position: fixed;
  left: 360px;
  top: 50px;
}

#main div {
  border: 10px solid #000;
  height: 400px;
  width: 400px;
  font-family: georgia;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: rgba(0,0,0,.3);
  font-size: 38px;
  text-align: center;
  line-height: 400px;
}

#main img {
  border: 10px solid #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
}

#next { margin: 20px; }

/* via https://github.com/ubuwaits/css3-buttons */
button.cupid-blue {
  background: #d7e5f5;
  background: -moz-linear-gradient(top, #d7e5f5 0%, #cbe0f5 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7e5f5), to(#cbe0f5));
  border-top: 1px solid #abbbcc;
  border-left: 1px solid #a7b6c7;
  border-bottom: 1px solid #a1afbf;
  border-right: 1px solid #a7b6c7;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: inset 0 1px 0 0 #fff;
  -webkit-box-shadow: inset 0 1px 0 0 #fff;
  box-shadow: inset 0 1px 0 0 #fff;
  color: #1a3e66;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  padding: 6px 0 7px 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  width: 150px;
}

button.cupid-blue:hover {
  background: #ccd9e8;
  background: -moz-linear-gradient(top, #ccd9e8 0%, #c1d4e8 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccd9e8), to(#c1d4e8));
  border-top: 1px solid #a1afbf;
  border-left: 1px solid #9caaba;
  border-bottom: 1px solid #96a3b3;
  border-right: 1px solid #9caaba;
  -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
  -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
  box-shadow: inset 0 1px 0 0 #f2f2f2;
  color: #163659;
  cursor: pointer;
}

button.cupid-blue:active {
  border: 1px solid #8c98a7;
  -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
  box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee;
}


</style>
</head>
<body>
<div id="loadingStatus">Loading</div>
<p><button id="next" class="cupid-blue">Next group</button></p>
<ul id="pictures">
  <li><img src="http://farm5.static.flickr.com/4132/5176187907_25d26f48f0_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4133/5176793736_d071069871_s.jpg"></li>

<li><img src="http://farm5.static.flickr.com/4148/5176790372_c5a6a3cc7a_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4103/5176188725_397e641c7f_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4110/5176791934_bb21e4b523_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4130/5176184917_92e4b89148_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4083/5176794362_c7543d2e29_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4128/5176189635_4030795e8d_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4129/5176789954_4f4e5edd2f_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4132/5176187515_27853af67d_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4128/5176792872_c146b28478_s.jpg"></li>

<li><img src="http://farm5.static.flickr.com/4107/5176790750_8c1471a753_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4110/5176789130_0d876b8489_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4132/5176788284_a98e4e92a0_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4147/5176789562_ed5e339f57_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4145/5176786398_d8fef3b0e1_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4147/5176181843_8c58178ea9_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4106/5176184049_bc11cbb7a9_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4126/5176767160_27d7c6346b_s.jpg"></li>
  <li><img src="http://farm5.static.flickr.com/4107/5176784060_3a55131a91_s.jpg"></li>

</ul>
<div id="main">
  <div>Click on a picture</div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
var flickrURL = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&page=%page%&per_page=20&api_key=18702ea1538bc199e2c7e1d57270cd37&user_id=38257258%40N00&tags=fullfrontalconf&format=json&jsoncallback=?';

var $pictures = $('#pictures'),
    $main = $('#main'),
    $next = $('#next'),
    html = [],
    page = 1;

// $pictures.find('img').click(function () {
$pictures.delegate('img', 'click', function () {
  $('#loadingStatus').fadeIn();
  var src = this.src.replace(/_s/, '');
  $('<img>').attr('src', src).load(function () {
    $main.empty().append(this);
    $('#loadingStatus').stop(true, true).fadeOut();
  });
});

function getPage(page) {
  $.getJSON(flickrURL.replace(/%page%/, page), function (data) {
    html = [];
    $.each(data.photos.photo, function (i, photo) {
      html.push('<li><img src="http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_s.jpg" /></li>');
    });

    $pictures.empty().append(html.join(''));
    $('#loadingStatus').hide();  
  });
}

$next.click(function () {
  getPage(++page);
});

</script>
</body>
</html>
Yannis Kolovos

Sunday 20 November 2011

Load example with images

No comments:

Post a Comment

Dev notes
