rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: Alons0 on June 08, 2007, 11:34:03 AM

Title: idea for displaying images in hfs
Post by: Alons0 on June 08, 2007, 11:34:03 AM
I wanna when click on a image to view it with hfs backgroung (like sites for images hosting for ex. http://img519.imageshack.us/my.php?image=fozi3hc9.jpg). I wanna view picture and background to be my template. Is this possible?
Title: Re: idea for displaying images in hfs
Post by: maverick on June 08, 2007, 12:04:40 PM
Sure it is possible.

In your html or template after the <head> section, you can include:

<body background="/your file.jpg"> (the jpg would have to be in your vfs root)

or

<body bgcolor="#ccffff">  (for a solid background color of your choice)
Title: Re: idea for displaying images in hfs
Post by: TSG on June 09, 2007, 12:40:29 PM
Do it the proper way with css.

Basic:
<body style="background-image:url('image.jpg'); background-color: #RRGGBB; background-position: coordinates;">

Basic Stacked:
<body style="background:url('image.jpg') coordinates #RRGGBB;">

Best:
<style type="text/css">
body {
   background-image:url('image.jpg');
   background-color: #RRGGBB;
   background-position: coordinates;
}
</style>

Best Stacked:
<style type="text/css">
body {
   background:url('image.jpg') coordinates #RRGGBB;
}
</style>

(actually best way would be in an external css file for your template)

To make change the image onclick, you would need to use some javascript :), have a div as the bottom layer would make it even easier. Especially when using javascript :).

NO MORE UNI FOR 6 WEEKS, well after exams... IM BACK BABY, IM BACK
Title: Re: idea for displaying images in hfs
Post by: rejetto on June 10, 2007, 02:00:32 PM
you can, using javascript to fill the window with proper html
Title: Re: idea for displaying images in hfs
Post by: Alons0 on August 21, 2007, 12:29:59 PM
And so, can someone help me with this javascript? I need to view the images with the site background but i can't write the java script and the codes for this :-\ 
Title: Re: idea for displaying images in hfs
Post by: Giant Eagle on August 21, 2007, 08:06:40 PM
You will have to create the website around it, but this is the javascript that you can use:

Code: (javascript) [Select]
<script type="text/javascript">
function showImage() {
var Url=document.location.href.split("?image=");
document.getElementById("imageLocation").innerHTML = "<img src=\""+Url[1]+"\" alt=\"\" onError=\"parentNode.innerHTML='4.04 Image not found!'\"/>"
}
</script>

So you have to either place this in an html file and put it somewhere in your VFS, or make use of a feature of HFS itself. Just copy everything thats inside here and paste it somewhere in your template code:

Code: (Example code) [Select]
[showImage.html]
<html><head>
<script type="text/javascript">
function showImage() {
var Url=document.location.href.split("?image=");
document.getElementById("imageLocation").innerHTML = "<img src=\""+Url[1]+"\" alt=\"\" onError=\"parentNode.innerHTML='4.04 Image not found!'\"/>"
}
</script>
</head><body "onLoad=showImage();">

<span id="imageLocation">Loading...</span>

</body></html>

the 3 important things are:

-the script itself
-the onLoad="showImage();" inside the <body> tag
-the span with "imageLocation" as its id


Now to make it work, you would have to adjust the link for image files

Code: (Modified link) [Select]
<a href="/~showImage.html?image=%item-url%">%item-name%</a>

as i said, you have to build the template around it. You are able to modify the rest of the example i gave you, as long as you preserve the 3 important things.
Title: Re: idea for displaying images in hfs
Post by: Alons0 on August 22, 2007, 06:59:48 AM
What for image location? Because now when i click on a image, i view "Loading...". What to set that all images in the site to be open by my idea ::) and where i must build the template arount it?
p.s. which code to be in html file? the second? or i can paste it in the template?
Sorry but i can't understand ::)
Title: Re: idea for displaying images in hfs
Post by: Giant Eagle on August 22, 2007, 09:26:42 PM
whoops, my bad. I made a mistake.
The modified link should be this:

<a href="/~showImage.html?image=%folder%%item-url%">%item-name%</a>


As for the "Build your website around it" part

You can put everything inside the <body> tag (aswell as the <head> tag, but preserve what's already in there) as long as you place the "<span id="imageLocation">Loading...</span>" on the location where you want the image to show up on your page.
Title: Re: idea for displaying images in hfs
Post by: Alons0 on August 24, 2007, 03:47:10 PM
I did everything and again i view "Loading" :-[ Or maybe "Loading" must be placed with a link? Please help to finish the idea :'(
Title: Re: idea for displaying images in hfs
Post by: Giant Eagle on August 26, 2007, 02:30:27 PM
I need to learn to double check things before i post..

<body "onLoad=showImage();">

should be

<body onLoad="showImage();">

Title: Re: idea for displaying images in hfs
Post by: Alons0 on August 28, 2007, 01:01:41 PM
Thank you Giant Eagle, it works! But can images be resized like without this extra? Because now there's a scrollbars at right and at bottom. Look at for test: http://alonso.getmyip.com/~showImage.html?image=/Upload/PIC_0049.JPG

P.S. And now with ~showImage.html?image= images can't be displayed in the forums :-\. Is there a way my idea to be realized without ~showImage.html?image= (to be the original link, for ex. http://alonso.getmyip.com/Upload/PIC_0049.JPG) and images to be with background in my site?
Title: Re: idea for displaying images in hfs
Post by: Giant Eagle on August 28, 2007, 04:41:52 PM
Thank you Giant Eagle, it works! But can images be resized like without this extra? Because now there's a scrollbars at right and at bottom. Look at for test: http://alonso.getmyip.com/~showImage.html?image=/Upload/PIC_0049.JPG

adjust the javascript
Code: [Select]
document.getElementById("imageLocation").innerHTML = "<img src=\""+Url[1]+"\" width=\"100%\" height=\"100%\" alt=\"\" onError=\"parentNode.innerHTML='4.04 Image not found!'\"/>"
dont know for sure, but that should fix it :)

P.S. And now with ~showImage.html?image= images can't be displayed in the forums :-\. Is there a way my idea to be realized without ~showImage.html?image= (to be the original link, for ex. http://alonso.getmyip.com/Upload/PIC_0049.JPG) and images to be with background in my site?

no. but i dont see your point aswell..

the ~showImage.html does not remove your image, just point this forum to the original location of the file (http://alonso.getmyip.com/Upload/PIC_0049.JPG)
or create something like this:
Code: [Select]
html:
<a href="http://alonso.getmyip.com/~showImage.html?image=/Upload/PIC_0049.JPG"><img src="http://alonso.getmyip.com/Upload/PIC_0049.JPG" alt="" /></a>

forum:
[url=http://alonso.getmyip.com/~showImage.html?image=/Upload/PIC_0049.JPG][img]http://alonso.getmyip.com/Upload/PIC_0049.JPG[/img][/url]
Title: Re: idea for displaying images in hfs
Post by: Alons0 on August 28, 2007, 05:08:54 PM
Thank you Giant Eagle, it works! But can images be resized like without this extra? Because now there's a scrollbars at right and at bottom. Look at for test: http://alonso.getmyip.com/~showImage.html?image=/Upload/PIC_0049.JPG

adjust the javascript
Code: [Select]
document.getElementById("imageLocation").innerHTML = "<img src=\""+Url[1]+"\" width=\"100%\" height=\"100%\" alt=\"\" onError=\"parentNode.innerHTML='4.04 Image not found!'\"/>"
dont know for sure, but that should fix it :)

Look at the screenshot below.

no. but i dont see your point aswell..

the ~showImage.html does not remove your image, just point this forum to the original location of the file (http://alonso.getmyip.com/Upload/PIC_0049.JPG)
or create something like this:
...
In my local network users upload images for avatars and for other and after uploading when somebody copy the link, it is not suitable fr forums. It's a difficult to edit the link - to be without ~showImage.html?image=