CODEWITHSUNDEEP
phphtmlfor-loop
youaremysunshine
youaremysunshine

Reputation: 351

Looping html div using php to show image from folder

I have a folder "blah" that contains a lots of images.

I want to show all my images into my page.

Here my html code:

<div class="cp-thumb cp-masonry cp-thumbs616 masonry-brick">
   <img src="blah/225cd24c144611e3b69022000a1deb4b_7.jpg" class="img_235x235" />
</div>

When I use php for loop to show all the image, it does not work:

<?php
for($i=0; $i<=10; $i++)
{
   echo "<div class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'>
       <img src='blah/225cd24c144611e3b69022000a1deb4b_7.jpg'class='img_235x235' />
     </div>";      
}     
?>

Anyone can help? Thanks

Upvotes: 0

Views: 5533

Answers (7)

Donald Campan
Donald Campan

Reputation: 31

Worked for me just fine tysm.

<?php
foreach (glob("blah/*.jpg") as $filename) {
    echo "<div class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'><img src='blah/". $filename . "'class='img_235x235' /></div>";
}
?>

Upvotes: 0

GautamD31
GautamD31

Reputation: 28763

Try with GLOB like

foreach(glob('blah/'.'*') as $filename){
    echo "<div class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'>
              <img src='".$filename."' class='img_235x235' />
          </div>"; 
}

COnsidered that all the image names are different and also the directory contains only images.

In my local I have images in my proj/blah/ So I have done like

<img src='proj/".$filename."' class='img_235x235' />

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

You need to check the directory path of blah folder

Try this,

foreach(glob('blah/{*.gif,*.jpg,*.png}',GLOB_BRACE) as $img){// you can add more extension here
    echo "<div class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'>
       <img src='blah/".$img."'class='img_235x235' />
     </div>";
}

Read Glob()

Upvotes: 0

Thanos
Thanos

Reputation: 3059

I can propose a jQuery solution. Add an image slider that will pick up all the images directly from the folder.

Includes

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- directorySlider Javascript file -->
<script src="/js/directorySlider.js"></script>

HTML

<div id='slider-main' class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'></div>

JS

$('#slider-main').directorySlider({
    animation: 'fade',
    filebase: 'slide_',
    directory: 'blah/',
    extension: 'jpg',
    numslides: 10,
    height: 200
});

Upvotes: 0

MD SHAHIDUL ISLAM
MD SHAHIDUL ISLAM

Reputation: 14523

It is simple. Just copy and paste

<?php

$dir = dir("blah");

while($filename=$dir->read()) {

    if($filename=="." || $filename=="..") continue;

    echo "<div class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'>
       <img src='blah/".$filename."'class='img_235x235' />
     </div>";  
}

?>

Upvotes: 1

Anto
Anto

Reputation: 610

use glob to read images

<?php
foreach (glob("blah/*.jpg") as $filename) {
    echo "<div class='cp-thumb cp-masonry cp-thumbs616 masonry-brick'><img src='blah/". $filename . "'class='img_235x235' /></div>";
}
?>

Upvotes: 0

WeTheBrains
WeTheBrains

Reputation: 170

use the glob function if you want to display all images on a folder.

foreach (glob("*") as $filename)
{
    echo '<div class="cp-thumb cp-masonry cp-thumbs616 masonry-brick">
              <img src="blah/'.$filename.'" class="img_235x235" />
          </div>';


}

keep in mind this function returns an array, so if you do not want to out put them all you have the ability to configure that, please read this.

https://www.php.net/glob

Upvotes: 0

Related Questions