Author Topic: !![MOD]Image preloader with loading animation!!  (Read 5971 times)

0 Members and 1 Guest are viewing this topic.

Offline sathishIPL

  • Jr. Member
  • **
  • Posts: 54
    • View Profile
!![MOD]Image preloader with loading animation!!
« 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


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 {
               
displayblock;
	
	
	
padding:8px;
	
	
	
border:solid;
	
	
	
border-color#dddddd #aaaaaa #aaaaaa #dddddd;
	
	
	
border-width1px 2px 2px 1px;
	
	
	
background-color:white;

        }

        
#loader.loading {
            
backgroundurl('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/





Offline MrAndrew

  • Sr. Member
  • ****
  • Posts: 302
    • View Profile
    • Aviation PhotoBase
Re: !![MOD]Image preloader with loading animation!!
« Reply #1 on: December 23, 2011, 09:05:04 PM »
Good MOD,

Thanks!

Offline sathishIPL

  • Jr. Member
  • **
  • Posts: 54
    • View Profile
Re: !![MOD]Image preloader with loading animation!!
« Reply #2 on: December 26, 2011, 08:58:55 AM »
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 {
            
backgroundurl('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
« Last Edit: December 26, 2011, 10:57:57 AM by sathishIPL »