1

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

然后我有一个 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

一种方法是在单击“上一个”和“下一个”按钮时进行 AJAX 调用并获取图像。但是，您可以将所有图像放入最终的 html 中，然后使用 javascript 和一些 css 完成所有其余操作。

因此，如果您只是将这两个图像放在 html 中，假设它们具有“正面图像”和“背面图像”的 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“上一个”和“下一个”按钮上设置处理程序，它们只是设置两个图像的可见性。

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>

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

于 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 回答