0

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:

https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

My main issue is that i don't know how to put the php variables on the javascript code. Can you help?

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">&times;</span>

  <!-- Expanded image -->
  <img id="expandedImg" style="width:100%">

  <!-- Image text  --> 
  <div id="imgtext"></div>
</div>


<?php endif; ?>

http://electives-abroad.org/mnazi-mmoja-in-zanzibar-tanzania/

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?

0

Fixed it!

This is the resulting code:

<?php 

$images = get_field('extra_photos');

if( $images ): ?>
<div class="row2">

<?php foreach( $images as $image ): ?>
    <div class="column2" >
    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?> " onclick="myFunction(this);"/>
    </div>
<?php endforeach; ?>    

</div>
<!-- The expanding image container -->
<div class="container2">
  <!-- Close the image -->
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>

  <!-- Expanded image -->
  <img id="expandedImg" style="width:100%">

  <!-- Image text  --> 
  <div id="imgtext"></div>
</div>


<?php endif; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.