NEW - Media Center

[akulion]

Hi,

Demo - look on the left side until you see it

Ok these are the GUIDELINES for setting up the media block on your page! I have given the codes you will need here, but please keep in mind there is no simple way to set this up - so use your initiative in setting things up and also if you have questions or need help dont hesitate to ask here.

My apologies beforehand for not giving detailed instructions, since I am feeling really lazy nowadays to be honest

Media Center - Creating the Block only

To create the block only (non functional - just design) put this code in a SCRIPT BLOCK and also upload the images provided below to your forum root.

Code Select Expand


<table border="0" width="158" cellpadding="0" style="border-collapse: collapse" bgcolor="#FFFFFF">
<tr>
<td colspan="3" bgcolor="#000000">
<img border="0" src="mc_top.gif" width="158" height="28"></td>
</tr>
<tr>
<td width="8%" bgcolor="#000000"> </td>
<td width="83%">
<table border="0" width="100%" id="table2" cellpadding="0" style="border-collapse: collapse" cellspacing="2">
<tr>
<td bgcolor="#660066" align="center">
<font color="#FFFFFF" face="Verdana" size="2"><a href="http://yoursite.com/mediaplayer/mp3player.html" onMouseOver="stm(Text[0],Style[1])" onMouseOut="htm()"  onclick="window.open('http://yoursite.com/mediaplayer/mp3player.html','JUKEBOX','height=405,width=310'); return false;">
<font color="#FFFFFF">Jukebox</font></a></font></td>
</tr>
<tr>
<td bgcolor="#008000" align="center">
<font color="#FFFFFF" face="Verdana" size="2"><a href="http://yoursite.com/index.php?action=radio" onMouseOver="stm(Text[1],Style[1])" onMouseOut="htm()" onclick="window.open('http://yoursite.com/index.php?action=radio','Radio','height=242,width=538'); return false;">
<font color="#FFFFFF">Radio</font></a></font></td>
</tr>
<tr>
<td bgcolor="#FF6600" align="center">
<font color="#FFFFFF" face="Verdana" size="2"><a href="http://yoursite.com/mediaplayer/index3.html" onMouseOver="stm(Text[2],Style[1])" onMouseOut="htm()"  onclick="window.open('http://yoursite.com/mediaplayer/mp3player2.html','JUKEBOX','height=400,width=280'); return false;">
<font color="#FFFFFF">Jukebox</font></a></font></td>
</tr>
<tr>
<td bgcolor="#CC0000" align="center">
<font color="#FFFFFF" face="Verdana" size="2"><a href="http://yoursite.com" onMouseOver="stm(Text[3],Style[1])" onMouseOut="htm()">
<font color="#FFFFFF">Lectures</font></a></font></td>
</tr>
<tr>
<td bgcolor="#000080" align="center">
<font color="#FFFFFF" face="Verdana" size="2"><a href="webtv.html" onMouseOver="stm(Text[4],Style[1])" onMouseOut="htm()"  onclick="window.open('webtv.html','TV','height=350,width=320'); return false;">
<font color="#FFFFFF">Web TV</font></a></font></td>
</tr>
<tr>
<td bgcolor="#990033" align="center">
<font face="Verdana" style="font-size: 10pt" color="#FFFFFF">
<a href="http://yoursite.com" onMouseOver="stm(Text[5],Style[1])" onMouseOut="htm()" >
<font color="#FFFFFF">Videos</font></a></font></td>
</tr>
<tr>
<td bgcolor="#008080" align="center">
<font face="Verdana" style="font-size: 10pt" color="#FFFFFF">
<a href="http://yoursite.com" onMouseOver="stm(Text[6],Style[1])" onMouseOut="htm()" >
<font color="#FFFFFF">Flash</font></a></font></td>
</tr>
</table>
</td>
<td width="12" bgcolor="#000000"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#000000">
<img border="0" src="mc_bottom.gif" width="158" height="135"></td>
</tr>
</table>


Now in the above code a few things will have to be changed, each entry in the list (jukebox, radio, etc etc) is defined in seperate table cells like so:

Code Select Expand


<tr>
<td bgcolor="#008080" align="center">
<font face="Verdana" style="font-size: 10pt" color="#FFFFFF">
<a href="http://yoursite.com" onMouseOver="stm(Text[25],Style[1])" onMouseOut="htm()" >
<font color="#FFFFFF">Flash</font></a></font></td>
</tr>

So even though in the code above there are a total of 7, but you may only need 3 - so delete or add according to your needs. Alternatively if you wish to leave the 7 layout you could simply not add a link to it and instead just use some text (instructions or whatever).

If you decide to use text only be sure to remove the link! The link is defined by the code:

Code Select Expand


<a href="http://yoursite.com" onMouseOver="stm(Text[25],Style[1])" onMouseOut="htm()" >TEXT</a>

Leaving the text and font formatting just remove the A href tag including its ending tag which is </a>

