Что исправить в этом крошечном плагине, чтобы заработало на моём сайте?

Сам я пониманию JavaScript только на уровне интуиции (англоязычные слова). Взял из интернета плагин, который позволяет увеличивать и затемнять изображения, при наведении на них мышкой
(function($){

    $.fn.extend({ 

        hoverZoom: function(settings) {
 
            var defaults = {
                overlay: true,
                overlayColor: '#2e9dbd',
                overlayOpacity: 0.7,
                zoom: 25,
                speed: 300
            };
             
            var settings = $.extend(defaults, settings);
         
            return this.each(function() {
            
                var s = settings;
                var hz = $(this);
                var image = $('img', hz);

                image.load(function() {
                    
                    if(s.overlay === true) {
                        $(this).parent().append('<div class="zoomOverlay" />');
                        $(this).parent().find('.zoomOverlay').css({
                            opacity:0, 
                            display: 'block', 
                            backgroundColor: s.overlayColor
                        }); 
                    }
                
                    var width = $(this).width();
                    var height = $(this).height();
                
                    $(this).fadeIn(1000, function() {
                        $(this).parent().css('background-image', 'none');
                        hz.hover(function() {
                            $('img', this).stop().animate({
                                height: height + s.zoom,
                                marginLeft: -(s.zoom),
                                marginTop: -(s.zoom)
                            }, s.speed);
                            if(s.overlay === true) {
                                $(this).parent().find('.zoomOverlay').stop().animate({
                                    opacity: s.overlayOpacity
                                }, s.speed);
                            }
                        }, function() {
                            $('img', this).stop().animate({
                                height: height,
                                marginLeft: 0,
                                marginTop: 0
                            }, s.speed);
                            if(s.overlay === true) {
                                $(this).parent().find('.zoomOverlay').stop().animate({
                                    opacity: 0
                                }, s.speed);
                            }
                        });
                    });
                });    
            });
        }


И есть блок с HTML:
<div class="block">
    <a href="#" class="zoom" id="picture1">
         <img src="images/picture1.jpg">
    </a>
</div>

Проблема в том, что если ниже этого блока есть хоть один <script type="text/javascript"></script> картинки перестают загружаться (по умолчанию они display:none). Даже если этот скрипт - простая Яндес.Карта. У меня на сайте как-раз должна быть она, но картинки загружаются и увеличиваются при наведении только если удалить Яндекс.Карту. То есть JavaScript-код плагина как-то вступает во взаимодействие со скриптами, которые расположены ниже него (скрипты, расположенные выше ХТМЛ-блока, но ниже ссылки на плагин работают нормально и не мешают картинкам загружаться). Помогите понять суть этого взаимодействия. А если лучше подскажите, что убрать/добавить, чтобы можно было спокойно размещать скрипты ниже ХТМЛ-кода, не нарушая загрузку картинок
  • Вопрос задан
  • 234 просмотра
Решения вопроса 1
@Nikolays93
Web-разработчик
Попробуйте добавить в конец JS кода
});
});


Эта функция намного проще реализуется в CSS3.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 апр. 2024, в 10:42
150000 руб./за проект
25 апр. 2024, в 10:41
2000 руб./за проект
25 апр. 2024, в 10:25
2000 руб./за проект