only fullPage

by ivanchaer

HTML

<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<div id="fullpage">
  <div class="section">
    <img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>

CSS

.section {
  text-align: center
}

JavaScript

$(function() {
  $('img[data-src]').each(function(i, e) {
  	// cache element
  	original_img = $(e);
    // get position of original image
  	offset_left = original_img.offset().left;
    offset_top = original_img.offset().top;
    // get data-src of
    data_src = original_img.attr('data-src');
    // clone original image
    original_img.clone()
    .hide()
    // put it directly in the body, so it can be positioned
    .appendTo('body')
    // set the new src
    .attr('src', data_src)
    // place it over the original image
    .css({
    	"left": offset_left,
      "top": offset_top,
      "position": "absolute"
    })
    .fadeIn(function(){
    	original_img.attr('src', data_src);
      $(this).remove();
    });
  })
});