Finally you need to upload the actual MP3 player along with all its files contained in this ZIP file, simply create a folder called mediaplayer in your forum root and add all the files there. For multiple MP3players simply make copies of the playlist.xml and mp3player.html files and number them like playlist3.xml, mp3player3.html and then inside mp3player3.html find the line flashvars:"file=playlist.xml and change it to flashvars:"file=playlist3.xml

The play list contains the songs list, open it, its pretty straight forward, just copy and paste the tags in there to create a new entry in the list. The player supports displaying of mp3 files, FLV flash files, swf files, and images. For more indepth details about the player you can always visit the authors homepage here.

As for the radio, you will need to install thie mod for SMf called SMF radio: Download here - install it normally via package manager.

As for webTV all you have to do for that is upload this file to your forum root (right click and save as)

----------------

Another thing you HAVE to do is to change the links in the code from http://yoursite.com to whatever your page address may be. This also occurs in the mp3player.html files so change accordingly.

IMAGES (upload to foru root)

and


============================================================

Suggestions for Setting up Video / Flash sections

Now on my homepage the flash, lectures and video sections are actually normal SMF boards which are used exclusively for flash or video content - so you may wish to do that as well and link up to them if you like. Or you could leave it out altogether.

Another sugestion is the usage of articles to display an index of videos or flash with screenshots, linking to the actual content. Its really up to you here and your creativity, so I leave it as suggestions.

============================================================

setting up the mouse over descriptions

This is also pretty simple really - so dont get confused or alarmed.

open your index template.php file and place this JUST BEFORE the </head> tag

Code Select Expand


<SCRIPT language="JavaScript1.2" src="main.js" type="text/javascript"></SCRIPT>   


And then place the code below AFTER the <body> tag - Please note here, place it EXACTLY after that! If it says <body>'; then place it between the <body> and ';

Code Select Expand


<DIV id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></DIV>
<SCRIPT language="JavaScript1.2" src="style.js" type="text/javascript"></SCRIPT>


Upload the 2 files linked below, to your forum root: (right click and 'save as' the files below)
-main.js
-style.js

The text tags are defined in style.js, so you can change them in there if needed.

This is a free script from Dynamic Drive called DHTML Tip Message further instructions can be found there if you need to customize things like changing styles etc.

Also note this mouse over script can be used on your ENTIRE site! All you would have to do is follow instructions in the zip file (avaiilable on the link above) - but thats a lot of additional work but I thought I would mention it here :up:

Well thats all you are set to go, just enjoy, if u have problems setting it up please ask questions here.

[RoarinRow]

OMG, I do this when the Wizard of Oz gives me a brain   :up:   You rock Aku!    

[akulion]

lool well its just one of those things which requires some work since it uses different thingies if u know what i mean

[toyotaTRD]

It's great though!

[RoarinRow]

lool well its just one of those things which requires some work since it uses different thingies if u know what i mean

It's definitely different looking code than the original   

[Ronlx2]

Installed this yesterday on my test forum and then on two of my regular forums and it works great. So easy to work with and change things around the way one would want.

Thanks for your sharing of the code above.

[akulion]

oh by the way u may want to get the TV mod for the webTV, its been released here: http://www.smfhelper.info/index.php?topic=600.0


TV stations can be found here: http://wwitv.com/portal.htm

[yelegen]

My apologies beforehand for not giving detailed instructions, since I am feeling really lazy nowadays to be honest

Wow I d love to see what you ll do when you do feel like working 

great work Aku 

[Ronlx2]

I have the basic media player working but something I can't figure out so work with me.

I want to add the 50's & 60's and so on, so how add these with the liinks I have already created in the media player?

[akulion]

Ok here is how it involved 3 steps:

Step 1: Creating the links

An extract from the code above, to show how you can change the links and add more

Code Select Expand


<tr>
<td bgcolor="#660066" align="center">
<font color="#FFFFFF" face="Verdana" size="2"><a href="http://yoursite.com/mediaplayer/mp3playerX.html" onMouseOver="stm(Text[0],Style[1])" onMouseOut="htm()"  onclick="window.open('http://yoursite.com/mediaplayer/mp3playerX.html','JUKEBOX','height=405,width=310'); return false;">
<font color="#FFFFFF">YOURTITLE</font></a></font></td>
</tr>


for each new entry u will add a new table row with the code above - just compare it to the code an u will easily see where it goes since all rows are one after the other (jukebox, radio, jukebox, etc etc)

There are 2 instances of mp3playerX u will name them accordingly - like for 60s u may want to name the file mp3player60s and for 70s ---> mp3player70s and so on and so forth.

Then where it says YOURTITLE in the code put ur custom text this is the link text.

Step 2: making multiple copies of certain files

For multiple MP3players simply make copies of the
- playlist.xml
- mp3player.html
files and name them the same as the above links like
playlist60s.xml
mp3player60s.html
playlist70s.xml
mp3player70s.html

And then inside EACH mp3playerX.html (where X is 60s, 70s etc) find the line flashvars:"file=playlist.xml
and change it to flashvars:"file=playlist60s.xml and flashvars:"file=playlist70s.xml respectively for each file with the same name

Finally u will have to open up the individual playlists and set the music inside each by specifiying file addy etc etc

hope that helps?