help me make a simple slideshow! (2 posts)

  1. Ben Dunkle
    Posted 5 years ago #

    <div id="featuredPuppy_header"><h1>meet the puppies</h1></div><!--end puppy header-->
    <div id="featuredPuppy_content">
    <div id="puppyBig">
    <div id="puppyBigPic">
    while ( have_posts() ) : the_post();
    $mugshot = get_post_meta($postid, 'mugshot', true);
    echo wp_get_attachment_image($mugshot, array('316x316'));
    endwhile; ?>
    </div><!-- end puppyBigPic -->
    <div id="puppyBigInfo">
    Breed: <span id="petBreed"></span> Gender: <span id="petGender"></span> Color: <span id="petColor"></span>
    </div><!-- end puppyBigInfo -->
    </div><!-- end puppyBig -->
    <div id="puppyThumbs">
    while ( have_posts() ) : the_post(); ?>
    <?php $postid=$post->ID;
    $mugshot = get_post_meta($postid, 'mugshot', true);
    <div class="puppyThumb <?php if (get_post_meta($postid, 'gender', true)=='male'){echo 'blue';}?>">
    <a href="">
    $scriptpath = get_bloginfo('template_directory');
    $puppyThumb = wp_get_attachment_url($mugshot);
    echo '<img src="'.$scriptpath.'/scripts/timthumb.php?src='.$puppyThumb.'&w=83&h=83&zc=1" alt="" />'; //this method actually crops the image using timthumb
    <span><?php echo get_post_meta($postid, 'breed', true);?></span>
    </div><!-- end puppyThumb -->
    <?php endwhile; ?>
    </div><!-- end puppyThumbs -->
    </div><!--end featuredPuppy_content-->

    There's my code. I want the thumbs to change the big image. Working examplpe is here:
    When a thumb is clicked, it should change the big image and add the correct meta data to breed, color, and gender. I'm guessing ajax is the way to do this, but I'm spinning my wheels trying to find an answer.
    Thanks for any advice.

  2. Ben Dunkle
    Posted 5 years ago #

    Oh well, I figured it out-pretty cool actually. Ping me if you wanna see what I did.

Topic Closed

This topic has been closed to new replies.

About this Topic