rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: MusicMan on April 23, 2006, 03:28:08 AM

Title: Pictures + Thumbs Preview
Post by: MusicMan on April 23, 2006, 03:28:08 AM
Pictures + Thumbs Preview

i found some code for that, and modifieded it a bit ...

i have a dir with pictures in it.
then i made thumbs from those pictures 100x100,
and placed them in a dir called "thumb"
when i list the pictures, a thumb is showed from the thumb dir...
this works very well, but................

the only drawback is:
1. when i dont have created the thumbs yet
2. the thumb dir is visible

so anyone knows how solve this:
1. if no thumb(file) exist, show the original picture (some kind of case/if structure)
2. make the thumb dir hidden

ofcource i have alot of picture dirs, and possible thumb dirs

info:
Code: [Select]
%encoded-folder%  =  directory
thumb  =  is thumbdir
%item-name%"  =  filename


Code: [Select]
[file]
<tr><td class=row>%new% <a href="%item-url%">

<script language="javascript">
var c='%item-name%';
switch (  c.substr(  c.lastIndexOf('.')  ) .toLowerCase()  )
   {
case '.jpg' : case '.jpeg' : case '.gif' : case '.png' :case '.ico' :case '.bmp' : document.write('<a href="%item-url%" target="_blank"><img align=middle width="100" height="100" src="%encoded-folder%thumb/%item-name%"> </a> ');break;
   default      : document.write('<img align=middle src="/~img_file"> ');
   }
</script>

 %item-name%</a>%comment%<td class="row right">%item-size%<td class="row right">%item-modified%<td class="row right">%item-dl-count%
</tr>


http://img190.imageshack.us/img190/5139/screenshot0013rh.jpg
http://img166.imageshack.us/img166/5670/screenshot0027sg.jpg
http://img166.imageshack.us/img166/5153/screenshot0030tp.jpg
http://img166.imageshack.us/img166/7698/screenshot0048yo.jpg
Title: Images and thumbnails
Post by: Guest on July 14, 2006, 09:11:48 AM
Gave this code a go, AWESOME :) i found just making the file hidden eliminates the thumbs directory from still being there.

The biggest issue with this code is that it runs for ALL files, it would be nifty if someone (maybe you) could figure out a way of makin it run for only image files. This problem may be only a minor detail for high bandwidth users, but for the poor dialup or isdn users trying to access the folder it adds alot of excess source code.
Title: nice
Post by: moondog on July 14, 2006, 03:09:39 PM
very nice but would take a little while to do on my server.  Hehe but great find.
Title: Re: Images and thumbnails
Post by: ledufe on July 17, 2006, 05:31:31 PM
Quote from: "Guest"
...The biggest issue with this code is that it runs for ALL files, it would be nifty if someone (maybe you) could figure out a way of makin it run for only image files...


and so, why donĀ“t just add this file section to your template, right just above the section [file] do or create a section called [file.jpg] and do your code to show only the thumbnails, like this:

Code: [Select]
[file]
<tr><td class=row><a href="%item-url%"><img align=top src="/~img_file"> %item-name%</a>%new%<br>%comment%<td class="row right">%item-size%<td class="row right">%item-modified%<td class="row right">%item-dl-count%

[file.jpg]
<tr><td class=row><img align=top src="/~img_file"><a href="%item-url%"><img align=top src="tn-%item-url%"> %item-name%</a>%new%<br>%comment%<td class="row right">%item-size%<td class="row right">%item-modified%<td class="row right">%item-dl-count%


this should work only for jpg files, add some other image file sections to use with only the file types you
Title: Thumbnail code
Post by: Guest on July 27, 2006, 08:21:28 AM
Hey its me, the Guest lol, back again just say thanks for the replies, i will give this a go, see if it works i might actually post some screeners of my modified 'black' template later with this in it :).
Title: Thumbnails
Post by: Guest on July 27, 2006, 08:53:48 AM
Ok i have had a little play around with it and by putting the [file.jpg] it just brings the page up with this folder is empty, so that one doesn seem to work...

