Author Topic: image preview  (Read 5193 times)

0 Members and 1 Guest are viewing this topic.

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
image preview
« on: July 12, 2009, 06:45:50 PM »
Someone posted a little script that did what I needed it to do, but I somehow deleted it it was a java image preview script that loaded the pictures I had in a folder and shown a preview image of the file itself, anyone know what I am talking about

Offline rejetto

  • Administrator
  • Tireless poster
  • *
  • Posts: 12945
    • View Profile
Re: image preview
« Reply #1 on: July 13, 2009, 10:45:37 AM »
i moved your post because there was no point in posting in your old topic, and you'd get less visibility.

Offline mysoogal

  • Tireless poster
  • ****
  • Posts: 127
    • View Profile
Re: image preview
« Reply #2 on: July 13, 2009, 04:02:35 PM »
maybe this is what you looking for

http://www.rejetto.com/forum/index.php?topic=7166.0

nobody seem to help in this thread with thumbs its really amazing i'm starting to believe it is really a conspiracy  ;D

Offline AvvA

  • Tireless poster
  • ****
  • Posts: 135
    • View Profile
Re: image preview
« Reply #3 on: July 13, 2009, 04:47:21 PM »
Assuming you're using HFS last english beta (#242), go into expert mode under HFS, menu HTML template, edit.

At line 228, insert this :
 {.switch|%item-ext%|,|jpg,gif,png,ico,bmp
       |<img src="%item-url%" width="100" height="87">
|.}


you should end up with something like (with the unmodified originals lines up and below) :
 {.if not|{.get|can access.}|<img src='/~img_lock'>.}
  {.switch|%item-ext%|,|jpg,gif,png,ico,bmp
       |<img src="%item-url%" width="100" height="87">
|.}

  <a href="%item-url%"><img src="%item-icon%"> %item-name%</a>



You can add file extensions to the switch, you can change the width and height dimensions of the preview, in fact you can put everything HTML you like in the <img> tag.
That's not JS, that's SilentPliz french HFS template touch (thanks to him ^^)
« Last Edit: July 15, 2009, 03:16:35 PM by AvvA »

Offline r][m

  • Tireless poster
  • ****
  • Posts: 347
    • View Profile
Re: image preview
« Reply #4 on: July 13, 2009, 05:29:38 PM »
The code from SilentPliz works, but for a folder with several photos
of a 1/2 meg or more its really slow to load.
This screen shot is the best I've been able to do so far,
but it requires editing the iframe html page for each new
folder. No album software I've found yet works very well,
if you want to maintain your theme.

Offline AvvA

  • Tireless poster
  • ****
  • Posts: 135
    • View Profile
Re: image preview
« Reply #5 on: July 13, 2009, 06:07:23 PM »
Okay, I see the thing :)

The only solution I'm aware for now, is to use a batch thumbnails generator, and instead of inserting the line I said, you just do this :

  {.switch|%item-ext%|,|jpg,gif,png,ico,bmp
       |<img src="%item-url%.thumb.jpg" width="100" height="87">
|.}


this implies that you have made all of your thumbnail like this :
the picture file : myimage.png
the thumbnail : myimage.png.thumb.jpg

You can naturally change the part after the image filename (in bold), according to how you define the things in your thumbnail creator (RAWR provide one on this forum).

Offline r][m

  • Tireless poster
  • ****
  • Posts: 347
    • View Profile
Re: image preview
« Reply #6 on: July 14, 2009, 05:04:27 AM »
instead of inserting the line I said, you just do this :

  {.switch|%item-ext%|,|jpg,gif,png,ico,bmp
       |<img src="%item-url%.thumb.jpg" width="100" height="87">
|.}


this implies that you have made all of your thumbnail like this :
the picture file : myimage.png
the thumbnail : myimage.png.thumb.jpg

You can naturally change the part after the image filename (in bold), according to how you define the things in your thumbnail creator (RAWR provide one on this forum).
I have a thumbnail TN_100_0597.JPG for 100_0597.jpg photo, but I don't understand where or how to apply
the macro, so that it produces a page that displays all the thumbnails, but the files listed are actually the 1 meg
photo files?

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
Re: image preview
« Reply #7 on: July 14, 2009, 06:21:32 PM »
The code from SilentPliz works, but for a folder with several photos
of a 1/2 meg or more its really slow to load.
This screen shot is the best I've been able to do so far,
but it requires editing the iframe html page for each new
folder. No album software I've found yet works very well,
if you want to maintain your theme.


Can you post that please??


Ok I found the code but its on my server and I am not at home I will post it when I get there...

Offline AvvA

  • Tireless poster
  • ****
  • Posts: 135
    • View Profile
Re: image preview
« Reply #8 on: July 15, 2009, 03:09:01 PM »
Sorry for the wait :)

If all of your thumbnails are with this form : TN_imagename.jpg
This should work :

{.switch|%item-ext%|,|jpg,gif,png,ico,bmp
       |<img src="TN_%item-url%" width="100" height="87">
|.}



If I do understood your last post, you have to open HFS, click on the "expert mode" button, click on the menu button, select "Template", then "edit template". Assuming you are using HFS 2.3 build 242, this is at line 288.

Hopes it's more clear, but don't hesitate to make me redo the sentence if it's not understandable ;)

edit : I modified my post upper with colors, for you to better understand where and what insert.

