1
我想實現SpaceGallery腳本。 WWW：http://www.eyecon.ro/spacegallery/。它從#div拍攝圖像，並在線演示中製作幻燈片。我的HTML文件的 部分：如何讓我的腳本隻影響jQuery中它自己的圖像？
<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）fadeOuts在我所有的畫廊的一個滑動的圖像！這是爲什麼？如何解決它？
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);
'$（「img.imaz」）瞭解更多關於上下文參數在線淡出（）;'意味着您在與類'imaz'網頁淡出每一個形象。要定位圖層中的特定圖像，例如myGallery0，請執行'$（'＃myGallery0 img.imaz'）。fadeOut（）;' – Nadh 2012-04-28 16:42:37
您將「click」附加到什麼位置？ – Sampson 2012-04-28 16:45:29
是的，我知道，但我希望它是普遍的。我想爲我的所有畫廊有一個JS文件。我如何提取ID，它應該用於什麼？ – pawel 2012-04-28 16:46:29