idea for displaying images in hfs

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?

maverick · **Reply #1 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)

TSG · **Reply #2 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

rejetto · **Reply #3 on:** June 10, 2007, 02:00:32 PM

you can, using javascript to fill the window with proper html

Alons0 · **Reply #4 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 $:-\$

Giant Eagle · **Reply #5 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.

Alons0 · **Reply #6 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

Giant Eagle · **Reply #7 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.

Alons0 · **Reply #8 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

Giant Eagle · **Reply #9 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();">

Alons0 · **Reply #10 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?

Giant Eagle · **Reply #11 on:** August 28, 2007, 04:41:52 PM

Quote from: 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

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

Quote from: Alons0 on August 28, 2007, 01:01:41 PM

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]

Alons0 · **Reply #12 on:** August 28, 2007, 05:08:54 PM

Quote from: Giant Eagle on August 28, 2007, 04:41:52 PM

Quote from: 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

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.

Quote from: Giant Eagle on August 28, 2007, 04:41:52 PM

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=

idea for displaying images in hfs

Alons0

idea for displaying images in hfs

maverick

Re: idea for displaying images in hfs

TSG

Re: idea for displaying images in hfs

rejetto

Re: idea for displaying images in hfs

Alons0

Re: idea for displaying images in hfs

Giant Eagle

Re: idea for displaying images in hfs

Alons0

Re: idea for displaying images in hfs

Giant Eagle

Re: idea for displaying images in hfs

Alons0

Re: idea for displaying images in hfs

Giant Eagle

Re: idea for displaying images in hfs

Alons0

Re: idea for displaying images in hfs

Giant Eagle

Re: idea for displaying images in hfs

Alons0

Re: idea for displaying images in hfs