4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: sathishIPL on December 23, 2011, 08:02:08 AM
-
Hi All,
This is my second MOD.
Hope i will contribute to 4images what am learning here.
DEMO::: http://satz.0fees.net/details.php?image_id=1 (http://satz.0fees.net/details.php?image_id=1)
Please follow the below steps
step 1 : open templates/your templates/header.tml and insert the below code after <head> section
<script src="./js/jquery.js" type="text/javascript"></script>
Step 1.1 : open templates/your templates/header.html and insert below code before </head> section
<script language="javascript" type="text/javascript">
// 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:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.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>
step 2: open templates\your templates\details.html and find {image}
replce with below code
<div id="loader" class="loading">
</div>
Step 3: open templates/your templates/style.css and add the below code at the end.
#loader {
display: block;
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
background-color:white;
}
#loader.loading {
background: url('images/spinner.gif') no-repeat center center;
}
upload the spinner.gif into templates/your templates/images
create a new folder called Js in your domain root and upload the jquery.js into the js folder.
Additionally you can create a loader gif image in http://www.ajaxload.info/
-
Good MOD,
Thanks!
-
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 (http://satz.0fees.net/details.php?image_id=1)