Loader for Images

[drhtm]

I created a new way to add a loader gif in the background while your huge jpg image is loading. 

Just one file to edit.
templates/{your template}/media/jpg.html
Just replace the orginal with the following:

Code: [Select]

<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="{template_url}/images/newloader1.gif">
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td align="center" valign="middle" background="{media_src}">
<img src="{template_url}/images/spacer.gif" border="0" alt="{image_name}"{width_height}>
</td>
</tr>
</table>
</td>
  </tr>
</table>

copy the following images to your templates/{your template}/images folder
newloader.gif is the animated version
newloader1.gif is the non-animated version
loading.png is the editable version.

enjoy!

[zaisk]

How to make preloader for swf files ???? Please help

[Acidgod]

Please do not make Crossposting, this is a Image Preloader and this not works with *.swf...

When you need a *.swf Preloader you must make it with Flash...

Search google for a Flash Preloader Tutoria or try to search a Flash Usegroup and aks there for help... (o:

[V@no]

That's where I saw this code!

Just a little correction to the original post:
You can simply specify coordinates where the background image should be showed, that way you dont need have it be so huge as it is now.

[bibabobu]

@ v@no

 :oops:sorry i am not good in coding.
How do you mean "simply specify coordinates" :

Could you please give me an example of a HTML CODE part for position my own small loader in the middle of my gallery window.

[V@no]

http://www.w3schools.com/css/pr_background-position.asp

[bibabobu]

Sorry,sorry. I think i am too stupid.
Do I have to define a css class?
I can't get it.
I have two differnet sizes of my images. One sort is 600x400 and the second sort is 400x600.
So i want to have the image loader always in the middle of my image table.
Will this work with CSS?

[V@no]

OK.

replace

Code: [Select]

<td background="{template_url}/images/newloader1.gif"> with:

Code: [Select]

<td style="background: url({template_url}/images/newloader1.gif) no-repeat; background-position: center center">

[impss]

Veno,

I just tried that, and it did not work

[JensF]

Test this

<td style="background-image:url({template_url}/images/newloader1.gif); background-position: center center; background-repeat: no-repeat;">

[bibabobu]

@ v@no

Thank you very much for your great explanation. Now everything is working superb 

[V@no]

@JensF:
I think your method is the correct one, cause when used background:  type as in what I posted, there must be 3/4 parameters, not two.
http://www.w3schools.com/css/css_background.asp

Code: [Select]

<td style="background: url({template_url}/images/newloader1.gif) no-repeat center center;">

[impss]

can u think of any reason either jensFs or venos version wil work for me?

only one the works so far for me is drhtm's

 

[|Rene|]

In my Galery it don't works too. Don't know why, tested all Versions of code mentioned above but newloader.gif isn't shown 

[V@no]

You do something wrong.