4images Forum & Community

4images Modifications / Modifikationen => Templates & Styles (Requests & Discussions) => Topic started by: drhtm on June 13, 2005, 04:45:24 PM

Title: Loader for Images
Post by: drhtm on June 13, 2005, 04:45:24 PM

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!

Title: Re: Loader for Images
Post by: zaisk on November 19, 2005, 11:02:48 AM

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

Title: Re: Loader for Images
Post by: Acidgod on November 19, 2005, 11:08:35 AM

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:

Title: Re: Loader for Images
Post by: V@no on November 19, 2005, 07:18:59 PM

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.

Title: Re: Loader for Images
Post by: bibabobu on November 20, 2005, 10:45:50 PM

@ 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.

Title: Re: Loader for Images
Post by: V@no on November 20, 2005, 11:00:30 PM

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

Title: Re: Loader for Images
Post by: bibabobu on November 20, 2005, 11:36:07 PM

Sorry,sorry. I think i am too stupid. :oops:
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?

Title: Re: Loader for Images
Post by: V@no on November 21, 2005, 06:37:37 AM

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">

Title: Re: Loader for Images
Post by: impss on November 21, 2005, 03:48:23 PM

Veno,

I just tried that, and it did not work

Title: Re: Loader for Images
Post by: JensF on November 21, 2005, 10:51:29 PM

Test this

Quote

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

Title: Re: Loader for Images
Post by: bibabobu on November 21, 2005, 10:58:56 PM

@ v@no

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

Title: Re: Loader for Images
Post by: V@no on November 22, 2005, 01:39:43 AM

@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;">

Title: Re: Loader for Images
Post by: impss on November 22, 2005, 02:53:33 AM

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

 8O

Title: Re: Loader for Images
Post by: |Rene| on March 07, 2006, 10:19:19 PM

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  :?

Title: Re: Loader for Images
Post by: V@no on March 08, 2006, 06:14:09 AM

You do something wrong.

Title: Re: Loader for Images
Post by: |Rene| on March 10, 2006, 03:25:21 PM

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?

Title: Re: Loader for Images
Post by: V@no on March 10, 2006, 03:38:17 PM

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.

Title: Re: Loader for Images
Post by: |Rene| on March 10, 2006, 03:44:18 PM

Yes, but when I remove this line

Code: [Select]

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

Title: Re: Loader for Images
Post by: V@no on March 10, 2006, 03:50:04 PM

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

Title: Re: Loader for Images
Post by: |Rene| on March 10, 2006, 04:06:02 PM

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.

Title: Re: Loader for Images
Post by: |Rene| on March 18, 2006, 09:03:48 PM

Vano are you able to answer ?  :wink:

Title: Re: Loader for Images
Post by: V@no on March 18, 2006, 10:38:37 PM

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>

Title: Re: Loader for Images
Post by: Zyga on June 15, 2006, 12:24:23 PM

hmmmm i have an idea  :!:

what with stretch {thumbnail} as background  :twisted:

Title: Re: Loader for Images
Post by: tdkpaul on July 30, 2006, 05:48:45 PM

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.

Title: Re: Loader for Images
Post by: __G__ on October 30, 2006, 10:58:43 AM

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 :(

Title: Re: Loader for Images
Post by: Darkness2001 on October 30, 2006, 11:55:10 AM

Hello,

greate think...

Greez Darkness  :mrgreen:

Title: Re: Loader for Images
Post by: __G__ on October 31, 2006, 12:14:43 AM

Quote from: __G__ on October 30, 2006, 10:58:43 AM

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 ?

Title: Re: Loader for Images
Post by: KurtW on October 31, 2006, 06:16:50 AM

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>
:wink:

cu
Kurt

Title: Re: Loader for Images
Post by: __G__ on November 01, 2006, 06:52:00 PM

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 :P so its all good thanks a lot for all your help

Title: Re: Loader for Images
Post by: Egly on January 10, 2007, 01:19:26 AM

Great Mod, thanks!

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

Title: Re: Loader for Images
Post by: zellcell on May 28, 2007, 12:32:59 AM

hellloo

i tried to use that mod.. it didnt worked for me:(,.. i tried to used it with mp3 files.. so i edited the mp3.html file .. mustn it works too with mp3 files?

when i try  to uload a new mp3 file. no newloader3.gif appears?

greetings manuel

Title: Re: Loader for Images
Post by: black1cat on February 29, 2008, 02:48:11 PM

Hi!
On my homepage it works, but only for uploaded images (to server)

When I upload images from URL, then it doesn't work, because <td background="URL"> isn't working!

Can you help me?


PS: Sorry for my bad English  :roll: