rejetto forum

image preview

CR1T1C4L · 19 · 13431

0 Members and 1 Guest are viewing this topic.

Offline AvvA

  • Tireless poster
  • ****
    • Posts: 135
    • View Profile
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 :
Code: [Select]
.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 ^^
« Last Edit: July 16, 2009, 08:32:52 PM by AvvA »


Offline CR1T1C4L

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


Offline AvvA

  • Tireless poster
  • ****
    • Posts: 135
    • View Profile
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 :)
« Last Edit: July 16, 2009, 10:24:52 PM by AvvA »


Offline CR1T1C4L

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