我在我的网站上使用高级自定义字段，我想以一种体面、优雅的方式显示我的图库字段的图片。所以我在考虑做这样的事情：

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

我的主要问题是，我不知道如何将php变量放到javascript代码中。你能帮忙吗？

w3schools示例中的相同css和相同脚本，这是我的代码：

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

我不知道为什么它会一行一行地显示图片，我想把它们都显示在一起。我该怎么做？

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