Jquery工具覆盖：php foreach循环不工作

我将Jquery工具的覆盖图放在我的站点中，以在多个覆盖图中显示一个项目的信息。这很好用，但我一直在尝试“自动化”代码，以读取新项目并将其加载到覆盖层中。发生的事情看起来没问题，但无论我单击哪个项目，覆盖始终加载第一个项目的内容

我做了大量的谷歌搜索和复制粘贴来达到这个目的，我（还）不是一个程序员，我希望代码不会吓到你们…-）

无论如何，这里有一个链接：

如果单击“Projects”，将打开一个普通div，加载它找到的所有项目（目前为两个）。当您单击其中一个时，它将在3个覆盖中打开该内容。如上所述，不幸的是，它总是加载相同的内容，而与您单击的项目无关

我曾尝试为JScript分配一个唯一的函数名（使用php从项目文件名生成），但这似乎不起作用

有什么想法吗？这是我的密码：

<?
    //reads projectfolder and distills 
    //a basename out of the project description.txt 
    $textfiles = glob('content/projects/*.txt', GLOB_BRACE);
    foreach ($textfiles as $textfile) { ?>
        <div id="details"> <?
            $pad = pathinfo ($textfile);
            $base_name = basename($textfile,'.'.$pad['extension']);

            // the link that opens the overlays. Don't think the "id" tag is nescessary
            echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?>   

            <!-- defines overlay, hidden by default -->
            <div id="dragwindow1" class="overlay ol1">
                <a class="close"></a>
                <?
                    include ('content/projects/'.$base_name.'/content.txt'); 
                ?>
            </div> 
        </div> 
        <?
        // the description of each project
        include ($textfile);
        ?>

        <script> 
            // within the foreach open all overlays with function name $base_name
            var <?=$base_name?> = function () {
                $("a[rel]").each(function() {
                    $(this).overlay().load();
                });
            }

        </script>
        <hr />
    <? } //end foreach ?>
</div> 

<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work -->
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an>
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a>
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a> 

<script type="text/javascript">
$(function projects() {
    // positions for each overlay
    var positions = [
        [120, '15%'], //uppper left, #1
        [70, '60%'], // lower left, #2
        ['60%', '40%'], // lower right, #3
    ];

    // setup triggers
    $("a[rel]").each(function(i) {

        $(this).overlay({
            // common configuration for each overlay
            oneInstance: false,

            // setup custom finish position
            top: positions[i][0],
            left: positions[i][1],
        });
    });
});
</script>

解决了！在一位朋友的大力帮助下，他重新定义了Jquery工具中的多个覆盖如何工作（并且应该首先工作…）

在不做太多讨论的情况下，以下代码供将来参考：

基本上，诀窍是：

// open all overlays
function openAll(currentOverlays) {
    $(currentOverlays).each(function()
    {
        $(this).overlay().load();
    });
}

现在，整个页面如下所示：

<script type="text/javascript">
$(function () {
    // positions for each overlay
    var positions = [
        ['60%', 540], // lower right, #3
        [80, '65%'], // lower left, #2
        [120, '12%'], //uppper right, #1

        ];

    // setup triggers
    $("div.overlay").each(function(i) {
        $(this).overlay({
            // some configuration for each overlay

            // positioning the overlays
            top: positions[i % 3][0],
            left: positions[i % 3][1]
        });
    });
});

// open all overlays
function openAll(currentOverlays) {
    $(currentOverlays).each(function()
    {
        $(this).overlay().load();
    });
}

// close all overlays
function closeAll(currentOverlays) {
    $(currentOverlays).each(function()
    {
        $(this).overlay().close();
    });
}
</script>

<div id="projectstarter">
    <h2>Projects</h2>

    <div class="maindetails">
        <a class="close"></a> <!-- defines a close button for the overlay -->

        <?
        $textfiles = glob('content/projects/*.txt', GLOB_BRACE);
        rsort($textfiles);
        foreach ($textfiles as $textfile) { 

            $pad = pathinfo ($textfile);
            $base_name = basename($textfile,'.'.$pad['extension']);
            echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">';
            echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>';
            include '$textfile'; //project description

         } // end MAIN foreach ?>
    </div>
</div>

<div id="projects"> 
<?
foreach ($textfiles as $textfile) { 
        $pad = pathinfo ($textfile);
        $base_name = basename($textfile,'.'.$pad['extension']); ?>
            <div id="dragwindow3" class="<?=$base_name?> overlay ol3">
                <a class="close"></a>
                <h2>Media</h2>
                <div class="details">
                    // include media here
                </div>             
            </div>


            <div id="dragwindow2" class="<?=$base_name?> overlay ol2">
                <a class="close"></a>
                <h2>Credits</h2>
                <div class="details">
                    // include credits here
                </div>
            </div>

            <div id="dragwindow1" class="<?=$base_name?> overlay ol1 ">
                <a class="close"></a>
                <h2>Content</h2>
                <div class="details">
                    // include content here
                </div>
            </div>

    <? } ?>
<script>
    $( "#projectstarter" ).overlay();
    $( "#projectstarter" ).draggable().resizable({ghost: true});
    $( ".ol1" ).draggable().resizable({ghost: true});
    $( ".ol2" ).draggable().resizable({ghost: true});
    $( ".ol3" ).draggable().resizable({ghost: true});
</script>


$（函数（）{
//每个叠加的位置
变量位置=[
[60%'，540]，//右下角，#3
[80，'65%'，//左下，#2
[120，'12%']，//uppper right，#1
];
//设置触发器
$（“div.overlay”）。每个（函数（i）{
$（此）.overlay({
//每个覆盖的一些配置
//定位覆盖层
前：职位[i%3][0]，
左：职位[i%3][1]
});
});
});
//打开所有覆盖层
函数openAll（currentOverlays）{
$（currentOverlays）。每个（函数（）
{
$（this.overlay（）.load（）；
});
}
//关闭所有覆盖层
函数closeAll（currentOverlays）{
$（currentOverlays）。每个（函数（）
{
$（this.overlay（）.close（）；
});
}
项目
';
包括“$textfile”//项目说明
}//结束主foreach？>
嗯。。。我应该重新措辞这个问题吗？有什么不清楚的吗？