rejetto forum
Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: CR1T1C4L 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
-
i moved your post because there was no point in posting in your old topic, and you'd get less visibility.
-
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
-
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 ^^)
-
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.
-
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).
-
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?
-
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...
-
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 ;)
-
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)
-
This is what I have as the preview code as it applies to the RAWR template 1.2
[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?
-
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.
-
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
-
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% ?
-
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
-
It could be better if the time I spend helping you was successfull at the end :P
I just would like to remember you what r][m said about this way, fourth post of this topic ;)
In fact, doing what you ask is really easy, but it's a hard bandwidth consumer as visitor will have load all the pictures present on the page.
In the other hand, it would be suicidal to have a onmouseover behavior that load a picture (suicidal's perhaps a bit strong, let's say... not so good and a visitor's nerves stress testing ^^)
If you have the time to wait for me to answer, send me your template file (expert mode, template, edit, then save it to a file and attach it here), because if you did as I said, it should work, so i'll instead prefer to modify your actual template, that way, you've got something that works.
And if you've got time to spend on testing, just :
- Take the RAWR template you're using, in example for color blue, you have to open the X:\HFS\template\rawr_blue\code\rawr_blue_main.css, insert the code in my previous post if it isn't already done, let's say at the end of .css file.
The code was and stays :
.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;}
- Open the .tpl file then
- Go to the line you quote, the one with the onmouseover thing under [preview-btn].
- Replace <a href="javascript:void(0);"
onmouseover="initBox('Box-'+(%sequential%+1),this.name);" name="%item-full-url%">
with
<div class="picprev"><img src="%item-url%" /></div> *note that I now use the original picture and only reduce it with CSS.
Now, I'll try to explain what this do :
The line you insert make a blank square with no size and an image inside it.
This square is positioned where you put the line (for the previous post, at the preview button),
The fact that you only see the image when you go over "something" is a behavior coming with the CSS lines (that remain the same as my previous post, you must add them if you want this to work).
Now you can change where and how large the picture will appear.
The way I told you in the previous post was replacing the preview button behavior, it's not the best way I think, as when you'll have a video folder, or a music folder, it will try to find a picture, that's why I talk about a switch thing on the picture extension that you use.
In short :
- the line you insert in the .tpl file determine the position of the square that will contain the image, depending if you put it at the filename level, or at the preview button level...
- the one in the CSS file will define the size and position of the preview, relatively to the element where you have inserted the code in, in the .tpl file. (and also hide/show the pic)
if you want to have the preview appears just up the filename, you'll insert the html code at the filename level, in example just before the <a href... ...</a>, and in css will do something like top:-10px;. this should place the preview pic 10 pixels up where you insert the HTML code.
If all this is too obscure, or/and if I'm completely un-understandable, just send your template file and tell me which element should make the preview appear onmouseover, and where preview should be placed when showing itself.
Please, try to stay reasonable ^^
-
Ok I will put this as simply as possible, I want my pictures to show up the same way the videos show up in RAWR 1.2....I want to use the pictures themselves as the source file and not any thumb folder files.....I really hope this helps understand what I want to try and do....
-
Well, ok, I can't help you then, I miss some knowledge in HFS template's code.
What you want require that I learn this template as it requires to change a behavior (thumbnails), and I really don't plan on it at this time ^^
I can resume if someone interested in helping you out :
- find all references to pictures,
- remove the normal behaviour with all the picture reference by replacing them by your minded code.
- insert the same code as the video's popup, but by pointing its content to the imagefile directly, and only in the picture switch.
I perhaps forget something, but I think this is what you have to do ^^
Sorry, but for your simple request and the result you want, that takes to much time for a non-RAWR knower :)
-
Yea TSG Helped me out but my nephew formatted the computer thinking he was fixing it and now I lost my whole HFS settings (which should have been backed up on a thumb drive) and now I have to start from scratch.....there is a thread that was made that does EXACTLY what I need it to do, problem is I cant seem to locate the thread....anybody have any ideas
And please don't tell me to search I have already done that like 15 times already and can't seem to find it but as I said before TSG posted the link to me before so I know its there