Hover Zoom не работает
Приветствую всех.
Нужна ваша помощь. Если скрипт так сказать, приближения изображения на уровне css и jquery Но в chrome и safari он не работает, а точнее при клике на одну и тужу же страницу, картинки пропадают, и в консоли он не исполняется.. Я подозреваю функцию fadeIn. Вот сам скрипт: (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); } }); }); }); }); } }); })(jQuery); Заранее благодарю всех откликнувшихся.. |
Ingiborn,
:) Минимальный HTML выложите - может все проще можно ? И есть тестовая страница - глянуть как работает в опере и FF |
http://thefinishedbox.com/files/free...oom/index.html
Вот демка данного добра.. |
нету предположений ни у кого?
|
первые две картинки увеличиваются (хром)
|
увеличиваються то увеличиваться, но если бы там была ссылка, и переход на другую страницу, то потом скрипт не срабатывает, а если F5 жать то нормально..
толи дело в кеше, непонятно.. |
Ingiborn,
Добавьте в конец скрипта на самой странице <script> $(function() { $('#blue').hoverZoom(); // Default $('#green').hoverZoom({ overlayColor: '#90bd2e', zoom: 50 }); $('#pink').hoverZoom({ overlayColor: '#bd2e75', zoom: 0 }); /* USAGE $('#pink').hoverZoom({ overlay: true, // false to turn off (default true) overlayColor: '#2e9dbd', // overlay background color overlayOpacity: 0.7, // overlay opacity zoom: 25, // amount to zoom (px) speed: 300 // speed of the hover }); */ *!* $('.block > a > img').each(function() { this.src = this.src+ '?'+new Date().getTime(); }); */!* }); </script> |
Cуть в том, что подгружаемый скрипт не успевает инициализироваться при повторной загрузке, так как оnload картинок происходит быстрее, чем событие
$(document).ready(function() , в который обернут подгружаемый скрипт |
Deff я тебя прям люблю!!
Спасибо большое, теперь работает. |
Цитата:
Цитата:
Цитата:
What The Fuck? :blink: |
Часовой пояс GMT +3, время: 10:12. |