Gallery of images with Carousel Boostrap. name.jpg separated by, no db!

Question

Gallery of images with Carousel Boostrap. name.jpg separated by, no db!

Navigation

#1 by (1 votes)

0

I want to create a gallery of images using the bootstrap carousel, when saving the multiple images in db they go to the same "photos" column and are separated by "." (foto1.jpg, foto2.jpg, foto3.jpg) now I wish to display them in with the carousel.

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="uploads/<?php echo $foto_thumb; ?>" width="560px" alt="...">
              <div class="carousel-caption">
              </div>
            </div>
            <div class="item">
              <img src="uploads/image.php" width="560px" alt="...">
              <div class="carousel-caption">
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

php mysqli

asked by anonymous 14.04.2017 / 21:44

1 answer

EditText with same size Android Problem with tablayout and sqlite

score 1 · Accepted Answer

Look, if I understand. You have a field with several photos, and you want to separate them now. With explode to remove the commas and transform into an array, with all the photos separated. So:

  <?php
$imagens_nome =  "7263273813.jpg,737862834.jpg,236276322.jpg";
$imagens=explode(',',$imagens_nome);
foreach($imagens as $img){
echo "Imagem: ".$img."<br>";
}

?>

Applying to the carousel, I think it would look something like this:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
  <?php
    $cont=0;
     foreach($imagens as $img){?>
    <li data-target="#carousel-example-generic" data-slide-to="<?php echo $cont;?>" class="<?php echo ($cont==0)?" active ":" ";?>"></li>
    <?php $cont++;} ?>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <?php 
      $cont=0;
     foreach($imagens as $img){?>
    <div class="item <?php echo ($cont==0)?" active ":" ";?>">
      <img src="uploads/<?php echo $img; ?>" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <?php $cont++; }  ?> 
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

If so, just enter in your code, it was not very clear how you want to do it ... If you still have difficulty, just comment