Change Flexslider image's to different ones for 'smaller viewports/screens' ?

hi folks,

this is my first ever post/thread on this forum.

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... well one of them does anyway.


I'm gonna remove that jquery code and just keep it simple, unless somebody can suggest something to remedy this.

I 'suspect' I MIGHT need to use the remove() method.... if so, let me know if im on the right path folks and I'll attempt to do this myself, though I welcome all pointers/tips.


any javascript jquery veterans on here ?

 

EDIT: I realise that on 'resizing' the browser, at the 'snapping point' - we are either going to be 'removing' the path to the non mobile device banners and adding the path for the minified banners OR we are going to 'remove' entirely that element from teh dom ( but why would you want to do that ? ).

I prefer the first method.

<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').removeAttr('src', 'slides/A1-LITTLE-BANNER.png'); /* the browser/window is being resized MORE than 420 px, ok lets remove the little banners ! */
$('#img2').removeAttr('src', 'slides/A2-LITTLE-BANNER.png');
$('#img1').attr('src', 'slides/A1.png'); /* and lets re-load the originals ( banners made for desktop/laptop/tablet devices ) */
$('#img2').attr('src', 'slides/B1.png');



}

});
});
</script>



HOWEVER, when you fire up the website on a mobile/smart phone - the original ( desktop banners ) bannesr are loaded , not the minified ones.

The reason being, this code above ONLY loads the minified banners IF the 'resize' event happens.

So you can see why I started experimenting with the previous code ( which was the later code actualy lol, omg im confusing everybody : )) lol

feedback ?

 

ok folks ive done it ! :-D

yeaah ! ^_^

lol

man i rock ;-)

i did it ! I have the CODE :-D

roflz


BTW ..... its kind of long, and i think ive used the long winded approach.

the clue is in 'combining' orientation with resize

LOL

but feel free to add your own 'solutions' to this. I'll share mine once i see PROOF somebody figured this one out ;-)

ciao.


* counting my days to a premature ban from this place already .... XD *

:-D

 

Can't you just do something like this:

if (viewportSize.getWidth() > 480) {
  $('#img1').attr('src', 'slides/A1.png');
  $('#img2').attr('src', 'slides/B1.png');
} else {
  $('#img1').attr('src', 'slides/A1-LITTLE-BANNER.png');
  $('#img2').attr('src', 'slides/A2-LITTLE-BANNER.png');
}
// also do a resize-function, not sure if needed
$(window).on('resize',function() {
  if (wiewportSize.getWidth() <= 480) {
    $('#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');
  }
});

Code (markup):