Author Topic: idea for displaying images in hfs  (Read 7559 times)

0 Members and 1 Guest are viewing this topic.

Offline Alons0

  • Tireless poster
  • ****
  • Posts: 197
    • View Profile
    • Alons0's site
idea for displaying images in hfs
« on: June 08, 2007, 05: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?

Offline maverick

  • Insane poster
  • *****
  • Posts: 1052
  • Computer Solutions
    • View Profile
Re: idea for displaying images in hfs
« Reply #1 on: June 08, 2007, 06:04:40 AM »
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)
maverick

Offline TSG

  • Operator
  • Insane poster
  • *****
  • Posts: 1932
  • Country: au
    • View Profile
    • RAWR-Designs
Re: idea for displaying images in hfs
« Reply #2 on: June 09, 2007, 06:40:29 AM »
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
« Last Edit: June 10, 2007, 09:03:29 AM by That_Stevens_Guy »

Offline rejetto

  • Administrator
  • Insane programmer
  • *
  • Posts: 12501
  • Country: it
    • View Profile
Re: idea for displaying images in hfs
« Reply #3 on: June 10, 2007, 08:00:32 AM »
you can, using javascript to fill the window with proper html

Offline Alons0

  • Tireless poster
  • ****
  • Posts: 197
    • View Profile
    • Alons0's site
Re: idea for displaying images in hfs
« Reply #4 on: August 21, 2007, 06:29:59 AM »
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 :-\ 

Offline Giant Eagle

  • Insane poster
  • *****
  • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
Re: idea for displaying images in hfs
« Reply #5 on: August 21, 2007, 02: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.

Offline Alons0

  • Tireless poster
  • ****
  • Posts: 197
    • View Profile
    • Alons0's site
Re: idea for displaying images in hfs
« Reply #6 on: August 22, 2007, 12: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 ::)
« Last Edit: August 22, 2007, 01:11:52 AM by Alons0 »

Offline Giant Eagle

  • Insane poster
  • *****
  • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
Re: idea for displaying images in hfs
« Reply #7 on: August 22, 2007, 03: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.

Offline Alons0

  • Tireless poster
  • ****
  • Posts: 197
    • View Profile
    • Alons0's site
Re: idea for displaying images in hfs
« Reply #8 on: August 24, 2007, 09:47:10 AM »
I did everything and again i view "Loading" :-[ Or maybe "Loading" must be placed with a link? Please help to finish the idea :'(
« Last Edit: August 24, 2007, 10:20:11 AM by Alons0 »

Offline Giant Eagle

  • Insane poster
  • *****
  • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
Re: idea for displaying images in hfs
« Reply #9 on: August 26, 2007, 08:30:27 AM »
I need to learn to double check things before i post..

<body "onLoad=showImage();">

should be

<body onLoad="showImage();">


Offline Alons0

  • Tireless poster
  • ****
  • Posts: 197
    • View Profile
    • Alons0's site
Re: idea for displaying images in hfs
« Reply #10 on: August 28, 2007, 07:01:41 AM »
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?
« Last Edit: August 28, 2007, 07:22:06 AM by Alons0 »

Offline Giant Eagle

  • Insane poster
  • *****
  • Posts: 535
  • >=3 RAWR!
    • View Profile
    • RAWR-Designs.com
Re: idea for displaying images in hfs
« Reply #11 on: August 28, 2007, 10:41:52 AM »
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]
« Last Edit: August 28, 2007, 10:45:03 AM by Giant Eagle »

Offline Alons0

  • Tireless poster
  • ****
  • Posts: 197
    • View Profile
    • Alons0's site
Re: idea for displaying images in hfs
« Reply #12 on: August 28, 2007, 11:08:54 AM »
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=
« Last Edit: August 28, 2007, 11:18:01 AM by Alons0 »