But like i said, here is my modded template with the older version of the code included, i made the thumbnails quite small so not to completely pwn my server, but its better than icons :)

http://www.geocities.com/caspersnevets/ImageGallery.jpg
http://www.geocities.com/caspersnevets/IESUX.jpg
http://www.geocities.com/caspersnevets/Home.jpg
Title: lol
Post by: moondog on July 27, 2006, 04:12:01 PM
WOW looks sweet
Title: Thumbs
Post by: Guest on July 28, 2006, 03:55:01 PM
Thanks moondog! I spent my uni hols practising html on the server.

IF u are wondering i am only on a 512k ADSL connection so my upstream is only about 16kb\s MAX, and having thumbs about that size doesn really have an affect on my bandwidth, they are only about 1kb each thumb...

The IESUX image is a modified version of explorer destroyer, i found my site looks shithouse in IE. But who uses IE anyway ;)
Title: lol
Post by: moondog on July 28, 2006, 04:13:21 PM
NP i am currently working looking for another program I think its not bad  i am on a 5 mb connection. I am looking for people to test mine some times as alot of my duddys dont go on to much if you want u can add me to msn at moon_dog23@hotmail.com. we can share ideas and stuff
Title: Pictures + Thumbs Preview
Post by: ledufe on July 28, 2006, 06:18:17 PM
ops....nobody ask me or even invite me, but i want to sahre some ideas too, and it could be on msn messenger too, i want to know some things and try some others.....
it would be good to have someone else to share it too...
rssrsrsr
by the way, im working on some new template layout, and trying to separate the formating code of the template from the main code.... css and code...do you know what i mean?
Title: ledufe
Post by: moondog on July 30, 2006, 05:12:11 PM
ledufe i love looking and chatting about this stuff if u wish  u may add me too i dont mind. At all or if u use other chat programs i can use them too
Title: Re: Pictures + Thumbs Preview
Post by: anarkhy on September 16, 2006, 08:59:23 PM

can this work with this template?
http://www.rejetto.com/forum/index.php?topic=3203.0


all my images show broken
Title: Re: Pictures + Thumbs Preview
Post by: TSG on September 25, 2006, 08:29:52 AM
can this work with this template?
http://www.rejetto.com/forum/index.php?topic=3203.0
all my images show broken

I am unsure why it is not working for you i have mine narrowed down to just work with only jpg's, this is my code below.
[file]
<tr><td class=row style="color:#FF6633; padding:0">%new%<script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')) .toLowerCase()){case'.jpg':document.write('<a href="%item-url%"><img align=absmiddle src="%encoded-folder%thumb/%item-name%"> </a>');break;default:document.write('<img align=top src="/~img_file">');}</script><a href="%item-url%"> %item-name%</a>%comment%<td align=center class=row>%item-size%<td align=center class=row>%item-modified%<td align=center class=row>%item-dl-count%</tr>

Ino its chunky but thats how my whole template source is, trying to reduce as many bytes as possible, i only have a 16kb\s upload  :P

The way mine works is that the file is actually in the directory of the images, and its a hidden file, so hfs cant see it, then yay we have jpg thumbnails.

This is getting long now so i will stop momentarily, i would rather use the hfs [file.jpg] code i have heard of, if that works on 2.1 beta 18 can someone tell me how to do that?  ???

Title: Re: Pictures + Thumbs Preview
Post by: TSG on September 25, 2006, 02:28:23 PM
The way mine works is that the file is actually in the directory of the images, and its a hidden file, so hfs cant see it, then yay we have jpg thumbnails.

ino i am qouting myself but i have found that since using the 2.1 beta 18 it is counting my thumbnail downloads and racking up the hit counter on the files as it downloads the thumbnails.
Title: Re: Pictures + Thumbs Preview
Post by: rejetto on September 25, 2006, 02:40:28 PM
right click on the "thumb" folder
don't count as download: mask
then, enter "*"
Title: Re: Pictures + Thumbs Preview
Post by: TSG on September 25, 2006, 03:22:42 PM
I tried this and it did not work... very strange.
Title: Re: Pictures + Thumbs Preview
Post by: TSG on September 26, 2006, 08:51:10 AM
The Orange and Blue Template, is put in here cause it was the practice template for the thumbnail codes :D

