3

here's my problem.

I'm getting some strange behavior on wordpress and magic fields coupled with the anything slider. The main issue is that the thumbnails images that I'm trying to load into the slider are doubling up in the content. As well, the actual images in being loaded in from the wordpress content load up twice, instead of just once. Difficult to describe, so it's probably best if you take a gander at my code, thank you.

    <div class="posts">
        <div class="slider" id="slider1">
        <?php 
            $loop = new WP_Query(array('post_type' => 'printcontent', 'posts_per_page' => 50)); 
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <li>
            <?php the_content();?>
            <h1 class="caption1"><?php echo get('print_caption'); ?></h1>
            <div class="thumbnail1"><?php echo get_image('print_thumbnail'); ?></div>
        <?php endwhile; ?>
        </li>
        </div>
        <div class="current-caption1"></div>
    </div>

and then here's my call script.

<script>
var updateCaption1 = function(slider1){
    var cap = slider1.$currentPage.find('.caption1').html();
    $('.current-caption1')
        .html(cap)
        .fadeIn(200);
};

$('#slider1').anythingSlider({

      navigationFormatter : function(i, panel){
        return panel.find('.thumbnail1').html();
      },

    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider1) { updateCaption1(slider1); },

    // Callback before slide animates
    onSlideBegin: function(e, slider1) {
        $('.current-caption1').fadeOut(200);
    },

    // Callback when slide completes - no event variable!
    onSlideComplete: function(slider1) { updateCaption1(slider1); }

});
</script>

Thanks for any help that can be offered.

  • Is the thumbnail inside the panel being hidden using css? Why use li's inside of a div? LI's should be wrapped in a ul, or just replace the li's with divs. Do you have a demo you could share, the code above seems to be okay. – Mottie Dec 17 '11 at 22:03
  • What do your 'get_image' and 'get' methods do? Those are not WP core functions. – Tom Roggero Dec 23 '11 at 19:20
  • tom... those come from the magic fields plugin. They get custom field data – HandiworkNYC.com Jan 14 '12 at 05:19
  • Have you tried using get_posts() rather than WP_Query? – HandiworkNYC.com Jan 14 '12 at 05:20
  • Yeah, I tried that j-man. Lol, gave me even more problems. I've got things working on newer browsers now, but I'm having IE problems, so don't worry about helping me on this problem anymore, thank you. – Cameron Strandberg Jan 15 '12 at 07:39

1 Answers1

1
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <li>
            <?php the_content();?>
            <h1 class="caption1"><?php echo get('print_caption'); ?></h1>
            <div class="thumbnail1"><?php echo get_image('print_thumbnail'); ?></div>
<?php endwhile; ?>
</li>

I think AnythingSlider relies on a direct child <p><li><div> or anything else it can grab, and you have a little bit of a syntax error that may be causing the issue. Notice above that your </li> is after the endwhile. It should be inside the loop like this...

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <li>
            <?php the_content();?>
            <h1 class="caption1"><?php echo get('print_caption'); ?></h1>
            <div class="thumbnail1"><?php echo get_image('print_thumbnail'); ?></div>
        </li>
<?php endwhile; ?>

Let me know if this fixes your issue.