Question

I’m have a wordpress installation where i have 2x custom fields, that both store images (or rather the urls for the images).

I then have a div that i want to display the images in. but i want to display the first image, then have some nice buttons that will scroll to the next image.

My code so far is below:

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

As you can see. my If statement checks if the back_cover has any content… if it doesn’t it displays the front_cover only.
If the back_cover does have content it should display the front cover and then the buttons that the user clicks to load up the back cover.

My thinking was that i could get the ‘previous’ and ‘next’ buttons to dynamically change the $artwork variable, but i don’t believe that’s possible as the PHP would have already been processed?

This code could be completely wrong, but hopefully you can see what i’m trying to do?

Answer 1

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