CODEWITHSUNDEEP
phptwitter-bootstrap
user2377927
user2377927

Reputation: 25

Twitter Bootstrap Carousel: Display a clicked image in Modal Popup

I am trying to display an image from my Twitter Bootstrap Carousel in a popup modal so I can allow the viewer to print an image they like. Right now, when I click on any carousel image, the modal always shows only the last image in my array rather than the image actually I clicked on.

My carousel code inside my carousel-inner class is:

<?php
foreach($photos as $photos):
  $image_now = $photos->image_path();
  <div class="item">
      <a href="#launch" data-toggle="modal">
        <img src="../<?php echo $image_now; ?>"  />
      </a>
  </div>
  <?php 
endforeach; 
?>

And my #launch modal code is:

<section id="launch" class="modal hide fade">
  <div id="printThis">
    <div class="modal-body">
        <img src="../<?php echo $image_now; ?>"  />
    </div>
  </div>
</section>

Following Skelly's advice, I have now set up a second loop with unique launch id's. This results in the the first photo not getting displayed in the modal but the second one will. (Note: the $photo loop above uses the $i counter and this loop for the modal uses $j counter):

$j = 0;
foreach($photos as $photos): 
  $j++;
  $launch = "launch" . $j;  
  if ( $i == $j ) {  ?>
    <section id=<?php echo $launch; ?> class="modal hide fade">

    <div id="printThis">
      <div class="modal-body">
            <img src="../<?php echo $image_now; ?>"  />
      </div>
    </div>

  </section>
  <?php 
  } 
endforeach;

Upvotes: 1

Views: 5962

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

Are you looping through $photos to create each modal?

Each section should have a unique id (ie:launch1,launch2,etc..) that is referenced by the href="#launch.." in your .item DIVs

Here's a demo: http://bootply.com/61231

Upvotes: 2

Related Questions