3

画像のギャラリーを作成しました。サムネイルをクリックすると、大きな画像がクリックした画像に置き換えられます。現在、各ファイルを 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

私が欲しいのは、指定されたフォルダー内のすべての画像からギャラリーを自動的に生成する方法です。理想的には、現在と同じように表示され、機能することを望みます。

4

1 に答える 1

2

まず、フォルダー内のすべての画像を読み取り、そこから配列を作成する必要があります。Php read directory fileのソリューション。

フル サイズの画像を 1 つのディレクトリに、サムネイルを別のディレクトリに格納すると、はるかに簡単になります。それ以外の場合、配列の構築は、thumbサフィックスを持つファイルを検出し、それに応じて動作する必要があります。

配列を手元にforeach置いて、HTML を実行して印刷します。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 関数を 1 つだけ使用していることに注意してください。

<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...
于 2013-09-23T11:45:14.640 に答える