Loop with slider (slider not loading)

Question

In my slider.php I have a loop that calls for a custom post type. That custom post type has a meta box for a slide url (link/title/etc). I can see the loop and everything else is working because in the source code it shows the corrent url from the meta box. But it will NOT load the slider. But lets say I drop a direct path to an image OUTSIDE the loop, the slider will work/load, and it will load the dynamic image from the metabox(as the second slide).

It seems, and I know this is wrong, but its almost as if the image from the metabox is being loaded after the script for the slides. So it will not see that an image exists and will not execute the js code for slides.

My head has the correct js function.

My meta box and post type are wokring and saving.

My home template which has include 'slider.php'. (below)

<div id="slides_wrap">
  <div id="slides_frame"> <!-- frame -->
    <div id="slides">

      <?php include 'slider.php'; ?>

      <!-- pagination things -->
    </div>
  </div> <!-- frame -->
</div> <!-- slides wrap & shadow-->

My slider.php which has

<!-- start slider -->
<?php $args = array( 'post_type' => 'home_slider', 'posts_per_page' => 10 ); ?>
<?php $loop = new WP_Query( $args ); ?>

<div class="slides_container">
  <?php // query the "slider" custom post type and import its posts into the slider ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

  <?php $slide_img_src = smc_get_the_slide_img_source(); ?>

    <a href="#" title="Dum Slider 1" target="_blank"><img src="<?php echo $slide_img_src; ?>" class="max-image" width="" height="" alt="Slide 1"></a>

  <?php endwhile; ?>

<!-- if i add this below the slider will work and use this image below first (then load the loop???)
<a href="#" title="#" target="_blank"><img src="http://smc-collective.com/okay/images/sliders/dum_slide_2.png" class="max-image" width="" height="" alt="Slide 1"></a> -->

</div>
<!-- end slider -->

The slide.js file (the functions for slides) is also loading (obviously), and is being en-queued in the footer.

Im racking my brain, and php is NOT my strong point. I feel like I just cant figure it out, or what to even search for. Thanks in advanced.

Edit - If you need to see any more code, let me know. I dont know what else could be causing the problem.

Answer 1

The simplest explanation is that the HTML rendered in your code does not match what you're actually looking for. Without seeing the JS responsible for the slider, it's impossible to say where you went wrong, but you should compare the mocked-up version (that works) with what you're actually getting (HTML source after page render) to see if there were any typos or other potential mistakes.

Another possibility is that, although the URL to your image is correct, it has some strange character in there. Since you're doing this within an HTML attribute, I would suggest running your echo statement through sanitization using esc_attr():

<a href="#" title="Dum Slider 1" target="_blank"><img src="<?php echo esc_attr($slide_img_src); ?>" class="max-image" width="" height="" alt="Slide 1"></a>

If possible, would you mind sharing the slider code?

Answer 2

This line looks like a problem

<?php $slide_img_src = smc_get_the_slide_img_source(); ?>

Maybe you should have

<?php $slide_img_src = $smc_get_the_slide_img_source; ?>

Since $smc_get_the_slide_img_source is not a WordPress function, what is it doing?

It should be fetching your meta box, something like :

$smc_get_the_slide_img_source = get_post_meta($post->ID, 'image_field', true);

Answer 3

Maybe you should ensure the that the connector of your markup with slider has to run after jquery and after the slide.js

Priorities should be: 1. jQuery 2. Slide.js 3. the connection of the markup and the script.

Good luck! If you need any help, keep us posted!