rejetto forum
Software => HFS ~ HTTP File Server => HTML & templates => Topic started 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?
-
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)
-
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
-
you can, using javascript to fill the window with proper html
-
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 :-\
-
You will have to create the website around it, but this is the javascript that you can use:
<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:
[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
<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.
-
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 ::)
-
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.
-
I did everything and again i view "Loading" :-[ Or maybe "Loading" must be placed with a link? Please help to finish the idea :'(
-
I need to learn to double check things before i post..
<body "onLoad=showImage();">
should be
<body onLoad="showImage();">
-
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?
-
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
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:
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]
-
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
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=