Looping html div using php to show image from folder

Question

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

I just try to loop the div but it does not loop at all. I dont know how to loop through the folder to show all image that is why i am asking here. — youaremysunshine
– youaremysunshine, Commented Sep 3, 2013 at 4:39

GautamD31 · Accepted Answer · 2013-09-03 04:53:47Z

1

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' />

edited Sep 3, 2013 at 4:53

answered Sep 3, 2013 at 4:39

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

youaremysunshine Over a year ago

I dont knw why my images didnt come out.. =(

GautamD31 Over a year ago

You are getting image names..??May be you need to add your hosting and main folder names..I have checked in my local and it was working fine

MD SHAHIDUL ISLAM · Accepted Answer · 2013-09-03 04:50:13Z

1

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>";  
}

?>

answered Sep 3, 2013 at 4:50

MD SHAHIDUL ISLAM

14.5k6 gold badges84 silver badges93 bronze badges

Comments

Community · Accepted Answer · 2023-11-20 22:45:59Z

0

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

edited Nov 20, 2023 at 22:45

CommunityBot

11 silver badge

answered Sep 3, 2013 at 4:43

WeTheBrains

1707 bronze badges

Comments

Anto · Accepted Answer · 2013-09-03 04:45:33Z

0

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>";
}
?>

answered Sep 3, 2013 at 4:45

Anto

6105 silver badges13 bronze badges

Comments

Thanos · Accepted Answer · 2013-09-03 04:51:09Z

0

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
});

answered Sep 3, 2013 at 4:51

Thanos

3,0592 gold badges16 silver badges30 bronze badges

Comments

Rohan Kumar · Accepted Answer · 2013-09-03 04:53:44Z

0

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()

edited Sep 3, 2013 at 4:53

answered Sep 3, 2013 at 4:46

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Comments

Donald Campan · Accepted Answer · 2016-03-02 21:12:53Z

0

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>";
}
?>

answered Mar 2, 2016 at 21:12

Donald Campan

315 bronze badges

Collectives™ on Stack Overflow

Looping html div using php to show image from folder

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related