• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 335
  • Last Modified:

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();  
   });
  });

Open 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>

Open in new window


Here's the CSS:
#container{  width :100%;height:100%;  }
.fluidimage {  width: 100%;  }

Open in new window


Here's the images folder:
img folder
0
georgehowell
Asked:
georgehowell
  • 2
2 Solutions
 
Rainer JeschorCommented:
Hi,
sorry have just limited time, but you should move your function OUTSIDE of the document.ready handler and just call it from there.
So structure would be:
function ImageResize ...
document.ready (
call imageresize
bind window event
)
HTH
Rainer
0
 
georgehowellAuthor Commented:
I FOUND IT!

$(document).ready(function() {  
 
 function imageresize() {  
  var contentwidth = $('#content').width();

  $('img').each(function( index ) {
        //document.write($(this).attr('src'));
        var imageSRCArray = $(this).attr('src').split('_');
        if ((contentwidth) < '700'){
              $(this).attr('src',imageSRCArray[0] + '_small.png');
        } else {  
              $(this).attr('src',imageSRCArray[0] + '_big.png');  
        }
  });
 }  

 imageresize();//Triggers when document first loads      
 
 $(window).bind("resize", function(){//Adjusts image when browser resized  
   imageresize();  
  });  
 });


thanks for your comment Rainer, but I got to talk to another friend and he suggested this and it works
0
 
georgehowellAuthor Commented:
original code had syntax errors - solution came through another source
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now