Ok - I've used the script from the VESPA site as a starting point to get the script working. I should point out that I didn't have to make any changes to the PHP code, just the style settings.
Create a new file called
index.php then copy-and-paste the following code into it:
Code: Select all
<?php
/****************************************************************************
VESPA 0.7.3 - VEry Simple Parser for directories with Audio files - 15.05.2010
by Dieter Willinger - http://vespa.willinger.cc
****************************************************************************/
// VESPA needs to figure some things out first
$weburl = $HTTP_GET_VARS["dir"]; // VESPA reads the URI
$weburl = "/" . $weburl;
$replacement = '';
$getcwd = getcwd(); // VESPA checks out the working directory
if ($weburl != '') { $weburl = str_replace( "/..", $replacement, $weburl); } // VESPA purges the URI from '/..' to ensure security
if (empty($absolute_dir)) { $absolute_dir = $getcwd; } // If no value was handed over the directory is set
$absolute_dir = realpath($getcwd . $weburl); // Absolute path without '/..' to the MP3s is built
$weburl = str_replace($getcwd, $replacement, $absolute_dir); // VESPA extracts the Web-URL from the absolute path to have a nice URL to pass on
$dir = opendir($absolute_dir); // VESPA opens the absolute directory
$domain = $_SERVER['SERVER_NAME']; // The domain is found
$maindirectory = $_SERVER['PHP_SELF'];
$scriptplace = $_SERVER['SCRIPT_FILENAME']; // The name of this script is found
$scriptname = str_replace($getcwd, $replacement, $scriptplace); // The exact name of this script is extracted
$webdir = str_replace($scriptname, $replacement, $maindirectory); // The name of the web directory containing this script is extracted
$testrun = $absolute_dir . $scriptname; // VESPA builds a possible location for this script for a later check whether true
$basename = basename($absolute_dir);
$parent_weburl = str_replace($basename, $replacement, $weburl); // VESPA builds URI for parent directory
// HTML starts here
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>VESPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MP3 files" />
<meta name="keywords" content="VESPA Script MP3 Audio" />
<meta name="robots" content="index,follow" />
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="header">
<h1><?php echo basename($absolute_dir) // VESPA outputs the current directory as name ?></h1>
</div>
<div class="directories"><ul>
<?php
$dirarray = array();
while ($entry = readdir($dir)) { // VESPA starts running through all files in the given directory
if ($entry == ".") { // VESPA doesn't want the root
continue;
}
$scan_dir = $absolute_dir . "/" . $entry; // VESPA builds absolute path for scanning
if(is_dir($scan_dir)) array_push($dirarray,$entry);
}
natcasesort($dirarray);
foreach ($dirarray as $entry) { //VESPA figures out what to do with this particular directory
if (($entry == "..") AND (file_exists( $testrun ) == '1')) { echo ""; }
elseif ($entry == "..") { echo "<li><a href=\"" . $PHP_SELF . "?dir=" . $parent_weburl . "\">" . $entry . "</a></li>\n"; }
else { echo "<li><a href=\"" . $PHP_SELF . "?dir=" . $weburl . "/" . $entry . "\">" . $entry . "</a></li>\n"; }
}
closedir($dir);
?>
</ul></div>
<div class="content">
<?php
$index = $absolute_dir . "/index.txt"; // VESPA reads the index.txt if available
if (file_exists($index)) {
echo "<div class=\"indextext\">";
$indextext = fopen($index,"r");
if ($indextext) {
while(!feof($indextext)) {
$text = fgets($indextext);
echo "$text";
}
fclose($indextext);
}
echo "</div>";
}
?>
<div class="mp3s">
<?php
// VESPA outputs a single MP3s
$filearray = array();
$handle = opendir($absolute_dir);
while (false !== ($file = readdir($handle))) {
if ($file == "." OR $file == "..") { continue; } // VESPA does not want the root or parent directory
if (strstr($file, ".mp3") OR strstr($file, ".MP3")) array_push($filearray,$file); // VESPA pushes the files into an array
}
natcasesort($filearray);
foreach ($filearray as $file) {
//Yahoo's Media Player requires an absolute Web-URL
echo "<div class=\"singlelink\"><a href=\"http://".$domain.$webdir.$weburl."/".$file."\">".$file."</a>";
// VESPA reads the MP3 text file if available
if (strstr($file, ".mp3")) { $mp3textfile = str_replace(".mp3", $replacement, $file); }
else { $mp3textfile = str_replace(".MP3", $replacement, $file); }
$mp3 = $absolute_dir . "/" . $mp3textfile . ".txt";
if (file_exists($mp3)) {
echo "<div class=\"mp3text\">";
$mp3text = fopen($mp3,"r");
if ($mp3text) {
while(!feof($mp3text)) {
$text = fgets($mp3text);
echo $text;
}
fclose($mp3text);
}
echo "</div>";
}
echo "</div>";
}
echo "</div>";
closedir($handle);
?>
</div>
</div>
<div class="footer">Powered by <a href="http://vespa.willinger.cc">VESPA</a></div>
</body>
</html>
then create a new stylesheet called - wait for it -
stylesheet.css and paste the following in to it:
Code: Select all
body {
font-family: Tahoma, Arial, Sans Serif;
font-size: 14px;
background-color: #ffffff;
}
a {
color: #003300;
text-decoration: none;
}
a.hover, a.active {
text-decoration: underline;
}
h1 {
font-size: 16px;
}
h2, h3, h4, h5, h6 {
font-size: 14px;
}
.main {
width: 792px;
}
.header {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 10px;
margin-bottom: 16px;
}
.directories {
border: 1px solid #ECFFD1;
background: #ECFFD1;
padding: 12px;
float: left;
width: 170px;
margin-bottom: 20px;
overflow: hidden;
}
.content {
width: 586px;
float: left;
margin-bottom: 20px;
margin-left: 10px;
}
.indextext {
border: 1px solid #ECFFD1;
padding: 12px;
clear: both;
margin-bottom: 10px;
}
.mp3s {
float: left;
border: 1px solid #ff0000;
padding: 12px;
clear: both;
}
.singlelink {
margin-bottom: 12px;
float: left;
width: 49%;
}
.mp3text {
margin-left: 20px;
font-size: 12px;
}
.footer {
border: 1px solid #ECFFD1;
padding: 4px;
clear: both;
width: 782px;
font-size: 10px;
text-align: center;
}
li {
margin-left: -10px;
margin-bottom: 10px;
}
img {
border: 0px;
}
If you look at the stylesheet you'll see that the
float: and
width: settings are applied to the .singlelink class. I also had to add a
float: setting to the .mp3s class because it wasn't encapsulating the "singlelink" divs (which was obvious because the border didn't extend around all the filenames.) The .mp3s class already has a
clear: setting so you don't need to manually generate one.
With a bit of luck that should work for you! If you want to change the number of columns then you just need to change the
width: setting in the .singlelink class to match the number of columns (IE if you want two columns then the width of each is 49%, for three it's 33%, etc.)
M_G