Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


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

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

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

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:

$(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').attr('src', 'slides/A1.png');
$('#img2').attr('src', 'slides/B1.png');



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:

$(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');

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

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


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 ?

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close