Pictures + Thumbs Preview

[TSG]

EDIT of last code:

[file.jpg]
<tr><td class=rw style="padding:0;">%new% <a href="%item-url%" target=_blank><object data="/thumb/%item-name%" align=top><object data="/thumb/nt.gif" align=top /></object></object> %item-name%</a>%comment%<td class=rw align=center>%item-size%<td class=rw align=center>%item-modified%<td class=rw align=center>%item-dl-count%</tr>

[file]
<tr><td class=rw>%new% <a href="%item-url%"><img align=top src="/~img_file" alt=""> %item-name%</a>%comment%<td class=rw align=center>%item-size%<td class=rw align=center>%item-modified%<td class=rw align=center>%item-dl-count%

No need for javascript function anymore.

[TSG]

New version that uses layers:
[file.jpg]
<tr>
   <td class=rw style="padding:0px;border-left:0px;">
   <a href="%item-url%" target=_blank>   
      <div style="float:right;margin:25px 25px 0px 0px;">%item-name%%new%</div>
      <div style="position:absolute;z-index:20;"><img src="/thumb/%item-name%" alt=""></div>
      <div style="z-index:10;"><img src="/thumb/nt.gif" alt=""></div>   
   </a>
   %comment%</td>
   <td class=rw align=center>%item-size%</td>
   <td class=rw align=center>%item-modified%</td>
   <td class=rw align=center>%item-dl-count%</td>
</tr>

For a more detailed post on this solution:
http://www.rejetto.com/forum/index.php?topic=3971.msg1019876#msg1019876

Attached is an example in Firefox:

[attachment deleted by admin]

[TSG]

I have made yet another version of this code for thumbnails, its more simplified.

[file.jpg]
<tr>
   <td class=rw style="padding:0px;border-left:0px;">   
   <a href="%item-url%" target=_blank>      
      <div style="position:absolute;z-index:20;"><img src="/thumb/%item-name%" alt=""></div>
      <div style="z-index:10;"><img src="/thumb/nt.gif" alt="" align=absmiddle>&nbsp;%item-name%%new%</div>   
   </a>
   %comment%</td>
   <td class=rw align=center>%item-size%</td>
   <td class=rw align=center>%item-modified%</td>
   <td class=rw align=center>%item-dl-count%</td>
</tr>

[attachment deleted by admin]

[Alons0]

I wanna thumbs for damn teplate but this codes don't work (look at picture). So can you help and make for me code for damn template? My site is http://alonso.getmyip.com/

[attachment deleted by admin]

[Giant Eagle]

Are you sure you've set up the /thumbs folder and filled it with the thumbs? Cause that seems to be the problem.

If you dont want to create thumbnails for each image, you can also use the actual files as thumbnails (requires fast upload if you have multiple images in a folder)
Simply change the code <img src="/thumb/%item-name%" alt=""> into <img src="%item-name%" alt="">

[Alons0]

Are you sure you've set up the /thumbs folder and filled it with the thumbs? Cause that seems to be the problem.

If you dont want to create thumbnails for each image, you can also use the actual files as thumbnails (requires fast upload if you have multiple images in a folder)
Simply change the code <img src="/thumb/%item-name%" alt=""> into <img src="%item-name%" alt="">

can you post me the whole code with file and file.jpg sections, because i don't know which of the codes in the topic work? And where is this picture nt.jpg?

[TSG]

The code above here is old and had problems.

My new method uses css...
I will paste it but its quite complex... in comparison...

Put this in your [style] section, or stylesheet.
/*change thumb size here*/
.thumb{
   background:url('URL OF CHOICE/nt.gif') no-repeat;
   width:50px;
   height:50px;
   float:left;
}

Below is fairly obvious.
[file.jpg = file.bmp = file.gif = file.png]
<tr>
   <td><a href="%item-url%" target=_blank><div class=thumb><div class=thumb style="background:url('URL OF CHOICE/%item-name%') no-repeat;"></div></div><br><br>&nbsp;%item-name%</a>%new%%comment%</td>
   <td>%item-size%</td>
   <td>%item-modified%</td>
   <td>%item-dl-count%</td>
</tr>

The style="" section in the other div rewrites the css of thumb class so a thumbnail will appear in the place of nt.gif in the overlaying div.
The css modifies the size of the div, so if u want bigger thumbs, u have to change the size of the div to suit.


And that should do it, using css fixes all bugs with the old method i posted.

Use a type of thumbnail generator to make a dir full of thumbnail images. I think some have been recommended here already.

Also posted the nt.gif below.

[attachment deleted by admin]

[Alons0]

...

Thank you! It works! But I wanna when i put the mouse on the picture to view the "hand cursor" like on the links. The hand cursor appears for 1-2s when i click on the picture. But I wanna view this cursor when i put the mouse on the pic. Please help me for these things.

[TSG]

style="cursor:pointer;"

Like this <a href="%item-url%" target=_blank style="cursor:pointer;"> BLAH BLAH DIVS </a>

ALSO

Put this small javascript in to preload the nt.gif before a user enters a gallery. Put it in with the rest of the javascript for your template, or inside <script type="text/javascript" language="javascript"> </script> in the head of the template.

//nt.gif preloader *By: That Stevens Guy
ntimg = new Image();
ntimg.src = "URL OF CHOICE/nt.gif";

[Alons0]

@That_Stevens_Guy
Like this:(?)

Code: [Select]

<script type="text/javascript" language="javascript">
//nt.gif preloader *By: That Stevens Guy
ntimg = new Image();
ntimg.src = "URL OF CHOICE/nt.gif";
</script>
And i wanna view some icons like thumbs. For ex. the icon of the mp3 files (the winanp icon) to be like thumb. How can i do it?

[TSG]

Easy, just change the url of the image for a mp3 file.

[Giant Eagle]

@That_Stevens_Guy
Like this:(?)

Code: [Select]

<script type="text/javascript" language="javascript">
//nt.gif preloader *By: That Stevens Guy
ntimg = new Image();
ntimg.src = "URL OF CHOICE/nt.gif";
</script>

Yes, but be sure to edit the 'URL OF CHOICE' part, so that it actually points to the nt file on your file server.

[Alons0]

I wanna when click on any image (with thumbnail), when it appears in a new window, this window to have title like the name of the image (%item-name%). Now it is the whole link of the image. I don't know what to edit in the code for the thumbs to do this. Please help me.

[Giant Eagle]

You can't, unless you use javascript to create a new window with its content or an .html file with the <title> specified and the image.

[rejetto]

yeh, using javascript shouldn't be so hard.
open new window
set its url
set its title