CODEWITHSUNDEEP
javascriptjquery
Zac
Zac

Reputation: 12836

How can I pass a variable as the value for jQuery .attr?

Using jQuery attr() what would be the proper syntax to pass a variable in as the value. What I am trying to do is :

var under700 = 'image.jpg'

$('.two_images img').attr('src', (under700) );

Edit

Judging from the responses, I may have oversimplified this. Here is the rest of the function if that adds any clarity.

    $(document).ready(function() {
     function imageresize() {
         var contentwidth = $('#two_up').width();
         var under700 = '<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo $image_img_tag[0] ?>&w=340'
         if ((contentwidth) < '700'){
     // I also tried defining the variable here
             $('.two_images img').attr('src', under700 );
             } else { 
     // this one works fine
             $('.two_images img').attr('src','<?php echo $image_img_tag[0] ?>');
             }
     }
 imageresize();//Triggers when document first loads     
 $(window).bind("resize", function(){//Adjusts image when browser resized
 imageresize();
});

Upvotes: 3

Views: 2287

Answers (4)

Kamil
Kamil

Reputation: 368

<script>
  // declare early
  function imageresize() {
    var contentwidth = $('#two_up').width();
    // double quoted: "template_url" and missing ; at the end of line
    var under700 = '<?php bloginfo("template_url"); ?>/scripts/timthumb.php?src=<?php echo $image_img_tag[0] ?>&w=340';
    // extra parentheses for contentwidth are not necessary
    if (contentwidth < 700)
      $('.two_images img').attr('src', under700 );
    else
      $('.two_images img').attr('src','<?php echo $image_img_tag[0] ?>');
  }

  // run after document is ready
  $(document).ready(function() {
    imageresize();
  });
</script>

Dummy example:

<?php
// test.php
function bloginfo($a) {
  echo "http://somebloginfo.com/qwerty";
} 

$image_img_tag = array("someimagtag.jpg");

?>

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script>

    function imageresize() {
      var contentwidth = $('#two_up').width();
      var under700 = '<?php bloginfo("template_url"); ?>/scripts/timthumb.php?src=<?php echo $image_img_tag[0] ?>&w=340';
      if (contentwidth < 700)
        $('.two_images img').attr('src', under700 );
      else
        $('.two_images img').attr('src','<?php echo $image_img_tag[0] ?>');
    }

    $(document).ready(function() {
      imageresize();
    });
    </script>
  </head>
  <body>
    test
    <div id='two_up' style="width: 400px;"></div>
    <div class="two_images">
      <img />
      <img />
    </div>
  </body>
</html>

Upvotes: 0

Jack Franklin
Jack Franklin

Reputation: 3765

I believe this line is wrong:

if ((contentwidth) < '700'){

jQuery's width() function returns an integer, so you don't need the quotes around the 700:

if(contentwidth < 700) {

Try that.

Upvotes: 0

beeglebug
beeglebug

Reputation: 3542

Have you tried the code without the php? It looks like you might have some issues with too many single quotes on that line, but it's hard to tell without seeing the rest of the document.

Try replacing the php echos with just plain strings, eg: var under700 = '123';, and make sure you end the variable declaration line with a semi colon, it looks like that might be missing too, and can cause odd errors.

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

$('.two_images img').attr('src', under700);

Don't need the inner brackets, although they won't stop it working.

Upvotes: 3

Related Questions