Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.02.2013, 01:53
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

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);


Заранее благодарю всех откликнувшихся..
Ответить с цитированием
  #2 (permalink)  
Старый 10.02.2013, 04:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ingiborn,
Минимальный HTML выложите - может все проще можно ?
И есть тестовая страница - глянуть как работает в опере и FF
Ответить с цитированием
  #3 (permalink)  
Старый 10.02.2013, 13:06
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

http://thefinishedbox.com/files/free...oom/index.html
Вот демка данного добра..
Ответить с цитированием
  #4 (permalink)  
Старый 10.02.2013, 17:42
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

нету предположений ни у кого?
Ответить с цитированием
  #5 (permalink)  
Старый 10.02.2013, 19:50
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

первые две картинки увеличиваются (хром)
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #6 (permalink)  
Старый 10.02.2013, 21:38
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

увеличиваються то увеличиваться, но если бы там была ссылка, и переход на другую страницу, то потом скрипт не срабатывает, а если F5 жать то нормально..
толи дело в кеше, непонятно..
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2013, 02:11
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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>

Последний раз редактировалось Deff, 11.02.2013 в 02:15.
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2013, 02:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Cуть в том, что подгружаемый скрипт не успевает инициализироваться при повторной загрузке, так как оnload картинок происходит быстрее, чем событие
$(document).ready(function() , в который обернут подгружаемый скрипт
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2013, 14:15
Кандидат Javascript-наук
Отправить личное сообщение для Ingiborn Посмотреть профиль Найти все сообщения от Ingiborn
 
Регистрация: 02.12.2009
Сообщений: 139

Deff я тебя прям люблю!!
Спасибо большое, теперь работает.
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2013, 14:22
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

Цитата:
Спасибо Дефф.
Жду в личке.
Цитата:
всё ещё жду deff в личку...
Цитата:
Deff я тебя прям люблю!!


What The Fuck?
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает скрипт hover кнопки razorg1991 Элементы интерфейса 0 21.11.2012 20:37
Не работает hover() после добавление элемента в DOM jeysmook jQuery 17 10.06.2012 15:02
как решить задачу с hover для IE6 Александр345 Internet Explorer 4 20.06.2011 10:29