For a MUCH more detailed post go to the official template post:
http://www.rejetto.com/forum/index.php?topic=3820.0 (http://www.rejetto.com/forum/index.php?topic=3820.0)
Title: Re: Pictures + Thumbs Preview
Post by: Slavi on October 21, 2006, 04:38:38 AM
I'm also using this template and I find it great, but I'm bored of making the thumbnails. can anyone tell me how to ""1. if no thumb(file) exist, show the original picture (some kind of case/if structure)"" or a way to make the thumbnails automatically. you can find me in ICQ 120877798 or my mail: jonathan_smith@abv.bg
10x in advance


Pictures + Thumbs Preview

i found some code for that, and modifieded it a bit ...

i have a dir with pictures in it.
then i made thumbs from those pictures 100x100,
and placed them in a dir called "thumb"
when i list the pictures, a thumb is showed from the thumb dir...
this works very well, but................

the only drawback is:
1. when i dont have created the thumbs yet
2. the thumb dir is visible

so anyone knows how solve this:
1. if no thumb(file) exist, show the original picture (some kind of case/if structure)
2. make the thumb dir hidden

ofcource i have alot of picture dirs, and possible thumb dirs

info:
Code: [Select]
%encoded-folder%  =  directory
thumb  =  is thumbdir
%item-name%"  =  filename


Code: [Select]
[file]
<tr><td class=row>%new% <a href="%item-url%">

<script language="javascript">
var c='%item-name%';
switch (  c.substr(  c.lastIndexOf('.')  ) .toLowerCase()  )
   {
case '.jpg' : case '.jpeg' : case '.gif' : case '.png' :case '.ico' :case '.bmp' : document.write('<a href="%item-url%" target="_blank"><img align=middle width="100" height="100" src="%encoded-folder%thumb/%item-name%"> </a> ');break;
   default      : document.write('<img align=middle src="/~img_file"> ');
   }
</script>

 %item-name%</a>%comment%<td class="row right">%item-size%<td class="row right">%item-modified%<td class="row right">%item-dl-count%
</tr>


http://img190.imageshack.us/img190/5139/screenshot0013rh.jpg
http://img166.imageshack.us/img166/5670/screenshot0027sg.jpg
http://img166.imageshack.us/img166/5153/screenshot0030tp.jpg
http://img166.imageshack.us/img166/7698/screenshot0048yo.jpg
Title: Re: Pictures + Thumbs Preview
Post by: TSG on October 21, 2006, 12:00:56 PM
Um its easy to make it use the original images, but that makes you upload EVERY original image on a page, even if u restrict the size, but i have program that i use to make thumbnails, takes less than 30seconds to update my thumbs dir. If you want to look it up its called 'ReaJpg', it was recommended to me by MOONDOGG.  :D
Title: Re: Pictures + Thumbs Preview
Post by: moondog on October 21, 2006, 10:55:55 PM
thotor322 is perfect too its 100% free fast and easy to use try that one also reajpg is nice too.
Title: Re: Pictures + Thumbs Preview
Post by: TSG on October 22, 2006, 06:22:01 AM
I might go check that out, but so far ReaJpg is my fav :)

This code below is for the guy above that wanted to know how to make it load the original image.

[file]
<tr><td class=row>%new%<script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')).toLowerCase()){case'.jpg':document.write('<a href="%item-url%"><img align=absmiddle src="%item-name%"></a>');break;default:document.write('<img align=top src="/~img_file">');}</script><a href="%item-url%"> %item-name%</a>%comment%<td align=center class=row>%item-size%<td align=center class=row>%item-modified%<td align=center class=row>%item-dl-count%</tr>

