I'm using Advanced Custom Fields on my site, i want to display pictures for my gallery field on a presentable, elegant way. So i was thinking on do something like this:
The same css and the same script from the w3schools example, and this is my code:
<?php $images = get_field('extra_photos'); if( $images ): ?> <div class="row2"> <div class="column2" > <?php foreach( $images as $image ): ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?> " onclick="myFunction(this);"/> <?php endforeach; ?> </div> </div> <!-- The expanding image container --> <div class="container2"> <!-- Close the image --> <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> <!-- Expanded image --> <img id="expandedImg" style="width:100%"> <!-- Image text --> <div id="imgtext"></div> </div> <?php endif; ?>
I don't know why it displays the pictures like one by one line, i want to display them all next to each other. How can i do it?