Image gallery with Carousel Boostrap. name.jpg separated by , no db!

Asked

Viewed 172 times

0

I want to create an image gallery using bootstrap Carousel, when saving the multiple images in db they go to the same column "photos" and are separated by "." (foto1.jpg,foto2.jpg,foto3.jpg) Now I wish to show you at 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>
  • Explain further the problem. The photos are separated by comma, and Voce want to display individually?

  • id field and photos field in the photos field has several separated by "," (foto1.jpg,foto2.jpg)now I want to exbir all of them in the photoCarousel 1.jpg NEXT foto2.jpg ...

1 answer

1


Look, if from what I understand. You have a field with several photos, and you want to separate them now. With the explode da to remove the commas and turn into an array, with all 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 Carousel, I believe 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 that is it, just enter in your code, it was not very clear how you want to do... If you still have difficulty, just comment

  • The part where I am having problems is in adapting Carousel to insert these images, because it is not enough to put the $img variable in "src="uploads/$img" I need to adapt Carousel to move to the following image from the same gallery.

  • @Paul what is not working out exactly? I will try to edit with what I understood...

  • @Paul edited my answer, see if it works that way. If not, comment and if possible pass the link of Carousel you are trying to implement, to make it easier to help you

  • [http://getbootstrap.com/javascript/#Carousel] the code shows the images one below the other, I believe I have changed the indicators, as I saved all the images in the same column in db, I would know how to do if I were one image per column. " Obg for the attention"

  • @Paul edited, try this way... $imagensin the case is the array with the images, as I quoted in the answer

  • worked, however the next button and Previous does not work. only if using the arrow keys on the keyboard.

  • @Paul looks if Victor put jquery correctly and such.. and if it worked mark as answer :)'

Show 2 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.