Only 3 more weeks of uni then i will have time to build a completely new template :D
Title: Re: Pictures + Thumbs Preview
Post by: moondog on October 22, 2006, 03:00:21 PM
wont full images slow down his server when opening. I rember talking with u and you were worried about it.
Title: Re: Pictures + Thumbs Preview
Post by: ledufe on October 22, 2006, 07:02:16 PM
I might go check that out, but so far ReaJpg is my fav :)

This code below is for the guy above that wanted to know how to make it load the original image.

[file]
<tr><td class=row>%new%<script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')).toLowerCase()){case'.jpg':document.write('<a href="%item-url%"><img align=absmiddle src="%item-name%"></a>');break;default:document.write('<img align=top src="/~img_file">');}</script><a href="%item-url%"> %item-name%</a>%comment%<td align=center class=row>%item-size%<td align=center class=row>%item-modified%<td align=center class=row>%item-dl-count%</tr>

Only 3 more weeks of uni then i will have time to build a completely new template :D

i guess that the right solution would be if we could detect if there is or not a thumbnail, and if there is no thumbnail to the jpg file it should show the real jpg file(or it could be coded as a decision inside the code using a check box to select the user prefs on this...if he wants to show a error message like the one i puted on my code(alt="missing thumbnail of the file %item-name%") or if he wants to take the huge load time and show the real image only resized to the defined size of the thumbs...
when i got some time i will experiment this.....
or if someone else could post some sort of solution here.....feel free to try and share yours "right solution"  ;D
Title: Re: Pictures + Thumbs Preview
Post by: moondog on October 25, 2006, 06:18:45 PM
Try thotor322 like i said its free. You can set it to make your thumb nail dir for you and rename thumbs as making them. I love it for doing lots of pics. Right now on my hfs i have gallary and flv player.  bolth easy to use and make. I might be making a install exe for it so ever one can make there own with all my tools. I currently use all free tools. And some html templates. But i am lost in the html template I just got.:( ohhh well
Title: Re: Pictures + Thumbs Preview
Post by: TSG on October 28, 2006, 09:25:49 AM
Nice to hear you got the thumbnail code workin MOONDOGG, i just posted to your question about the directories :P
Title: Re: Pictures + Thumbs Preview
Post by: TSG on October 28, 2006, 12:07:34 PM
MUCH WOOTAGE
i managed to get it to replace a broken image with another image thankyou Ledufe for the idea, i was just putting up with broken links lol :)

[file]
<tr><td class=row style="padding:0;">%new%
<script language="javascript">
var c='%item-name%';
switch(c.substr(c.lastIndexOf('.')).toLowerCase()) {
   case'.jpg':document.write('<a href="%item-url%"><object data="/thumb/%item-name%" align="absmiddle"><object data="/thumb/nt.gif" align="absmiddle"/></object></object></a>');
   break;
   default:document.write('<img align=top src="/~img_file">');
}
</script>
<a href="%item-url%"> %item-name%</a>%comment%<td class=row align=center>%item-size%<td class=row align=center>%item-modified%<td class=row align=center>%item-dl-count%</tr>

It is all laid out atm still cause i am still editing it, it may be beneficial to simply chunk it up.

The next upload of my template will have this for sure!

To make it work simply set an image somewhere (preferably in the same dir as the thumbs) that it will load in the case of no image (thumb).
Title: Re: Pictures + Thumbs Preview
Post by: ledufe on October 28, 2006, 12:20:18 PM
very good!

i have other kind of sugestions for your new template too....

but i prefer to test/check if it is possible(even with js) before sugest...
Title: Re: Pictures + Thumbs Preview
Post by: TSG on October 28, 2006, 12:46:18 PM
University is almost over, so i have time to play with HFS, hence my activity on the forums again, i am constantly finding problems with the original code of 'the black template' that i have been working with, but slowly i am perfecting it, just repaired a horizontal stretch problem with the status window at the bottom of the page :P, I am up for any suggestions, but as i have said before, the tpl i am building is for my 17kb\s upload speed, so my server can only physically do so much.
Title: Re: Pictures + Thumbs Preview
Post by: ~GeeS~ on October 28, 2006, 01:19:13 PM
... but as i have said before, the tpl i am building is for my 17kb\s upload speed ...
well said! Most home users of HFS have speed limits. In my country the affordable maximum upload speed is about 1Mb/s (~120kB/s). In order to achieve a reasonable loading time for a webpage (<1-2 sec), the pages should not contain to much items or only small sized pic's. It is very annoying to load pages with hundreds of items plus pictures and wait for hours to load.
Slightly OT, but anyway something to keep in mind when designing templates and a filesystem.
Title: Re: Images and thumbnails
Post by: TSG on November 10, 2006, 12:23:28 PM
Quote from: Guest
...The biggest issue with this code is that it runs for ALL files, it would be nifty if someone (maybe you) could figure out a way of makin it run for only image files...

and so, why don´t just add this file section to your template, right just above the section [file] do or create a section called [file.jpg] and do your code to show only the thumbnails, like this:

Code: [Select]
[file.jpg]
<tr><td class=rw style="padding:0;">%new% <script language="javascript">var c='%item-name%';switch(c.substr(c.lastIndexOf('.')).toLowerCase()) {case'.jpg':document.write('<a href="%item-url%" target=_blank><object data="/thumb/%item-name%" align=absmiddle><object data="/thumb/nt.gif" align=absmiddle /></object></object></a>');break;default:document.write('<img align=top src="/~img_file">');}</script>
<a href="%item-url%" target=_blank> %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"> %item-name%</a>%comment%<td class=rw align=center>%item-size%<td class=rw align=cente>%item-modified%<td class=rw align=center>%item-dl-count%

this should work only for jpg files, add some other image file sections to use with only the file types you

I managed to get this working on my template ;D extremely happy, and so will my template users be, now to get this going for [file.mp3] and have a mp3 player in there sumwhere.... looking into that one.

Note: i altered the code ledufe posted with the actual code i used.
Title: Re: Pictures + Thumbs Preview
Post by: TSG on November 10, 2006, 12:38:38 PM
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.
Title: Re: Pictures + Thumbs Preview
Post by: TSG on December 04, 2006, 11:30:12 AM
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 (http://www.rejetto.com/forum/index.php?topic=3971.msg1019876#msg1019876)

Attached is an example in Firefox:

[attachment deleted by admin]
Title: Re: Pictures + Thumbs Preview
Post by: TSG on December 20, 2006, 10:55:49 AM
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]
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on March 15, 2007, 11:25:02 AM
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]
Title: Re: Pictures + Thumbs Preview
Post by: Giant Eagle on March 15, 2007, 11:56:54 AM
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="">
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on March 15, 2007, 12:07:54 PM
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?
Title: Re: Pictures + Thumbs Preview
Post by: TSG on March 15, 2007, 01:55:34 PM
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]
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on March 15, 2007, 03:11:44 PM
...
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.
Title: Re: Pictures + Thumbs Preview
Post by: TSG on March 16, 2007, 02:06:55 AM
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";
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on March 16, 2007, 02:09:33 PM
@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?
Title: Re: Pictures + Thumbs Preview
Post by: TSG on March 18, 2007, 06:40:55 AM
Easy, just change the url of the image for a mp3 file.
Title: Re: Pictures + Thumbs Preview
Post by: Giant Eagle on March 18, 2007, 09:59:42 AM
@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.
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on March 22, 2007, 08:38:49 PM
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. ???
Title: Re: Pictures + Thumbs Preview
Post by: Giant Eagle on March 23, 2007, 03:27:48 PM
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.
Title: Re: Pictures + Thumbs Preview
Post by: rejetto on March 23, 2007, 03:56:21 PM
yeh, using javascript shouldn't be so hard.
open new window
set its url
set its title
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on March 25, 2007, 07:51:11 PM
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?
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 03, 2007, 12:23:23 AM
Sorry for the late reply, i'll paste up a few versions of this tomorrow.
Title: Re: Pictures + Thumbs Preview
Post by: Avalon on April 04, 2007, 11:14:00 AM
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 (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?
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 05, 2007, 01:38:27 AM
lol r u sure u changed the width of the thumb in your image manipulation and css? it looks like its still 50px wide.
Title: Re: Pictures + Thumbs Preview
Post by: Avalon on April 05, 2007, 01:55:11 PM
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
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 07, 2007, 05:47:40 PM
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 :'(
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 08, 2007, 06:34:45 AM
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.
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 08, 2007, 07:01:00 AM
Where do I put the java script code? in file section([file.jpg....])?
And where to put the link?
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 08, 2007, 08:58:33 AM
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 :)
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 08, 2007, 03:39:07 PM
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]
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 08, 2007, 05:09:54 PM
no idea
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 09, 2007, 07:51:37 AM
no idea
Did you see the teplate fot this section? There's a mistake somewhere... ::)
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 18, 2007, 12:08:10 PM
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?
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 18, 2007, 12:44:18 PM
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.
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 18, 2007, 04:02:11 PM
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
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 18, 2007, 04:14:52 PM
why when i click an image does it go to this address http://127.0.0.1:1033/clear.cgi?

