1

私は 2 つのカスタム フィールドがあり、どちらも画像 (または画像の URL) を格納する wordpress をインストールしています。

次に、画像を表示したいdivがありますが、最初の画像を表示したいので、次の画像にスクロールする素敵なボタンをいくつか用意します。

これまでの私のコードは次のとおりです。

<div>
        <?php 
        $front_cover = get_post_meta($post->ID, 'front_cover', true);
        $back_cover = get_post_meta($post->ID, 'back_cover', true);
        $artwork = $front_cover;

        if ($back_cover === '') {
            echo '<img src="'.$artwork.'" />';
        } else {
            echo '<img src="'.$artwork.'" />';

        ?>
                    <div class="artwork_controls">
                        <a href="#" class="sliderBtnPrev">Previous</a>
                        <a href="#" class="sliderBtnNext">Next</a>
                        <span class="sliderPagination">1 of 3</span>
                    </div>

        </div> 
<?php } ?>

ご覧のように。私のIfステートメントは、back_coverにコンテンツがあるかどうかをチェックします...コンテンツがない場合は、front_coverのみを表示します。back_cover にコンテンツがある場合は、表紙を表示し、ユーザーがクリックして裏表紙を読み込むボタンを表示する必要があります。

私の考えでは、「前へ」ボタンと「次へ」ボタンを使用して $artwork 変数を動的に変更できると考えていましたが、PHP は既に処理されているため、それが可能だとは思いませんか?

このコードは完全に間違っている可能性がありますが、私が何をしようとしているのかわかると思いますか?

4

2 に答える 2

0

1 つの方法は、AJAX 呼び出しを実行し、[前へ] および [次へ] ボタンをクリックして画像を取得することです。ただし、すべての画像を最終的な html に配置し、残りのすべてを javascript といくつかの css で行うことができます。

2 つの画像を html に入れるだけで、「front-image」と「back-image」という ID があるとします。

<img id="front-image" src="imgs/front-cover.jpg"/>
<img id="back-image" src="imgs/back-cover.jpg" style="visiblity: hidden"/>

に注意してstyle="visibility: hidden"ください。それ以降onClickは、2 つの画像の可視性を設定するだけの [前へ] ボタンと [次へ] ボタンにハンドラーを設定できます。

clickHandlerPrev() {
    document.querySelector("#front-image").style.visibility = "";
    document.querySelector("#back-image").style.visibility = "hidden";
}

clickHandlerNext() {
    document.querySelector("#front-image").style.visibility = "hidden";
    document.querySelector("#back-image").style.visibility = "";
}

次に、ボタンは次のようになります

<a href="#" class="sliderBtnPrev" onclick="clickHandlerPrev">Previous</a>
<a href="#" class="sliderBtnNext" onclick="clickHandlerNext">Next</a>

私があなたの目標を正しく達成しているのであれば、多くの画像を反復するのではなく、それらの2つだけを切り替えるので、ボタンには単に「フロントカバー」と「バックカバー」という名前を付ける方がよいと思います.

于 2013-01-25T22:14:06.933 に答える
0 
<div>
    <?php $front_cover = get_post_meta($post->ID, 'front_cover', true); ?>
    <?php $back_cover = get_post_meta($post->ID, 'back_cover', true); ?>
    <?php $artwork = $front_cover; ?>

    <?php if ($back_cover === '') { ?>
        <img src="<?php echo $artwork; ?>" />
    <?php } else { ?>

        <img id="imgA" src="<?php echo $artwork; ?>" />
        <img id="imgB" src="<?php echo $back_cover; ?>" style="display:none;"/>
        <div class="artwork_controls">
            <span class="sliderBtnPrev" onClick="document.getElementById('imgA').style.display='none';document.getElementById('imgB').style.display='';">Show B</span>
            <span class="sliderBtnNext" onClick="document.getElementById('imgB').style.display='none';document.getElementById('imgA').style.display='';">Show A</span>
        </div>


    <?php } ?>
</div>
于 2013-01-25T22:15:00.200 に答える