Author Topic: [Mod] Image/Media In New Window (easy/more practical) (Read 13292 times)

seth · « **on:** June 06, 2003, 09:43:17 AM »

I really hate the cluttered way in which the detailed pages contain both the media and the long tail of comments. So I decided to modify the details page so that all it only displays the comments and a link to the actual media file, which when clicked opens up in a popup window.

(You can also have the window popUp at the same time the user enters the details page if you want, but the thing about it is that you can open and close the media at will, but the actual detailes page will not be so cluttered anymore.

Ok this is VERY simple.

In details.html
Find the tag, {image} and remove it. This will disable the image from being displayed on that page.

Next, find the tag {header} and directly below it ad the following javascript.

Code: [Select]


<script>

function moviePlayer(){
var movie=window.open(movie,"movie","width=640,height=480,")
movie.document.write('<title>{image_name} by {user_name} </title><body bgcolor="#ffffff"leftmargin="0"topmargin="0"marginwidth="0"marginheight="0">{image}</body>');
}
//moviePlayer()
</script>

Notice the line that reads "//moviePlayer()" This line has been commented out and is dormant. If you want the popUp window to automatically pop up as soon as the user enters the detailed page, just remove the // from that line. to make it active.

Also notice the line that starts with movie.document.write This is the actual HTML thats going be used to build the popup window. So you should customize the <title>and<header>and <body> tags at will. As you can see, the {image} tag now resides inside the body tags of this pop up window.

You can also change the width and height to what ever you want, in fact if anyone can help me out with the code so that the widow adjusts itself to the media that would be excellent. Im thinking raplacing width=640,height=480 with {width_height} might do the trick but havent tried it yet.

You are almost done.

NOTE: Because of the nature of javascript, you will need to make sure you go into your media templates and remove the white spaces from the code so that instead of being written across multiple lines, its just one long string. For example if media template(s) look like this:

Code: [Select]


<tag1> 
This, that and the other 
<a href="blahblah.blah">whatever</a>

<tag2>Content of the second tag etc.
</tag2>

</tag1>

You would need to change it to this:

Code: [Select]

<tag1> This, that and the other <a href="blahblah.blah"> whatever</a><tag2>Content of the second tag etc.</tag2></tag1>

Now for the smaller details, in your page, you might want to add a link so that the user can manually launch the popup window. Your link should be formed as follows.

To have the user be able to launch the media by clicking on the thumbnail, the link should look like...

Code: [Select]

<a href="javascript:moviePlayer()">{thumbnail}</a>

To have the user launch the window by clicking on a text link, the link should look like...

Code: [Select]

<a href="javascript:moviePlayer()">View It Now!</a>

Again this is all in the details.html page, if you want to be able to lauch the image or video from somewhere else, such as, from the main page etc without having to enter the details page, you should insert the script in within the Head tags of your header.html file.

spoiledRHOtten · « **Reply #1 on:** June 14, 2003, 05:05:18 AM »

Hi!
THis sounds like a great idea! Is there a way to do it in reverse?
Where the information shows up in the popup and it's just the image and the comments on the page?

seth · « **Reply #2 on:** June 14, 2003, 10:10:28 AM »

Yeah... just switch the html locations

Basically the HTML cotained inside of the pop up widow script would go in the main document area while the html that is used to display everything else would be placed in side the script.

seth · « **Reply #3 on:** June 19, 2003, 05:47:34 AM »

I recently encountered a problem with the use of the quotation marks in the media templates. If you encouter this you can fix it by replacing the quotation marks with " also instead of using the {width_height} tag use width="{width}" height="{height}"

for example:
if your media tamplate look like this:

Code: [Select]

<img src="{media_src}" {width_height}>

change it to this:

Code: [Select]

<img src="{media_src}" width="{width}" height="{height}">

You can just use the fin/replace function to do it quickly and painlessly.

the trouble is that the quotes tend to trhrow off the main HTML but if you use " then the quotation marks don't get put in there until the actual widow is created dynamically.

seth · « **Reply #4 on:** June 19, 2003, 06:02:41 AM »

This is an alternate variation on the same thing but maybe some of you may find it better depending on your usage.

The script for the page head is:

Code: [Select]

<script language="JavaScript" type="text/javascript"> 
<!--
function popup_window(the_page,the_width,the_height) {
  window.open(the_page,"","status=no,menubar=no,scrollbars=yes,resizable=no,width=" + the_width + ",height=" + the_height);
  return false;
}
//-->
</script>

In the page somewhere you will create a form with an invisible field. This field's value is the actual HTML you want displayed in the window. So if you want the media to be displayed then its value will be {image} plus any addition html you want to go with it, or if you want the comments in the pop up window instead then the value will be the html for the comments.

In my case i use the window for the media so my form looks like this:

Code: [Select]

<form><input name="content" type="hidden" value="<head><title>{image_name}</title><style>body{ overflow:hidden }</style></head><body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>{image}</body>"></form>

Include all the info you want such as that windows title and style etc. I dont want scroll bars so I used the overflow:hidden style. Just be sure that you do not use quotation marks, instead use " as described in my previous post and shown in the code snipplet above.

Now for the actual link to launch the window I use the following code:

Code: [Select]

<a href="" onClick="popup_window('javascript:document.write(opener.document.forms[0].content.value);',{width},{height});return false;">Launch 
            Window</a>

This particular link will also use the media's actual height and width to set the widows propportions

have fun.... I know I have

Bodzio · « **Reply #5 on:** March 12, 2005, 10:18:18 AM »

I can't install none of these...

In the first option the window isn't oppening.
In the second the window opens, but with no content, only white bg.

Any other solutions of this problem?

aiofreak · « **Reply #6 on:** July 15, 2005, 06:17:09 AM »

Thanks for posting this simple mod. Unfortunately, it seems to be ineffective for all but .jpg images. It opens JPG images in a new window without problems, but I have tried GIFs and PNGs with no success. I did modify each media template to be on one line, and followed your tutorial exactly. Still, only JPGs were viewed successfully. Any suggestions as to what I could do to fix this frustrating bug?

You may view my gallery at www.explodeyouth.com/exchange

Thank you!

ronnel · « **Reply #7 on:** October 16, 2005, 07:20:36 PM »

thankjs..

4images Forum & Community

News:

Author Topic: [Mod] Image/Media In New Window (easy/more practical) (Read 13292 times)

seth

[Mod] Image/Media In New Window (easy/more practical)

spoiledRHOtten

[Mod] Image/Media In New Window (easy/more practical)

seth

[Mod] Image/Media In New Window (easy/more practical)

seth

UPDATE

seth

Alternate variation.

Bodzio

Re: [Mod] Image/Media In New Window (easy/more practical)

aiofreak

Re: [Mod] Image/Media In New Window (easy/more practical)

ronnel

Re: [Mod] Image/Media In New Window (easy/more practical)