CODEWITHSUNDEEP
jquerygallerysrc
BigBroPascal
BigBroPascal

Reputation: 1

Dynamically add/remove a class a div depending on a boolean attribute

I'm trying to make an image src (.zoomImg src) get its "value" from the value of another img attribute (.image-zoom data-zoom) which parent (.main-slider .slick-slide) changes whenever its attribute ('aria-hidden') shifts to (="false").

HTML:

<div class="main-slider slick-slider">
    <div class="slick-slide activated" aria-hidden="false">
        <span>
            <img class ="image-zoom" src="s/files/firstpicture_480x480.jpeg" data-zoom="s/files/firstpicture_1024x1024.jpeg">
            <img class="zoomImg" src="s/files/firstpicture_1024x1024.jpeg">
        </span>
    </div>  
    <div class="slick-slide" aria-hidden="true">
        <img class ="image-zoom" src="s/files/secondpicture_480x480.jpeg" data-zoom="s/files/secondpicture_1024x1024.jpeg">
    </div>
    <div class="slick-slide" aria-hidden="true">
        <img class ="image-zoom" src="s/files/thirdpicture_480x480.jpeg" data-zoom="s/files/thirdpicture_1024x1024.jpeg">
    </div>
</div>

<div class="navigation-slider slick-slider">
    <div class="slick-slide" aria-hidden="false">
        <img class ="image-zoom" src="s/files/firstpicture_240x240.jpeg"
    </div>  
     <div class="slick-slide" aria-hidden="false">
        <img class ="image-zoom" src="s/files/secondpicture_240x240.jpeg">
    </div>
     <div class="slick-slide" aria-hidden="false">
        <img class ="image-zoom" src="s/files/thirdpicture_240x240.jpeg">
    </div>
</div>

So far I managed to make the initial part work thanks to a class (".activated") that is added when the ('aria-hidden') attribute of the main slider image div is set to (="false"), but as soon as the slide changes, the (aria-hidden="false") switches to the new slide parent and everything falls apart.

JQUERY:

$('.main-slider .slick-slide').filter('[aria-hidden="false"]').addClass('activated');

$(document).ready(function () { //ZOOMSCRIPT
    $(".activated .image-zoom")
    .wrap('<span style="display:inline-block"></span>')
    .css("display", "block")
    .parent()
    .zoom({
    url: $(this).find("img").attr("data-zoom"),
    });
});

Could you please help me figuring out how to remove this class whenever aria-hidden="true" and to automatically reassign it to the new image's parent where aria-hidden="false"?

Upvotes: 0

Views: 253

Answers (1)

BigBroPascal
BigBroPascal

Reputation: 1

Okay so I tried this code it appears to be a better approach but I can't make it work ('slider-for' is the name of the container):

$(document).ready(function() {
  
     function initZoom() { 
        $('.image-zoom')
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom({
            url: $(this).find("img").attr("data-zoom")
        });
     }
  
         $('.slider-for').on('afterChange', function() {
          $(".image-zoom").trigger("zoom.destroy");
          alert('slide change');
          initZoom();
        });  
  
  
});

Upvotes: 0

Related Questions