1

我正在尝试实现 SpaceGallery 脚本。万维网:http ://www.eyecon.ro/spacegallery/ 。它从#div 获取图像并制作幻灯片,就像在线演示一样。我的 HTML 文件的一部分:

    <div id="myGallery0" class="spacegallery">      
<img class="imaz" src="ADDITIONAL.jpg" alt="" atr1="lupa" />    
<img class="aaa" src=images/bw1.jpg alt="" atr1="bw1" />
<img class="aaa" src=images/bw2.jpg alt="" atr1="bw2" />
<img class="aaa" src=images/bw3.jpg alt="" atr1="bw3" />
            </div>

        <div id="myGallery1" class="spacegallery">      
<img class="imaz" src="ADDITIONAL.jpg" alt="" atr1="lupa" />
<img class="aaa" src=images3/bw1.jpg alt="" atr1="bw1" />
<img class="aaa" src=images3/bw2.jpg alt="" atr1="bw2" />
<img class="aaa" src=images3/lights2.jpg alt="" atr1="bw3" />
            </div>

            <script>
    var initLayout = function() {
        $('#myGallery0').spacegallery({loadingClass: 'loading'});
        $('#myGallery1').spacegallery({loadingClass: 'loading'});
                };  
        EYE.register(initLayout, 'init');
            </script>

现在,当我调用 $('img.aaa') 时,脚本运行良好!该脚本仅从它自己的 ID(mygallery0 或 mygallery1)中滑动图像。假设我的主 .js 文件中有以下 .onclick 内容。

         $('img.imaz').fadeOut();

当我在我的一个画廊(mygaller0 或 mygallery1)中滑动图像时,我所有的画廊中的 img“ADDITIONAL.jpg”(它的类 = imaz)都会淡出!这是为什么?如何解决?

空间画廊.js

