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.
<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:
<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:
<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...
<a href="javascript:moviePlayer()">{thumbnail}</a>
To have the user launch the window by clicking on a text link, the link should look like...
<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.