and no i'm still not seeing your problem haha
Title: Re: Pictures + Thumbs Preview
Post by: Alons0 on April 18, 2007, 04:18:34 PM
why when i click an image does it go to this address http://127.0.0.1:1033/clear.cgi?

and no i'm still not seeing your problem haha
I view this for 1st time
Title: Re: Pictures + Thumbs Preview
Post by: TSG on April 18, 2007, 04:21:30 PM
Thats pretty weird...
Title: Re: Pictures + Thumbs Preview
Post by: vorshi on May 03, 2007, 11:11:04 PM
Quote
Please tell us if a new build of Irfanview does not work with the batch files, built using
Irfanview 3.99.

Put Irfanview in the 'Files' folder located within the 'Thumbnail and Preview Generator' folder.

Please follow the instructions inside the Thumbnail and Preview Generator.bat file to
create beautiful thumbnails and preview images. These will be stored in a hidden folder
'previews_and_thumbnails' inside your selected image folder.

not understand Please instructed thx u
Title: Re: Pictures + Thumbs Preview
Post by: TSG on May 04, 2007, 05:14:29 AM
I and many others understand it? Go through the steps very carefully in the readme and batch file, one small error can make no images occur. We have plans for a readme and for a proper GUI, but i have no time to write out long readme files or a GUI atm.

