[Bootstrap] Wordpress thumbnails in carousel

[AvWijk]

Ik ben met Bootstrap een Wordpress theme aan het bouwen. So far so good, waar ik alleen tegenaan loop is het vullen van de carousel en dan met name de active slide en indicators (voorbeeld statische versie hier: http://getbootstrap.com/examples/carousel/). De carousel wordt gebruikt voor het tonen van afbeeldingen die bij een 'single post' zijn geupload. Ik maak liever geen gebruik van een plugin.

De carousel moet ongeveer zo gaan werken, met indicator bolletjes voor de hoeveelheid images en previous/next om ertussen te kunnen navigeren. Verder de active class om aan te geven of een slide momenteel actief is.

HTML:

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        
         <div class="item active">
          <img src="plaatje.jpg" alt="First slide">
          <div class="container">
        
          </div>
        </div>
    
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->

Vanuit WP kan ik in ieder geval de attached media (afbeeldingen) inladen:

PHP:

       <div class="carousel-inner">
                                                                                                              <?php
                                    $argsThumb = array(
                                        'order'          => 'ASC',
                                        'post_type'      => 'attachment',
                                        'post_parent'    => $post->ID,
                                        'post_mime_type' => 'image',
                                        'post_status'    => null
                                    );
                                    $attachments = get_posts($argsThumb);
                                    if ($attachments) {
                                        foreach ($attachments as $attachment) {
                                            
                                            
                                            
                                            //echo apply_filters('the_title', $attachment->post_title);
                                            echo '<div class="item active">';
                                                echo '<div class="col-nofloat">';
                                                echo '<div class="col-nofloat largeimage thumbnail" style="height: 400px; width: 100%; background: url('.wp_get_attachment_url($attachment->ID, 'thumbnail', false, false).'); background-size: cover; background-position: center;"></div>';
                                                
                                    
                                                echo '</div>';
                                            echo '</div>';
                                        }
                                    }
                                    ?>
                                    
                                  </div> <!-- carousel - inner -->

Waar ik alleen op vastloop zijn de "active" slide en de indicators.. wie helpt?

[HamuNaptra]

Je hebt blijkbaar zelf al het moeilijkste werk verricht.

- Maak nog even een foreach loop boven de huidige om de indicators aan te maken
- Gebruik in beide foreach loops een vlag om bij de eerste run de active class toe te voegen
- Completeer de HTML code voor de carousel rond je 2 foreach loops

Lijkt me duidelijk toch?

[AvWijk]

Inmiddels opgelost..

[ Voor 88% gewijzigd door AvWijk op 18-07-2014 01:52 ]