Loader for Images

[|Rene|]

This is my jpg.html

Code: [Select]

<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
   <td style="background: url({template_url}/images/newloader.gif) no-repeat center center;">
   <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>
The loader is only displayed if I use the line of code mentioned in the first post...

Code: [Select]

<td background="{template_url}/images/newloader.gif">
 instead of

 

Code: [Select]

<td style="background: url({template_url}/images/newloader.gif) no-repeat center center;">
...but then the image isn't centered in the middle. I hoped that its centered with your code Vano. Can you please help here?

[V@no]

its because you added both versions...[qcode]<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
   <td style="background: url({template_url}/images/newloader.gif) no-repeat center center;">
   <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>[/qcode]remove one of them.

[|Rene|]

Yes, but when I remove this line

Code: [Select]

<td align="center" valign="middle" background="{media_src}">
there are no pictures displayed anymore 

[V@no]

and have you tryed use style="background: url({template_url}/images/newloader.gif) no-repeat center center;" instead of background="{media_src}" ?

[|Rene|]

How do you mean this, can you please copy my code from above with the changes you think will work. I'm a little bit confuse at the moment.

[|Rene|]

Vano are you able to answer ? 

[V@no]

Sorry, I think it was too early for me...
try this code:

Code: [Select]

<div style="background: url({template_url}/images/loading3.gif) no-repeat center center;">
  <table border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
    <td align="center" valign="middle" background="{media_src}">
      <img src="{template_url}/images/spacer.gif" border="0" alt="{image_name}"{width_height}>
    </td>
  </table>
</div>

[Zyga]

hmmmm i have an idea 

what with stretch {thumbnail} as background 

[tdkpaul]

actually this would be a very nice idea
the Thumb is still loaded and very small
if it would be stretched in the details, before original image is loading, it has a nice blur effect (stretched=bad quality of low resolution)

and the bigger image will cover the stretched Thumb
for the visitor it has the effect, that the image seems to become better from low res. to high res.

[__G__]

i did this but it is comin on top of the jpg image u know why how can i fix this i really want this

[Darkness2001]

Hello,

greate think...

Greez Darkness 

[__G__]

i did this but it is comin on top of the jpg image u know why how can i fix this i really want this

can anyone tell me why its doing that pleasE ?

[KurtW]

Hi,

or you test this code. I use this in my page
a little bit different to v@nos

Code: [Select]

  <table border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" style="background: url({template_url}/images/loading3.gif) no-repeat center center;">
    <td align="center" valign="middle" background="{media_src}">
      <img src="{template_url}/images/spacer.gif" border="0" alt="{image_name}"{width_height}>
    </td>
  </table>


cu
Kurt

[__G__]

one image is still showin on top well i just use a transparent image of 1px x 1px so the one which is visible on top its kind of invisible now so its all good thanks a lot for all your help

[Egly]

Great Mod, thanks!

Tip: Here you can generate your own loaders: http://www.ajaxload.info/