在 php 循环中包含 javascript function

Question

使用 wordpress 我正在从帖子中获取第一个图像附件。 这工作正常：

    <?php
        global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 2 );
   $images = get_posts($args);
   if ( $images ) {
    $i = 0;
    while($i <= 1){
        $image = wp_get_attachment_url( $images[$i]->ID );
    echo "<img src='$image' />";            
      $i++;     
    }
  }
 ?>

我也在尝试处理这些图像，这些图像与 timthumb 一起根据浏览器大小调整图像大小。 我只能让它在两个图像之一上工作。 我希望它记录和调整大小两次，但脚本没有在循环中运行。 有人可以帮忙吗？ 这就是我正在使用的完整片段的样子：

    <?php
        global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 2 );
   $images = get_posts($args);
   if ( $images ) {
    $i = 0;
    $z = 1;
    while($i <= 1){
        $image = wp_get_attachment_url( $images[$i]->ID );
    echo "<img src='$image' class='image_$z' />";   
        ?>
    <script type="text/javascript">
    var image = "<?php echo $image ; ?>";
    var under700_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=340";
     var under900_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=440";

     function imageresize() { 
       var contentwidth = $('#two_up').width();  
         if ((contentwidth) < '700'){   
             console.log('under 700_<? echo $z ?>' + under700_<? echo $z ?>);   
             $('img .image_<? echo $z ?>').attr('src', under700_<? echo $z ?>);
             } else if ((contentwidth) < '900') {
            // console.log('under 900');             
             $('img .image_<? echo $z ?>').attr('src', under900_<? echo $z ?>);
             }
              else {
              image;
             }
     }
        </script>
    <?php
      $i++;
      $z++;
    }
  }
 ?>

Answer 1

使用json_encode()它生成 JavaScript object （或数组或组合） PHP 变量并使其

Answer 2

我假设$images是一个数组； 如果没有，请调整此解决方案以适应。

Javascript：

var images = <? echo json_encode($images); ?>;
for( x=0; x<images.length-1; x++)
{
    someFunction(images[x]);
}

我建议在您的 css 中设置特定的高度/宽度，然后在页面加载时使用 jquery 替换图像。

作为替代方案，尝试在 php 中进行整个处理。 您将节省用户加载时间，而且恕我直言，这要容易得多。 http://www.imagemagick.org/script/index.php

Answer 3

我猜你正在尝试做的是这样的事情：

<?php
global $post;
$args = array( 
  'post_parent' => $post->ID, 
  'post_type' => 'attachment', 
  'post_mime_type' => 'image', 
  'orderby' => 'menu_order', 
  'order' => 'ASC', 
  'numberposts' => 2 
);
$images = get_posts($args);
if ( $images ) {
    $i = 0;
    ?>
    <script type="text/javascript">

        function imageresize(imgElement, srcString) {
            var under700 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=340";
            var under900 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=440";
            var contentwidth = $('#two_up').width();


            if ((contentwidth) < '700'){   
                console.log('under 700' + under700);   
                $(imgElement).attr('src', under700);

                imgElement.onload = ''; //stop the onload event from happening again
            } else if ((contentwidth) < '900') {
                // console.log('under 900');             
                $(imgElement).attr('src', under900);

                imgElement.onload = ''; //stop the onload event from happening again
            }
            else {
                image; //don't know what to make of this (maybe you do)
            }
        }
    </script>
    <?php
    while($i < count($images)){
        $image = wp_get_attachment_url( $images[$i]->ID );
        echo "<img src='$image' class='image' onload='imageresize(this, \"$image\")' />";   
        $i++;
    }
}
?>

但是，正如@Toast 之前建议的那样：我会在 PHP 中执行此操作，并防止用户重新加载页面上的所有图像。 因为这是由上面的代码有效地完成的。

如果您有要调整大小的源图像文件的路径，则可以使用getimagesize获取图像大小，并相应地调整图像的 src uri。

在您使用 javascript 来执行此操作时，我唯一的猜测是您正在使用 DHTML/CSS 框 model 来帮助您计算图像的容器宽度（ #two_up ）。 我强烈反对这样做，但上面的代码仍然可以工作； ;)