1

I just tried to include a bootstrap powered carousal with thumbnail for my product slider. Some how I am able to do that for the main image (big image) but I am not able to fix the issues for thumbnail part.

This is html version which i am trying to change to Wordpress http://codepen.io/RetinaInc/pen/rxksh

The top part is now working so i tried similar approach for thumbnail slider part but couldn't fix it running the code below as it is gives syntax error so remove thumbnail part and replace it with html then main slider works. but i want the thumbnail slider to work with it.

<?php get_header();?>
  <div class="container">
  <div class="content">
  <div class="row">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
      <?php
          $image_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
          $attachments = get_posts( $image_args );

          if ( $attachments ) {
              $i = 1;
              foreach ( $attachments as $attachment ) {?>

                <div class=
                  <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) {
                      echo 'active';
                    }
                    $i++;
                    echo '"';
                    ?>>
                <?php
                    echo wp_get_attachment_image( $attachment->ID, 'image' );
                    ?>
                </div>
                <?php

              }

            }  



      ?>

            </div>
        </div>

        <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">

                <?php
                $thumb_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
                $thumb_attachments = get_posts( $thumb_args );
                 if ( $thumb_attachments ) {
              $i = 1;
              foreach ( $thumb_attachments as $thumbattachment ) {?>

              <?php

                }

                ?>
              <?php

                if (($count % 4) == 0) 
                    {
                ?>
                    <div class=
                    <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) {
                      echo 'active';
                    }
                    $i++;
                    echo '"';
                    ?>> 
                    <?php $count= 1;?>
                    <div data-target="#carousel" data-slide-to="<?php echo $count++; ?>" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>

                    <?php $count++;?>
                    </div><!-- /item -->

                <?php
                    }
                ?>


            </div><!-- /carousel-inner -->
            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- /thumbcarousel -->
    </div><!-- /clearfix -->
      </div> 



    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
                <div class="item active ">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item ">
                    <img class="image" src="img/doubleRound/top.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/bottom.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front_side.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
            </div>
        </div> 
    <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
                <div class="item active">
                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
                </div><!-- /item -->
                <div class="item">
                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                </div><!-- /item -->
            </div><!-- /carousel-inner -->
            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- /thumbcarousel -->
    </div><!-- /clearfix -->
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
        <h2>Products</h2>
             <h3><?php the_title_attribute(); ?>: </h3>
        <p><?php the_content(); ?></p>


    </div> <!-- /col-sm-6 -->
            <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
  </div> <!-- /row -->
  </div>
</div> <!-- /container -->

<?php get_footer();?>
13
  • where have you assigned value for "$current_featured_image_id"?? shouldnt it be "get_post_thumbnail_id()" ?? 'exclude' => get_post_thumbnail_id(),
    – wingskush
    Jul 7, 2014 at 11:36
  • @wingskush its not needed in this case. So i left that. Actually it just exclude the featured image from the carousal.
    – Robin
    Jul 7, 2014 at 11:38
  • "<div class= <?php echo '"'; echo 'item '; if ($i == 1) { echo 'active'; } $i++; echo '"'; ?>>"?? why are you making this complex? <?php if($i == 1){ ?> <div class="item active"> <?php } else{ ?> <div class="item"> <?php } $i++ ?>
    – wingskush
    Jul 7, 2014 at 11:40
  • @wingskush You want to get idea or you think its useless. that code echo active class only to first element. Do you know alternative?
    – Robin
    Jul 7, 2014 at 11:43
  • why does this loop exist if you have nothing to do with it? you have just closed it randomly? foreach ( $thumb_attachments as $thumbattachment ) {?> <?php } ?>
    – wingskush
    Jul 7, 2014 at 11:43

1 Answer 1

1

Your code will work if you do it in simpler manner as wingskush have suggested with addition of another variable.

after

$thumb_attachments = get_posts( $thumb_args );

do

if ( $thumb_attachments  ) {
$j = 1; $count = 0;

after

foreach ( $thumb_attachments as $thumbattachment ) {?>

use

if (($count % 4) == 0) 
 {                             
  if ($j == 1) {

           echo '<div class="item active">';
             }
             else
             {
            echo '</div><!-- /item --><div class="item">';
              }
             $j++;

      ?>

This worked when i tried.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.