CODEWITHSUNDEEP
jquerycssshadowbox
designerNProgrammer
designerNProgrammer

Reputation: 2701

Click on overlay div to activate shadowbox with effect

i am trying to create a gallery where i click the on overlay div and thus shadowbox modal opens with corresponding image. here is my markup

 <li class="grow pic">
 <a class="shadowboxLink" href="img/car_details/1large.jpg" rel="shadowbox">
 <div class="overlayForCarDetails"></div>
 <img class="mediumImg" src="img/car_details/1medium.jpg" alt=""></a>
 </li>

Now when i click the a link it works fine. I wanted to add an effect to image on link overlay so i added jquery like this

        $('.shadowboxLink').mouseenter(function () {
            $(this).children('.overlayForCarDetails').css('opacity', '0.7');
            $(this).children('.overlayForCarDetails').next().find('.mediumImg').addClass('zoomed');
        });

but somehow the class is not applied.

the class is

.zoomed {
-moz-transform: scale(1.10);
-webkit-transform: scale(1.10);
-o-transform: scale(1.10);
transform: scale(1.10);
-ms-transform: scale(1.10);
}

Please tell me where am i doing it wrong. thanks.

Upvotes: 1

Views: 335

Answers (2)

Cloudboy22
Cloudboy22

Reputation: 1514

Try this

 $('.shadowboxLink').mouseenter(function () {

            $(this).children('.overlayForCarDetails').css('opacity', '0.7');
            $(this).children('.overlayForCarDetails').next('.mediumImg').addClass('zoomed');
        });

Upvotes: 0

Arunprakash
Arunprakash

Reputation: 158

You unnecessarily added .children('.overlayForCarDetails').next().find('.mediumImg') when you can just use .find('.mediumImg') Change to:

$('.shadowboxLink').mouseenter(function () {
    $(this).children('.overlayForCarDetails').css('opacity', '0.7');
    $(this).find('.mediumImg').addClass('zoomed');
});

Upvotes: 0

Related Questions