re-edit ^^' : If you're using a personnal template, just post it and I'll try to find where to insert these lines ;)
« Last Edit: July 15, 2009, 03:21:10 PM by AvvA »

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
Re: image preview
« Reply #9 on: July 15, 2009, 03:44:31 PM »
Yea that's it, but while thinking of that I started to think more (a problem I have had since I could remember) what about onmouseover and have the images show up as a preview that way the user doesn't have to load all the images just the ones he/her are interested in....seems TSG is helping me along and thanks again for all your help as well...


(Going to post my ideas as they come)

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
Re: image preview
« Reply #10 on: July 15, 2009, 03:47:06 PM »
This is what I have as the preview code as it applies to the RAWR template 1.2

Code: [Select]
[preview-btn]
<div id="s%sequential%" class="quickBtn hide"

{.switch|%item-ext%|,|mp3,flv,mp3,flv,mp4,m4a,mov,3gp,aac|name="mediaFile"|.}><a href="javascript:void(0);"

onmouseover="initBox('Box-'+(%sequential%+1),this.name);" name="%item-full-url%"><img

src="/template/{.!theme.}/images/preview.gif" alt="P" title="{.!lv_previewTitle.}" align="middle"/></a></div><span

id="Box-%sequential%"></span>
[target]
{.switch|%item-ext%|,|gif,pdf,htm,html,css,js,txt,jpg,jpeg,png,xml|target="_blank"|.}
[search-data]
{.?search.}{.cut|2|-1|{.?filter.}{.if not|{.?files-filter=\ .}|{.?files-filter.}.}{.if not|{.?folders-filter=\

.}|{.?folders-filter.}.}.}
[stats = stats.htm|no log]
<span>[%uptime%]</span>{.!lv_uptime.}:<br/><br/>
<span>[%connections%]</span>{.!lv_connections.}:<br/>
<span>[%speed-in%KB/s]</span>{.!lv_inbound.}:<br/>
<span>[%speed-out%KB/s]</span>{.!lv_outbound.}:<br/>
<span>[%total-in%]</span>{.!lv_totalIn.}:<br/>
<span>[%total-out%]</span>{.!lv_totalOut.}:<br/>
<span>[%total-downloads%]</span>{.!lv_totalDownloads.}:<br/>
<span>[%total-uploads%]</span>{.!lv_totalUploads.}:<br/>
<span>[%total-hits%]</span>{.!lv_totalHits.}:<br/>
[comment]
<div class="comment">%item-comment%</div>
[folder-comment]
<div id="folderComment">%item-comment%</div>
[error-page]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
{.$disclaimer.}
<head>


Now I am wondering where would I put it in order for it to work with the preview button.....any ideas?

Offline AvvA

  • Tireless poster
  • ****
  • Posts: 135
    • View Profile
Re: image preview
« Reply #11 on: July 15, 2009, 08:09:02 PM »
I don't know any way except XHR to do what you want "visitor only load preview of what they onmouseover on".
The previous way I told you only loads preview pictures, the full pictures are theoricaly loaded only on click from the user.

Now, for inserting this inside RAWR template...
If you want the same behaviour as the click on preview button does with current things it can handle, you just have to go up the code part you just show, and erase the file extension 2 times where you found them :
If you didn't change to much the 1.2 RAWR template, this should be at line 327 and 340.
Then, you just add all those erased extension at the following of the extensions at the line 345.

This should shows the preview button as it does for videos, on click it will open the RAWR preview box.
Of course, all your previews pictures must be in the RAWR preview directory (\previews_and_thumbnails\), with the RAWR preview naming convention (prev-imagename.jpg).
There are full of files renamer, try to google ant renamer, if you don't know any.


In a different way, to do a onmouseover that shows the preview pic at the mouse cursor, it will need some more CSS...

This should be done by adding a switch in the [file] section, it will do for all pictures extensions you have decided, an add in the HTML tag, something like class="picprev" :
put this instead of your onmouseover line, just before the <img> tag.
<div class="picprev"><img src="%item-url%.jpg" /></div>

image source is here as if each thumbnail was in the same folder as the complete file and was named like image.jpg.jpg, arrange it like you need, or put back the RAWR url that point to the "previews and thumbnails" folder.

Now, in the CSS file (it depends which color you are using, in the code folder), just put this :
.picprev {position:relative; display:block; width:100px; height:100px;}
.picprev img{display:none; color:#000;}
.picprev:hover{color:#999;} /* for IE */
.picprev:hover img{display:block; position:absolute; top:0; left:0; width:100px; height:100px;}


Now, you just have to put the right url and filename for your previews, define the size you want in the CSS (change width and height), and eventually move the preview elsewhere, also with CSS.

Like it is done here, it will be here for all item (file) that have an existing preview in the same folder, and is called same as the filename+.jpg . You should do the switch in order that this kind of thumbnail is only created for pictures.
« Last Edit: July 15, 2009, 08:14:27 PM by AvvA »

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
Re: image preview
« Reply #12 on: July 15, 2009, 11:55:23 PM »
I must say you have taken the time out to help me and that THAT alone with what you posted has helped me understand this topic soooo much more and again thank you

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
Re: image preview
« Reply #13 on: July 16, 2009, 12:11:54 AM »
so what if I just wanted to use the image itself as the source file for the preview? wouldn't I just use the xxx.jpg or *item-url% ?

Offline CR1T1C4L

  • Occasional poster
  • *
  • Posts: 31
    • View Profile
Re: image preview
« Reply #14 on: July 16, 2009, 01:27:36 PM »
Did what you said and for the life of me cant find what I did wrong, all it ends up doing is nothing.....keep in mind I do not have a thumb folder, I would rather use the files themselves as the source and just resize them as needed to a prefit size say 100x100 or something like that