Question

I am trying to specifically set an image inline width attribute to it’s value, so I am trying to do that with jquery and razor, but I keep getting the initialized value – 100;

Code:

 @{
 var width = "100";
 }


     <script type="text/javascript">
     $(document).ready(function () {

        $('.tab-item-photo img').each(function () {
            width = $(this).width();
            alert(width);
        });


     });

     </script>


 <div class="tab-item-photo"><img src="@Url.Content("~/_files/149471/images/1712frnt.JPG")" width="@width" height="140px" /></div>

EDIT:

If I could do something like this:

<div class="tab-item-photo"><img src="@Url.Content("~/_files/149471/images/1712frnt.JPG")"
width="$(this).width()" height="140px" /></div>

it would be great!

Answer 1

I think you want something like:

 @{
   //var width = "100"; not needed
 }

     <script type="text/javascript">
     $(document).ready(function () 
     {
        $('.tab-item-photo img').each(function()
        {
          var img = new Image();
          img.src = $(this).attr("src");
          $(this).attr("width", img.width);
        });
     });

     <div class="tab-item-photo">
       <img src="@Url.Content("~/_files/149471/images/1712frnt.JPG")" 
            width="1" height="1" /></div>