(function($){
    EYE.extend({

        spacegallery: {

            //default options (many options are controled via CSS)
            defaults: {
                border: 6, // border arround the image
                perspective: 100, // perpective height
                minScale: 0.1, // minimum scale for the image in the back
                duration: 800, // aimation duration
                loadingClass: null, // CSS class applied to the element while looading images
                before: function(){
                    $('img.imaz').fadeOut();
                    return false
                    },
                after: function(el){    
                    $('img.imaz').fadeIn();                 
                    return false
                    }
            },

            animated: false,

            //position images 
            positionImages: function(el) {

                var top = 0;

                EYE.spacegallery.animated = false;
                $(el)
                    .find('a')
                        .removeClass(el.spacegalleryCfg.loadingClass)
                        .end()
                        .find('img.aaa')
                        .each(function(nr){

                            console.log('WYSOKOSC ' + $(this).attr('height'));

                            var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];

                            $(this)
                                .css({
                                    top: el.spacegalleryCfg.tops[nr] + 'px',
                                    marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
                                    opacity: 1 - el.spacegalleryCfg.asins[nr]
                                }) 
                                .attr('width', parseInt(newWidth));
                            this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
                            this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
                            this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
                            this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
                            this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
                            this.spacegallery.current = el.spacegalleryCfg.asins[nr];
                            this.spacegallery.width = newWidth;
                        })

            },

            //animate to nex image
            next: function(e) {
                if (EYE.spacegallery.animated === false) {
                    EYE.spacegallery.animated = true;

                    var el = this.parentNode;


                    el.spacegalleryCfg.before.apply(el);
                    $(el)
                        .css('spacegallery', 0)
                        .animate({
                            spacegallery: 100
                        },{
                            easing: 'easeOut',
                            duration: el.spacegalleryCfg.duration,
                            complete: function() {


                                $(el)
                                    .find('img.aaa:last')
                                    .prependTo(el);

                                EYE.spacegallery.positionImages(el);
                                el.spacegalleryCfg.after.apply(el);
                            }, 

                            step: function(now) {

                                $('img.aaa', this)
                                    .each(function(nr){

                                        console.log('step: ' + $(this).attr('atr1'));

                                        var newWidth, top, next;
                                        if (nr + 1 == el.spacegalleryCfg.images) {
                                            top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
                                            newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
                                            $(this)
                                                .css({
                                                    top: top + 'px',
                                                    opacity: 0.7 - now/100,
                                                    marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
                                                })
                                                .attr('width', newWidth);
                                        } 

                                        else {
                                            next = this.spacegallery.current - this.spacegallery.increment * now /100;
                                            newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
                                            $(this).css({
                                                top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
                                                opacity: 1 - next,
                                                marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
                                            })
                                            .attr('width', newWidth);
                                        }
                                    });
                            }
                        });
                }

                this.blur();
                return false;
            },

            //constructor
            init: function(opt) {
                opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
                return this.each(function(){
                    var el = this;
                    if ($(el).is('.spacegallery')) {
                        $('<a href="#"></a>')
                            .appendTo(this)
                            .addClass(opt.loadingClass)
                            .bind('click', EYE.spacegallery.next);

                        el.spacegalleryCfg = opt;
                        el.spacegalleryCfg.images = 3;                              
                        el.spacegalleryCfg.loaded = 0;
                        el.spacegalleryCfg.asin = Math.asin(1);
                        el.spacegalleryCfg.asins = {};
                        el.spacegalleryCfg.tops = {};
                        el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
                        var top = 0;

                        $('img.aaa', el)
                            .each(function(nr){
                                var imgEl = new Image();
                                var elImg = this;


                                el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
                                top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
                                el.spacegalleryCfg.tops[nr] = top;
                                elImg.spacegallery = {};
                                imgEl.src = this.src;
                                if (imgEl.complete) {

                                    el.spacegalleryCfg.loaded ++;
                                    elImg.spacegallery.origWidth = imgEl.width;
                                    elImg.spacegallery.origHeight = imgEl.height
                                } else {
                                    imgEl.onload = function() {
                                        el.spacegalleryCfg.loaded ++;
                                        elImg.spacegallery.origWidth = imgEl.width;
                                        elImg.spacegallery.origHeight = imgEl.height
                                        if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {

                                            EYE.spacegallery.positionImages(el);
                                        }
                                    };
                                }
                            });

                        el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
                        el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
                        if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
                            EYE.spacegallery.positionImages(el);
                        }
                    }
                });
            }
        }
    });

    $.fn.extend({

        /**
         * Create a space gallery
         * @name spacegallery
         * @description create a space gallery
         * @option  int         border          Images' border. Default: 6
         * @option  int         perspective     Perpective height. Default: 140
         * @option  float       minScale        Minimum scale for the image in the back. Default: 0.2
         * @option  int         duration        Animation duration. Default: 800
         * @option  string      loadingClass    CSS class applied to the element while looading images. Default: null
         * @option  function    before          Callback function triggered before going to the next image
         * @option  function    after           Callback function triggered after going to the next image
         */
        spacegallery: EYE.spacegallery.init
    });
    $.extend($.easing,{
        easeOut:function (x, t, b, c, d) {
            return -c *(t/=d)*(t-2) + b;
        }
    });
})(jQuery);
4

1 回答 1

2

您可以尝试将匹配的图像限制为当前元素的上下文,方法是this作为第二个参数传入选择器。

defaults: {
    /* options */
    before: function(){
        $('img.imaz', this).fadeOut();
    },
    after: function(el){    
        $('img.imaz', this).fadeIn();
    }
}

当我们传入this, 作为选择器中的第二个参数时,我们告诉 jQuery 为 target "img.imaz",但只有当它在 中找到时this,这意味着当前正在处理的元素。在您的项目中,这将是#myGallery0#myGallery1

您可以在http://api.jquery.com/jQuery/在线了解有关上下文参数的更多信息

于 2012-04-28T17:01:43.247 回答