Thanks Mr.Andrew.
Here is a another tweak for this mod.
display image or ads[google adsense] instead of spinner.gif.
go to templates/your templates/style.css and remove the below css
#loader.loading {
background: url('images/spinner.gif') no-repeat center center;
}
go to templates/your templates/details.html and find the code
<div id="loader" class="loading">
</div>replace with below code ..Here we are creating a div class loading and it will be removed after the image is loader
<div id="loader">
<div class="loading">
Place your HTML code here........
</div>
</div>and finally we will change our Jquery
and replace the original step 1.1 with below code
<script language="javascript" type="text/javascript">
// when the DOM is ready
// when the DOM is ready
$(function () {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function () {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('.loading').remove();
// remove the loading class (which contains HTML,i.e ads),
// then insert our image
$('#loader').append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function () {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr({
src:'{media_src}',
alt:'{image_name}',
title:'{image_name}'});
});
</script>DEMO again ::
http://satz.0fees.net/details.php?image_id=1