Media Query using Javascript/JQuery - Changing image depending on screen size

Question

I have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.

I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?

Here's my HTML of the carousel's first slide:

<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide"> 
    <!--slogan and CTA-->
    <div class="container carousel-caption main-slider">
        <div class="row header-slogan fadeInDown animated">
            <div class="col-xs-12">
                <section class="cd-intro">
                    <h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
                </section>
            </div>
        </div>
        <div class="row header-tagline fadeInDown animated">
            <div class="col-xs-12">
                <p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
            </div>
        </div>
        <div class="row header-cta fadeInUp animated">
            <div class="col-xs-12">
                <button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
                &nbsp; <a href="https://player.vimeo.com/video/157093017" class="btn-u fancybox-media fbmloading" id="cleardent-page-header-2-vimeo" data-fancybox-title="Why ClearDent?"><i class="fa fa-play fa-fw"></i> Watch a Video</a> 
            </div>
        </div>
    </div>
    <!--slogan and CTA end--> 
</div>

Here's my jQuery :

      <script>
  $(document).ready(function() {
     if($(window).width() > 991) {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
     } else {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
     }
}); 
  </script>

Ryan Wilson · Accepted Answer · 2018-05-07 20:54:41Z

1

Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:

//Place this in your document ready
$(window).resize(function() {
     if($(window).width() > 991) {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
     } else {
         $("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
     }
});

edited May 7, 2018 at 20:54

answered May 7, 2018 at 20:44

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user9269282 Over a year ago

unfortunately, with this solution, image will appear broken on the initial load of the page.

user9269282 Over a year ago

image will only appear once it's resized (such as dragging the browser width)

Ryan Wilson Over a year ago

No, this will attach a handler to the window.resize event, you would still keep your initial code inside the document ready, but add this piece into it as well.

user9269282 Over a year ago

user9269282 Over a year ago

I am so confused since I am a novice. so do i attach them inside my document ready function but I have to remove the previous window resize code right?

dani-sc · Accepted Answer · 2018-05-07 20:43:50Z

0

How about srcset?

<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">

answered May 7, 2018 at 20:43

dani-sc

3081 silver badge8 bronze badges

Collectives™ on Stack Overflow

Media Query using Javascript/JQuery - Changing image depending on screen size

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related