I understand a language barrier might be occurring, i cannot help you if you do not understand the batch file or the readme, as my language is English.
Title: Re: Pictures + Thumbs Preview
Post by: kabelspeed on July 01, 2008, 07:11:31 PM
Hallo i am dutch

can you help me ?

I want thumb picture.
Title: Re: Pictures + Thumbs Preview
Post by: TSG on July 02, 2008, 07:54:40 AM
Old template is Old. I don't even think MusicMan is a regular visitor anymore. This thread shows the roots of my usage of HFS and my first template attempt :P

Search this thread more, I can't remember how it works. All I can remember is that this wasn't the best solution, It uses Javascript. The latest RAWR-Designs templates do it all with HFS [Section] {.Macro.}.

The way ours works is with a hidden folder. This folder contains all the thumbnails and previews. The template simply looks in this location for the thumbnails, and displays them. We even created the TPGen http://www.rejetto.com/forum/index.php?topic=4529.msg1024014#msg1024014 to ease this process. But some work will have to be done to make it compatible with this old template.... Good luck. My advice is to try a newer template before doing your head in.
Title: Re: Pictures + Thumbs Preview
Post by: MusicMan on July 06, 2008, 10:55:38 AM
Hy StevensGuy, I "MusicMan" is still a regular visitor, except the subject is soooo old ....   ;D
duno how it works either anymore ....