Jquery плагин эффект зависания не работает

Question

Jquery плагин эффект зависания не работает

0

Спасибо, что посмотрели мой вопрос.

Я пытаюсь написать свой собственный плагин галереи изображений jQuery. Он работает нормально, когда страница загружается, но она не работает, когда я нажимаю ссылку PHOTO, чтобы перейти в раздел PHOTO.

Ссылка здесь:

http://dharmeshpatel.net/core_reporting_api/flat-page.html

Вот что я сделал:

$(function() {
  for (var i = 1; i <= 12; i++) {
   var name = i + '.jpg';
   if(i<10) name = '0' + name;
   var img = $('<img class="galleryImage" src="pic/'+ name + '"/>');
   $("#gallery").append(img);
  };
  var g = new  PS.Gallery('gallery');
});

Вот код плагина: (при обновлении страницы он работает, но когда я нажимаю ссылку меню и перехожу к этому div, эффект зависания не работает).

(function(ns){
        ns.Gallery = function(id){
        var gallery = $('#'+ id);
        var images  = gallery.find('.galleryImage');

        var xPos = 50;
        var yPos = 50;
        var gWidth = gallery.width();

            images.each(function(idx,el){
                var img = $(el);
                img.data('homeX',xPos);
                img.data('homeY',yPos);
                img.data('currentScale',1);
                img.css({
                    'left':xPos,
                    'top':yPos,
                    'width':img.width() * 0.25
                });
                xPos += 95;
                if(xPos > gWidth - 100){

                    xPos = 50;
                    yPos += 115;

                }

                img.hover(
                    function(event){
                    var target = $(event.target);
                        animateImage(target,500,target.data('homeX'),target.data('homeY'),2);
                    },function(event){
                        returnAllToNormal();
                    }
                );
                var returnAllToNormal = function(){
                    images.each(function(idx,el){
                        var img = $(el);
                        animateImage(img,500,img.data('homeX'),img.data('homeY'),1);
                    });
                }
                var animateImage = function(img,duration,left,top,scale){
                        img.stop();
                        img.css('textIndent',img.data('currentScale'));
                        img.animate({
                            'left':left,
                            'top':top,
                            'textIndent':scale
                        },
                        {
                        duration:duration,
                        step:function(now,fx){
                            if(fx.prop === 'textIndent'){
                                img.data('currentScale',now);
                                img.css('transform','scale(' + now + ')');
                            }else if(fx.prop === 'left'){
                                img.css('left',now);
                            }else if(fx.prop==='top'){
                                img.css('top',now);
                            }
                        }
                    });
                }
            });
        }
    }(window.PS = window.PS || {}));

Я называю плагин в нужном месте?

Dharmesh 23 фев. 2014, в 20:36

Источник

Теги:

jquery

jquery-hover

1 ответ

Ещё вопросы

Durgesh Chaudhary · Accepted Answer · 2014-02-23T17-48-00.000Z

Когда я изменил верхнее значение вашего div # con на -2500px, ваш тип галереи сломался. При дальнейшем изучении узнайте, что вы храните текущую x и y позицию отдельного изображения, что создает проблему.

Вместо сохранения текущих значений, играйте по текущим значениям. Ниже представлен проблематичный код:

var img = $(el);
img.data('homeX',xPos);
img.data('homeY',yPos);
img.data('currentScale',1);
img.css({
    'left':xPos,
    'top':yPos,
    'width':img.width() * 0.25
});

Спасибо, что посмотрели. xPos и yPos - это только позиции. Это просто дает значение, где изображение должно быть расположено. Проблема была с z-index. Я исправил это. Теперь все работает нормально. Спасибо, что посмотрели.