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...

从文件夹创建库

1 个答案: