Question

我有一个wordpress安装，我有2个自定义字段，它们都存储图像（或者更确切地说是图像的网址）。

然后我有一个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确实有内容，它应该显示封面，然后显示用户点击以加载封底的按钮。

我的想法是我可以通过'previous'和'next'按钮来动态更改$ artwork变量，但我不相信这可能因为PHP已经被处理过了？

这段代码可能完全错误，但希望你能看到我正在尝试做什么？

Answer 1

一种方法是在点击“上一步”和“下一步”按钮时进行AJAX调用并获取图像。然而，您可以将所有图像放在最终的html中，并使用javascript和一些CSS进行所有其他操作。

因此，如果您只是将两个图像放在html中，我们就说它们有“前图像”和“后图像”，所以你有这个

<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个处理程序，只需设置两个图像的可见性即可。

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>

虽然如果我的目标正确，我认为你的按钮更好地命名为“封面”和“封底”，因为你没有迭代大量的图像，而只是切换那两个。

Answer 2

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

更改图像onclick - Javascript按钮＆amp; AJAX？

2 个答案: