rejetto forum

Pictures + Thumbs Preview

Guest · 68 · 49863

0 Members and 1 Guest are viewing this topic.

Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
yeh, using javascript shouldn't be so hard.
open new window
set its url
set its title
I can't do this alone. Can someone help me with this java script?


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
Sorry for the late reply, i'll paste up a few versions of this tomorrow.


Offline Avalon

  • Occasional poster
  • *
    • Posts: 4
    • View Profile
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.

First of all, thanks for this code, but something is just not OK for me.  I did copy the whole code, everything to the appropriate place, but my thumbs are not as wide as it should be. Let me show you: http://media.proxnet.hu/upload/20070404/13122942514.jpeg
The only thing I changed is the size of the thumbs in the [style] part, now it's 120px*120px, the thumbs are the same. :(
What's the problem?


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
lol r u sure u changed the width of the thumb in your image manipulation and css? it looks like its still 50px wide.


Offline Avalon

  • Occasional poster
  • *
    • Posts: 4
    • View Profile
lol r u sure u changed the width of the thumb in your image manipulation and css? it looks like its still 50px wide.
Lol, yeah! This just thw quote of the original code. I changed thee thumbs size in mine, and I also deleted the comments. :D


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. ???
please help me people :'(


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
Sorry Alonso i forgot i said that i would put the code up... now for the code you will need.

For this method you wil have to put it into:
[file.jpg = file.bmp = file.gif = file.png]

Here is the Javascript to do it:
<script type="text/javascript">
function openBox() {
   popup=window.open('','%item-name% - Preview','height=480,width=640,resizable=yes,scrollable=yes');
   var win = popup.document;
   win.write('<html><head><title>%item-name% - Preview</title><style>body{margin:0px;padding:0px;background:#000;}</style></head>');
   win.write('<body><a href="%item-url%" target="_blank"><img src="%item-url%" alt="%item-name% - Preview" width="640" border="0"></a><body></html>');
}
</script>

And now all you need is a link to open it:
<a style="cursor:pointer;" onclick="openBox();">Preview Image</a>

There is many other ways you could do this, but this is one of the less complex ways. Have fun. And please remember that this is going to be opening the full size image just squeezed into a smaller image to fit the window, you will have to create a directory of preview images and re-route the url in the code to have a better effect.


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
Where do I put the java script code? in file section([file.jpg....])?
And where to put the link?
« Last Edit: April 08, 2007, 07:08:10 AM by Alons0 »


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
Both into the [file.jpg .. ]

Because the %item-name% and %item-url% will work there, to make it work with the script being less redundant, it gets quite complex and i'm too busy working on tog :)


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
Both into the [file.jpg .. ]

Because the %item-name% and %item-url% will work there, to make it work with the script being less redundant, it gets quite complex and i'm too busy working on tog :)
It can't work. Look at the code
Code: [Select]
[file.jpg = file.JPG = file.bmp = file.gif = file.png]
<tr class="mout" href="%item-url%">
   <td><a href="%item-url%" target=_blank style="cursor:pointer;"><div class=thumb><div class=thumb style="background:url('/siteop/thumbs/tn_%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>
<script type="text/javascript">
function openBox() {
   popup=window.open('','%item-name% - Preview','height=480,width=640,resizable=yes,scrollable=yes');
   var win = popup.document;
   win.write('<html><head><title>%item-name% - Preview</title><style>body{margin:0px;padding:0px;background:#000;}</style></head>');
   win.write('<body><a href="%item-url%" target="_blank"><img src="%item-url%" alt="%item-name% - Preview" width="640" border="0"></a><body></html>');
}
</script>
<a style="cursor:pointer;" onclick="openBox();">Preview Image</a>
And look at pictures:

[attachment deleted by admin]



Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site

Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
A little bug in the thumbs code. When I and somebody enter in my site and view the thumbnail and after that when we click on a thum to view the image. This is ok. But after that when i browse the folder with the thumbs again and point someone thumb, it hides and it doesn't reload. This is valid for all thumbs. I don't have this problem on my computer (where hfs is). So can the problem be fixed to reload the thumb or...i don't know where is the problem?


Offline TSG

  • Operator
  • Tireless poster
  • *****
    • Posts: 1935
    • View Profile
    • RAWR-Designs
I have NO idea what your talking about lol

I never have any problem with it.

Next build of my template will link the thumbnails differently.

I have seriously have no idea what your problem is.
« Last Edit: April 18, 2007, 12:46:14 PM by That_Stevens_Guy »


Offline Alons0

  • Tireless poster
  • ****
    • Posts: 197
    • View Profile
    • Alons0's site
I have NO idea what your talking about lol

I never have any problem with it.

Next build of my template will link the thumbnails differently.

I have seriously have no idea what your problem is.
Please enter in http://alonso.getmyip.com/Upload/ and view the thumbs. Click on one picture and then turn back in the folder and point a thumbnail. When i enter in my site from school or from a friend and point, it hides
« Last Edit: April 18, 2007, 04:06:32 PM by Alons0 »