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, время: 17:59. |