I'm really beginner in web programming. I want to make webpage which contain photo gallery. This is the code
<body>
<div class="container">
<header class="clearfix">
</header>
<div class="main">
<a class="fancybox" href="gallery/1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="gallery/1.jpg" alt="" /></a>
<a class="fancybox" href="gallery/2.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="gallery/2.jpg" alt="" /></a>
<a class="fancybox" href="gallery/3.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="gallery/3.jpg" alt="" /></a>
<a class="fancybox" href="gallery/4.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="gallery/4.jpg" alt="" /></a>
<a class="fancybox" href="gallery/5.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="gallery/5.jpg" alt="" /></a>
<a class="fancybox" href="gallery/6.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="gallery/6.jpg" alt="" /></a>
<a class="fancybox" href="gallery/7.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="gallery/7.jpg" alt="" /></a>
</div>
</div>
</body>
I have to type the name of photos manually. But it will be tired if the amount of photos is too much. I want to add php code to upload those images from a folder automatically. How to use php code inside the
<div class="main"></div>
Please give me example.
you can use PHP RecursiveDirectoryIterator
<body>
<div class="container">
<header class="clearfix">
</header>
<div class="main">
<?php $images = new RecursiveDirectoryIterator('images');
foreach($images as $img){
if(is_dir($img->getFileName())){ continue; }
echo '<a class="fancybox" href="folder/'.$img->getFileName().'" data-fancybox-group="gallery" title="'.$img->getFileName().'"><img src="folder/'.$img->getFileName().'" alt="'.$img->getFileName().'" /></a>';
}?>
</div>
</div>
</body>
Try this in your <div>
: <body> <div class="container"> <header class="clearfix"> </header> <div class="main"> <?php $image_array = array_diff(scandir("images"), array('..', '.')); $i = 0; foreach ($image_array as $key) { ?> <a class="fancybox" href="<?php echo 'images/'.$key; ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"> <img src="<?php echo 'images/'.$key; ?>" alt="" height="150" width="150"/></a> <?php $i++; } ?> </div> </div> </body>
<body> <div class="container"> <header class="clearfix"> </header> <div class="main"> <?php $image_array = array_diff(scandir("images"), array('..', '.')); $i = 0; foreach ($image_array as $key) { ?> <a class="fancybox" href="<?php echo 'images/'.$key; ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"> <img src="<?php echo 'images/'.$key; ?>" alt="" height="150" width="150"/></a> <?php $i++; } ?> </div> </div> </body>
<body> <div class="container"> <header class="clearfix"> </header> <div class="main"> <?php $image_array = array_diff(scandir("images"), array('..', '.')); $i = 0; foreach ($image_array as $key) { ?> <a class="fancybox" href="<?php echo 'images/'.$key; ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"> <img src="<?php echo 'images/'.$key; ?>" alt="" height="150" width="150"/></a> <?php $i++; } ?> </div> </div> </body>
Change images to your folder name.
This should be use full
<body>
<div class="container">
<header class="clearfix">
</header>
<div class="main">
<?php
$image_array = array_diff(scandir("YOUR IMAGES FOLDER NAME"), array('..', '.'));
$i = 0;
foreach ($image_array as $key) { ?>
<a class="fancybox" href="<?= 'YOUR IMAGES FOLDER NAME/'.$key ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="<?= 'YOUR IMAGES FOLDER NAME/'.$key ?>" alt="" height="150" width="150"/></a>
<?php $i++; } ?>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.