SpaceGallery スクリプトを実装しようとしています。WWW: 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();
ギャラリーの 1 つ (mygaller0 または mygallery1) で画像をスライドすると、すべてのギャラリーで img "ADDITIONAL.jpg" (クラス = imaz) がフェードアウトします。何故ですか？修正方法は？
Spacegallery.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);