jQuery: imageresize() { if ((contentwidth) < 700px ){ ...do something } else { ....do nothing

Hi Experts

I'm trying to get a bunch of images in a <div> to resize when the screen width is less than  700px --I got it to work with one image, which you can see online: www.amazinggirl.com.au.
Now I'm trying to get all images to resize within a <div id="fluid-content">... I thought I might achieve this with   imageSRCArray = imageSRC.split('_');  wih two versions of all the images: "BlaBla_big.png"  and  "BlaBla_small.png"  trying to split the imageSRCArray[2]   but it's not working...

 $(document).ready(function() {  
 function imageresize() {  
            var contentwidth = $('#content').width();  
              if ((contentwidth) < '700'){  
                $('.fluidimage').attr(function(){
                imageSRC = $(this).find('img').attr('src');
                imageSRCArray = imageSRC.split('_');
                $(this).find('img').attr('src', 'img/big_' + imageSRCArray[2]);
            } else {function() {
                $(this).find('img').attr('src', 'img/small_' + imageSRCArray[2]);
             }  
            }  
  
 imageresize();//Triggers when document first loads      
  
 $(window).bind("resize", function(){//Adjusts image when browser resized  
   imageresize();  
   });
  });

Select allOpen in new window

Here's the HTML:

<div id="content">  
 <img class="fluidimage" src="img/big_logo.png"/> 
  
  <div style="width: 100%; margin: 10% 0 10% 1.5%">
      <img src="img/big_toolBox.png" alt="Click & Choose" style="float: left; margin-top: 5%"/>
      <img src="img/big_girl.png" alt="Click & Choose" style="float: right;"/> 
  </div>
</div>

Select allOpen in new window

Here's the CSS:

#container{  width :100%;height:100%;  }
.fluidimage {  width: 100%;  }

Select allOpen in new window

Here's the images folder: