Я создаю тему в WordPress, где я отображаю содержимое своих дочерних страниц в слайдер на родительских страницах. В данный момент я пытаюсь реализовать jquery Увеличение js для моего раздела магазина, чтобы увеличить уменьшенное изображение при наведении на него курсора. Однако он работает только с элементами отображения первого слайда, а не на следующих слайдах. Я использую wp простой плагин корзины для моей проверки. Кто-нибудь знает, что здесь происходит?
Вот. php простого плагина корзины, в который я добавил увеличение класса и data-magnify-sr c для использования с jquery увеличением.
$thumbnail_code = '<img class="zoom" src="'.$thumbnail.'" data-magnify-src="'.$thumbnail.'"
alt="'.$thumb_alt.'">';
<div class="wp_cart_product_display_box">
<div class="wp_cart_product_thumbnail">
$thumbnail_code
</div>
А вот мой JS код
(function($){
$(document).ready(function() {
$('.zoom').magnify({
});
});
})(jQuery);
А вот html в браузере
<div class="mySlides">
<div class="wp_cart_product_display_box">
<div class="wp_cart_product_thumbnail">
<img class="zoom" src="http://localhost/wp-content/uploads/2020/01/baikal5-
scaled.jpg" data-magnify-src="http://localhost/wp-content/uploads/2020/01/baikal5-
scaled.jpg" alt="Baikal Driver">
</div>
</div>
</div>
<div class="mySlides">
<div class="wp_cart_product_display_box">
<div class="wp_cart_product_thumbnail">
<img class="zoom" src="http://localhost/wp-content/uploads/2020/01/china16-
768x1024.jpeg" data-magnify-src="http://localhost/wp-
content/uploads/2020/01/china16-768x1024.jpeg" alt="Chinese Harpist">
</div>
</div>
</div>
Так что увеличение работает только на изображении первый div = "mySlides", но не на втором, и я не могу понять, почему.
Спасибо за вашу помощь!
РЕДАКТИРОВАТЬ: хорошо, так что на самом деле это работает на моем другом слайды тоже, но мне нужно сначала изменить размер моего браузера windows, независимо от его размера, чтобы эффект увеличения увеличился. это очень странно Есть идеи о том, почему?