PHP:如何加载具有特定包含的网页?

时间:2014-02-15 19:38:08

标签: php html include file-handling

我正在开展一个项目,在这个项目中我有不同目录中的音频,视频和图片文件,并希望为这些文件编写一个简单的Web界面。到目前为止,我的一切工作都非常好,照片由灯箱显示,音频和视频由jPlayer播放。

我有一个像这样的目录结构

ARCHIVE/
    _RES/
        CSS/
        JPLAYER/
        LIGHTBOX/
    index.php       #this is the start page with links to the other index.php files 

    VIDEO/

    PICTURES/
        ALBUM1/
            IMG/
            T_IMG/
            index.php
        ALBUM2/
            IMG
            T_IMG/
            index.php
        ALBUMn/
            IMG/
            T_IMG/
            index.php

    AUDIO
        ALBUM1
            index.php
            OGG/
                SONG#1.ogg
                SONG#n.ogg
                SONG FUN. ogg
            MP3/
                SONG#1.mp3
                SONG#n.mp3
                SONG FUN.mp3

我现在的问题是,当我想要更改某些内容时,例如,在音频播放器中,我必须编辑AUDIO内每个ALBUMx /目录中的每个index.php。

我确信有一个更简单的方法:不是有很多index.php文件,只有一个index.php文件,当我点击链接时,AUDIO - > ALBUM1它自动加载一个显示音频播放器的.html文档,并用我选择的专辑中的音频文件填充播放列表。

这是我的AUDIO ALBUM index.php的示例代码。

图片和视频的相似,除了具有不同的播放器选项,例如对于视频,或者,如果是图片,则实施灯箱。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">


 <link href="/archive/_res/style.css" rel="stylesheet" />

<?php
    $parent = dirname(dirname($_SERVER['SCRIPT_NAME'])) . '/';
    $dirname = basename(__DIR__);
    echo '<title>'.$parent.$dirname.' </title>';
?>

<link href='http://fonts.googleapis.com/css?family=Raleway:100,400' rel='stylesheet' type='text/css'>

<!-- JPLAYER AUDIO VIDEO -->

<!--link type="text/css" href="../../_res/jplayer/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" /-->
<link type="text/css" href="../../_res/jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="../../_res/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="../../_res/jplayer/jplayer.playlist.min.js"></script>


<?php
$mp3folder = 'mp3/';
$oggfolder = 'ogg/';
$filetype = '*.*';
$mp3files = glob($mp3folder.'*.mp3');
$oggfiles = glob($oggfolder.'*.ogg');
echo '
<script type="text/javascript">
    $(document).ready(function(){
    new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [';


for ($i=0; $i<count($mp3files); $i++) {
    $namerr[$i] = substr($oggfiles[$i],strlen($oggfolder),strpos($oggfiles[$i], '.')-strlen($oggfolder));
    echo '{'."\n";
    echo 'title:"'.$namerr[$i].'",'."\n";
    echo 'mp3:"'.dirname($mp3files[$i]).'/'.rawurlencode(basename($mp3files[$i])).'",'."\n";
    echo 'ogg:"'.dirname($oggfiles[$i]).'/'.rawurlencode(basename($oggfiles[$i])).'",'."\n";
    echo 'free: "true"'.','."\n";
    echo 'poster:"'.$mp3folder.'cover.png",'."\n";
    echo '},'."\n";
}
echo '
    ], {
        swfPath: "../../_res/jplayer",
        supplied: "ogg, mp3",
        wmode: "window",
        size: {
            width: "300px",
            height: "300px",
            cssClass: "jp-video-240p"
        },
        smoothPlayBar: true,
        keyEnabled: true
    });
});
</script>';

?>


<!-- JPLAYER AUDIO VIDEO //-->


<script>
            function bottop (div_id) {
              $('#'+div_id).animate({top:"-=140"},500, 'swing');
            }

            function topbot (div_id) {
              $('#'+div_id).animate({top:"+=140"},500, 'swing');
            }

            function fade_in (div_id) {
                      $('#'+div_id).fadeIn(0);
                }

            function fade_out (div_id) {
                      $('#'+div_id).fadeOut(0);
                }            

</script>

</head>
<body>

<div id="shownav" class="shnav">
    <span class="thinl4 db" onclick="topbot('topper');fade_out('shownav');">Show Navigation bar!</span>
</div>
<div id="topper">
    <div id="hidenav" class="shnav">
        <span class="thinl4 db" onclick="bottop('topper');fade_in('shownav');">Hide Navigation bar!</span>
    </div>

    <div id="backtoarchive" class="fl thinl">
        <table id="keks">
            <tr>
                <td class="bif"><</td>
                <td id="bli"><a href="#" class="blalis">Back to Archive</a></td>
            </tr>
        </table>
    </div>

    <?php include '/var/www/webaccount/html/archive/_res/nav.php'; ?>

    <?php
        $parent = dirname(dirname($_SERVER['SCRIPT_NAME'])) . '/';
        $dirname = basename(__DIR__);
        echo '<div id="where" class="fl">';
        echo 'You are here: <em>'.$parent.$dirname.'</em>';
        echo '</div>';
    ?>

</div>

<div id="jplayer-wrap">
    <div id="jp_container_1" class="jp-video jp-video-270p">
            <div class="jp-type-playlist">
                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                <div class="jp-gui">
                    <div class="jp-video-play">
                        <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                        <!-- added style below to fix floating issue (default was clear:both by css) -- not important to code function -->
                        <div class="jp-controls-holder" style="clear:left;">
                            <ul class="jp-controls">
                                <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                            </ul>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                            <ul class="jp-toggles">
                                <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
                                <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
                                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                                <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                            </ul>
                        </div>
                        <div class="jp-title">
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="jp-playlist">
                    <ul>
                        <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                        <li></li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
</div>

</body>
</html>

我想我必须制作包含jplayer / lightbox内容和<?php include .. ?>内容的单个“模块”并让它加载正确的文件。 所以当我点击AUDIO的链接时 - &gt; ALBUM1的html / php链接应该加载类似的东西 index.php?load=audio,files=audio/album1

如果有人对我有暗示,那就太棒了! 这是我的第一个PHP项目,我很想学习!

谢谢你, 文森特。

0 个答案:

没有答案