Сам я пониманию 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-код плагина как-то вступает во взаимодействие со скриптами, которые расположены ниже него (скрипты, расположенные выше ХТМЛ-блока, но ниже ссылки на плагин работают нормально и не мешают картинкам загружаться). Помогите понять суть этого взаимодействия. А если лучше подскажите, что убрать/добавить, чтобы можно было спокойно размещать скрипты ниже ХТМЛ-кода, не нарушая загрузку картинок