rejetto forum

Pictures + Thumbs Preview

Guest · 68 · 49961

0 Members and 1 Guest are viewing this topic.

Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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.
« Last Edit: December 04, 2006, 11:29:56 AM by That_Stevens_Guy »


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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]
« Last Edit: December 04, 2006, 12:13:05 PM by That_Stevens_Guy »


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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]
« Last Edit: December 20, 2006, 10:58:24 AM by That_Stevens_Guy »


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
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]
« Last Edit: March 15, 2007, 11:28:50 AM by Alons0 »


Offline Giant Eagle

  • Tireless poster
  • ****
    • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
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="">


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
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?
« Last Edit: March 15, 2007, 12:17:29 PM by Alons0 »


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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]
« Last Edit: March 15, 2007, 02:03:06 PM by That_Stevens_Guy »


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
...
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.
« Last Edit: March 15, 2007, 04:07:27 PM by Alons0 »


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
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";
« Last Edit: March 16, 2007, 04:45:42 AM by That_Stevens_Guy »


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
@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?
« Last Edit: March 16, 2007, 02:13:23 PM by Alons0 »


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
Easy, just change the url of the image for a mp3 file.


Offline Giant Eagle

  • Tireless poster
  • ****
    • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
@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.


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
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. ???
« Last Edit: March 22, 2007, 08:40:52 PM by Alons0 »


Offline Giant Eagle

  • Tireless poster
  • ****
    • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
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.


Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13523
    • View Profile
yeh, using javascript shouldn't be so hard.
open new window
set its url
set its title