Home » Wordpress » Php WordPress Gallery

Php WordPress Gallery

Posted by: admin November 30, 2017 Leave a comment

Questions:

i’m trying to get a slider to feature my images that are in a post. I currently have everything set up but I only have one li element that is showing all three images. I’d love to have three li elements each showing one image but I can’t figure out how to automatically isolate each image. Any help would be greatly appreciated!

you can see the current state here:
http://mksgear.com/shop/test-product/

this is what my code looks like:

<ul class="slides">

  <li class="slide">

<?php if ( has_post_thumbnail() ) : ?>

    <?php echo do_shortcode(''); ?>


<?php else : ?>

    <img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />

<?php endif; ?>

  </li>
</ul>
Answers:

I’m not sure I understand your question correctly, but I’ll give an answer a go. If I have misunderstood what you’re trying to do please clarify it for me and I’ll update my answer.

You can use itemtag="li" inside the gallery shortcode to wrap each image in an li. You’d need to remove your <li class="slide"> line of code, and maybe use jQuery to add the “slide” class back to the generated li tags. So you could do something like this:

Also, does your code render the gallery when using the : in the if/else statement?

<script>
jQuery(document).ready(function() {
    jQuery("#slides li").addClass("slide");
});
</script>

<ul class="slides">

    <?php if ( has_post_thumbnail() ) { ?>

        <?php echo do_shortcode(''); ?>

    <?php } else { ?>

        <img src="<?php get_bloginfo( 'stylesheet_directory' ); ?>/images/thumbnail-default.jpg" />

    <?php } ?>

</ul>

Add this you your footer, you can add it inside the same document.ready as the jQuery to add the class slide. Just copy and paste this on a new line right after jQuery("slides li").addClass("slide");. You can adjust the height, width, or any other options in this call if you need to. This will hopefully work.

jQuery("#slides").advancedSlider({
width: 900, 
height: 460, 
responsive: 1, 
skin: 'light-round'
});

Leave a Reply

Your email address will not be published. Required fields are marked *