javascript - 从文件夹创建图库

Question

我创建了一个图片库和缩略图，当您单击它们时，大图像将替换为您单击的图像。目前我必须用 html 编写每个文件并为每个文件创建一个单独的 JS 脚本。这是我当前代码的示例:

图库:

        <img id="bigPicMarie" src="assets/Images/MariePeterWeddingImages/Edited/KJ4V7314edit.jpg" alt="banner" />
        <div class="captionBox">
            <p id="captionText"></p>
        </div>

        </div> <!-- end of bigPicMarieContainer -->
        <div class="floatFix"></div>

        <div id="thumbnails" >

            <div id="thumbContainerMarie">
                <a class="galleryLink" onclick="putPic141();">
                    <img class="landscape" src="assets/Images/MariePeterWeddingImages/KJ4V7314editthumb.jpg" width="100" alt="thumb" />
                </a>

                <a class="galleryLink" onclick="putPic142();">
                    <img class="portrait" src="assets/Images/MariePeterWeddingImages/MM_24083editthumb.jpg" width="100" alt="thumb" />
                </a>

                <a class="galleryLink" onclick="putPic143();">
                    <img class="landscape" src="assets/Images/MariePeterWeddingImages/MM_24089editthumb.jpg" width="100" alt="thumb" />
                </a>

JS:

 //Marie&PeterWeddingAlbum//
 function putPic141(){
document.getElementById('bigPicMarie').src = "assets/Images/MariePeterWeddingImages/Edited/KJ4V7314edit.jpg";
document.getElementById('captionText').innerHTML = 'IMG001';    
 }//end putPic141

 function putPic142(){
document.getElementById('bigPicMarie').src = "assets/Images/MariePeterWeddingImages/Edited/MM_24083edit.jpg";
document.getElementById('captionText').innerHTML = 'IMG002';    
 }//end putPic142

图库的示例:http://www.jamielouise.co.uk/portraits.html

我想要的是一种使画廊从指定文件夹中的所有图像自动生成的方法。理想情况下，我希望它以与当前相同的方式出现和运行。

Answer 1

首先，您需要读取文件夹中的所有图像并从中创建一个数组。 Php read directory file 中的解决方案.

如果您将全尺寸图像放在一个目录中，将缩略图放在另一个目录中，就会容易得多。否则，阵列构建将不得不检测带有 thumb 后缀的文件并采取相应行动。

使用手头的数组，执行 foreach并打印 HTML。注意单引号和双引号 have different uses in PHP .

/* Supposing an array like */
$images = array( 
       array( 'thumb' => 'thumb1url', 'full' => 'full1url' ), 
       array( 'thumb' => 'thumb2url', 'full' => 'full2url' ) 
);

echo '<div id="thumbContainerMarie">' . "\r\n";
$id_num = 1;
foreach( $images as $img )
{
    printf(
        '<a class="galleryLink" id="%s" onclick="%s"><img class="landscape" src="%s" width="100" alt="thumb" /></a>', 
        'galLink' . $id_num,
        "putPic('" . $img['full'] . "');",
        $img['thumb']
    );
    echo "\r\n";
    $id_num++;
}
echo '</div>';
?>
<script type="text/javascript">
function putPic( url )
{
    alert( url );
}
</script>

这将创建以下 HTML。注意只使用了一个 JS 函数，我们需要传递给它的值:

<div id="thumbContainerMarie">
<a class="galleryLink" id="galLink1" onclick="putPic('full1url');"><img class="landscape" src="thumb1url" width="100" alt="thumb" /></a>
<a class="galleryLink" id="galLink2" onclick="putPic('full2url');"><img class="landscape" src="thumb2url" width="100" alt="thumb" /></a>
</div>
<script>etc...