Include javascript function in a php loop - Stack Overflow

admin管理员组

文章数量:1328037

Using wordpress I am grabbing the first image attachment from the posts. This works fine:

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

I am also trying to process these images which in conjunction with timthumb resizes the images depending on browser size. I can only get this to work on one of the two images. I would expect it to log and resize twice but the script is not running in the loop. Can someone please help ? This is what the full snip I am working with looks like :

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

Using wordpress I am grabbing the first image attachment from the posts. This works fine:

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

I am also trying to process these images which in conjunction with timthumb resizes the images depending on browser size. I can only get this to work on one of the two images. I would expect it to log and resize twice but the script is not running in the loop. Can someone please help ? This is what the full snip I am working with looks like :

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

• php
• javascript
• wordpress

Share Improve this question Follow edited Jul 13, 2011 at 9:12 Zac asked Jul 6, 2011 at 14:05 ZacZac 12.9k2121 gold badges7676 silver badges124124 bronze badges 5

• 2 You'd probably want to use <?php echo json_encode($images) ?>, just for maximum safety so you always produce valid javascript, even if it's going to be a simple integer. – Marc B Commented Jul 6, 2011 at 14:09
• 3 Looking at the structure of your code you're going to repeat the "function imageresize()" multiple times in your "while" statement. I'm not sure that is what your looking for. Try using jQuery to access $("img.image_1").onload(imageresize); – Brant Messenger Commented Jul 13, 2011 at 21:03
• 1 Agree with Brant. Also where are you calling your imageresize() function? – Tim Bezhashvyly Commented Jul 15, 2011 at 13:41
• no you are right.. i did have it outside of it originally before pasting in this question... I will keep working with it, thanks Brant – Zac Commented Jul 16, 2011 at 7:41
• part of my problem is I do not understand how to pass the image path generated in the php loop the variables for the function. I guess I could use jQuery to get the img src by its selector, but it seems like there must be a better way. – Zac Commented Jul 16, 2011 at 7:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

Use json_encode() it makes a JavaScript object (or array or bined) of a PHP variable and makes it

I'm assuming $images is an array; if not, tweak this solution to fit.

Javascript:

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

I would remend setting specific height/width in your css and then using jquery to replace the images as the page loads.

As an alternative, try doing the entire processing in php. You'll save your users loading time, and imho, it's much easier. http://www.imagemagick/script/index.php

What I guess you are trying to do is something like this:

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

But, as suggested before by @Toast: I'd do this in PHP and prevent the user from reloading all the images on the page. Because that is effectively done by the above code.

If you have the path of the source image files that you are trying to resize, then you could use getimagesize to get the image size, and adjust the src uri off the images accordingly.

The only guess I have, at you using javascript to do this, is that you are using the DHTML/CSS box model to help you calculate the width of the container (#two_up) for the images. This I would strongly discourage, but still the above code should work! ;)

本文标签： Include javascript function in a php loopStack Overflow