auto detect viewport or screen size and load different images for flexslider carosel ?

[c0deM0nK424]

normal jquery flexslider with two static banners created in serif draw plus, and thats about it.

dimensions are 1200px x 500px or something.


i also created two 'minified' versions of those above banners, of 410px by 240px.


all i am trying to do is load the small ones by default IF the website is fired up on a device with a screensize width equal to less than 580px.


if its bigger, show the normal ones.

if its 580 or less, amend the flexslider slides paths and load the little banners (minified ones).


this is how ive tried to do this:

<script>
$(document).ready(function(){
$(window).resize(function() {
if($(window).width() <= 420 ) {
$('#img1').removeAttr('src', 'slides/A1.png');
$('#img2').removeAttr('src', 'slides/B1.png');
$('#img1').attr('src', 'slides/A1-LITTLE-BANNER.png');
$('#img2').attr('src', 'slides/A2-LITTLE-BANNER.png');

}
else if ($(window).resize() > 420 ) {
$('#img1').remove();
$('#img2').remove();
$('#img1').attr('src', 'slides/A1.png');
$('#img2').attr('src', 'slides/B1.png');



}

});
});
</script>


im finding that this way is very buggy, and that I am maybe over complicating my script or simply using the wrong methods.


it almost works - but when i do the 'browser resize' in firefox, I begin to find something interesting happening.


both the minified and the normal bannesr appear lol


then i tried this:

<script>
$(window).on('orientationchange', function (e) {
if(window.orientation == 0){
$('#img1').attr('src', 'slides/A1-LITTLE-BANNER.png');
$('#img2').attr('src', 'slides/A2-LITTLE-BANNER.png');
}
else{

$('#img1').attr('src', 'slides/A1.png');
$('#img2').attr('src', 'slides/B1.png');
}
});
</script>


and then i gave up and came here, got tired of it all.

it does almost work btw, when you do the resize of browser and get to 580 or 420 as in my example above (changed recently ) then the minified bannesr load up.

however as they transition, for some reason one of the NORMAL banners pops up lol

weird.


the fact that ive almost got it working means what im attemping is something which can be done.

but my qusetion is, how close or far am i to getting this thing to work ?


any javascript jquery veterans on here ?