Javascript Tab Gallery with Advanced Custom Fields

Question

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?

Answer 1

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