Hi,
Demo - look on the left side until you see it (http://path-to-peace.com/forum2)
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 :P
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.
<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:
<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:
<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 (http://path-to-peace.net/misc/flash_media_player.zip), 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. (http://www.jeroenwijering.com/)
As for the radio, you will need to install thie mod for SMf called SMF radio: Download here (http://path-to-peace.net/misc/smf_radio_v0.6.zip) - install it normally via package manager.
As for webTV all you have to do for that is upload this file (http://path-to-peace.com/forum/webtv.html) 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)
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fpath-to-peace.com%2Fforum%2Fmc_top.gif&hash=f4730c10effd8061c27f761e72f6d8cb53bf6d82)
and
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fpath-to-peace.com%2Fforum%2Fmc_bottom.gif&hash=372bb50775630634f04e6c2ff9b43882786cb36f)
============================================================
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
<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 ';
<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 (http://path-to-peace.net/misc/main.js)
-style.js (http://path-to-peace.net/misc/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 (http://dynamicdrive.com/dynamicindex5/popinfo.htm) 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 :P 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.
OMG, I do this when the Wizard of Oz gives me a brain :up: You rock Aku! 8)
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 great though!
Quote from: Aku on December 23, 2006, 06:34:29 AM
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 :o
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.
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
QuoteMy 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 :)
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?
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
<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?
Have everything up and running the way I wanted it and just want to say thank you for taking the time.
glad u got it working :up:
its one of those things u have to work on but the fruits are sweet :D
Hi Aku. My first time here on the boards. Really a helpful place. Anyway, I have been looking over this media center ya have and am wondering...
I am opening a site that will offer felines in shelters up for adoption all over the land. I will need an aparatus to do the slide show for the individual cases.
will this media center work as such for my needs? Can i store the image files in a folder, so I can rotate them out regularly?
An audio stream along with the show would be a nice touch. And when they wish to stop and look at one creature in particular, how would they do that if this would apply to my needs?
Which parts would i need to use for this? and how big can I make the screen.
Sorry to be so much work here, but I need something like this great idea for my application on the home page to be seen as they enter the site.
This is important to me , to get them into homes and out of the cages. Many thanks for all the help you can be here Aku.
Dave.
Oh the media center is just a 'setup' to make things look better rather than just ordinary links on a page.
What you are asking is a completely different thing.
- Slideshows: there are DHTML slideshows available, AJAX slideshows and Flash slideshows as well. I believe I listed a frontpage slideshow block in the block code snippets, u can have a look at that for a slideshow if u need one.
- As for audio along with the slideshow, personally the only way I know of doing that would be with flash.
So I dont know if the media center will really be helpful to you for what you need really.
Many Thanks Aku. I will look for the snippet you mentioned.
Dave.
Hi
Did you ever find or make a script like u were saying would rock, the youtube style one.
Database driven
I would pay for a script like that.
Hi WMILES.
Well, I did a little shopping on the net and there are a few freebie outlets out there. But So Far, when it comes to setting something like this up, I'm a bit 'Tragically Inept' LOL.
RebelRose, Stepped in and helped me out. She Found a great Lil Script that once she put it in and made a few adjustments, I had what I needed. And it is expandable too as i found out.
I hope i wont get a whoopin' on the site here for saying that. But, I know the Feeling of desparation and its just good to have a friend who will step in , in a pinch and save the day. Again, Many thanks Rose.
Dave/Vancat.