| .::BARS::. |
28.01.2010 11:21 |
неактивность курсора после hidden
привет всем...
вот сайт
neborecords.ru
есть афиши, которые крутятся при нажатии на << < > >>
так вот... изначально видны 3 афиши, остальные скрыты....
если на вести на афишу, то можно на нее нажать... если мы нажмем на > >> то увидим что видвинулась афишка "токио" на данный момент.
так вот эта афиша уже не кликабельна стала.... хотя <a href></a> прописан так же как и на обычных афишах...
код javascript'a
PHP код:
Gallery = {
active: false,
height : {
max : 149,
min : 123
},
width : {
max : 106,
min : 86
},
init : function() {
var _self = this;
$('.next').click(function() {
_self.next();
}).dblclick(function() {
return false;
});
$('.next-all').click(function() {
_self.skipAll('next');
}).dblclick(function() {
return false;
});
$('.prev').click(function() {
_self.prev();
}).dblclick(function() {
return false;
});
$('.prev-all').click(function() {
_self.skipAll('prev');
}).dblclick(function() {
return false;
})
},
getCurrent : function() {
return $('.afisha-gallery li.active');
},
next : function(fast) {
if (Gallery.active) {
setTimeout(function(){Gallery.active = false}, 300);
return false;
}
Gallery.active = true;
$('.afisha-gallery li');
var curr = this.getCurrent();
if (!$.browser.msie) {
curr.animate( {
'marginLeft' : ''
});
}
var prev = curr.prev('li');
var next = curr.next('li');
var nextNext = next.next('li');
if (!next.length) {
return;
}
if (fast) {
next.addClass('active').find('img').css( {
width : Gallery.width.max,
height : Gallery.height.max,
opacity : 1
});
prev.hide();
curr.removeClass('active').find('img').height(Gallery.height.min)
.width(Gallery.width.min);
nextNext.show();
if (!$.browser.msie) {
nextNext.removeClass('hidden');
}
return
}
var nextWidth = next.width();
/*
nextNext.width(0).animate( {
width : nextWidth,
opacity: 1
});*/
/*
nextNext.css({marginLeft: 30, width: 0})
.animate({margin: 0, width: nextWidth, display: ''});*/
var ml = nextNext.css('marginLeft');
if ($.browser.msie) {
curr.css({marginLeft: ''});
nextNext.css({marginLeft: -70, display: '', zIndex: -20 /*, opacity: 0*/})
.removeClass('hidden')
.animate({marginLeft: '0', width: nextWidth, opacity: 1/*, display: 'block'*/, width: 118}, 400);
} else {
nextNext.css({marginLeft: -(nextWidth*0.85), display: '', zIndex: -20, width: 0, opacity: 0.1})
.removeClass('hidden')
.animate({marginLeft: '0', width: nextWidth, opacity: 1}, 400);
}
/**/
next.addClass('active').find('img').animate( {
width : Gallery.width.max,
height : Gallery.height.max,
opacity : 1
}, 500, 'linear', function(){Gallery.active = false});
/**/
if ($.browser.msie) {
prev.css({border: '2px solid #6E180B'});
prev.animate( {
width : 0,
opacity : 0
}, 400/*, 'linear', function() {
$(this).hide().width('').css('opacity', '').addClass('hidden')
}*/).fadeOut();
} else {
prev.animate( {
width : 0,
opacity : 0
}, 400, 'linear', function() {
$(this).hide().width('').css('opacity', '').addClass('hidden')
});
}
curr.removeClass('active').find('img').height(Gallery.height.min)
.width(Gallery.width.min);
setTimeout(function(){Gallery.active = false}, 400);
},
prev : function(fast) {
if (Gallery.active) {
setTimeout(function(){Gallery.active = false}, 300);
return false;
}
Gallery.active = true;
var curr = this.getCurrent();
var prev = curr.prev('li');
var next = curr.next('li');
var prevPrev = prev.prev('li');
if (!prev.length) {
return
}
if (fast) {
if (!prev.prev('li').length) {
if (!$.browser.msie) {
prev.css( {
'marginLeft' : next.width()
});
}
}
var nextWidth = next.width();
if (!nextWidth) {
nextWidth = prev.width()
}
prev.addClass('active').find('img').css( {
width : Gallery.width.max,
height : Gallery.height.max,
opacity : 1
});
next.hide();
curr.removeClass('active').find('img').height(Gallery.height.min)
.width(Gallery.width.min);
prevPrev.css( {
opacity : 1,
width : nextWidth
});
return;
}
if (!prev.prev('li').length) {
prev.animate( {
'marginLeft' : next.width()
});
}
var nextWidth = next.width();
if (!nextWidth) {
nextWidth = prev.width()
}
prev.addClass('active').find('img').animate( {
width : Gallery.width.max,
height : Gallery.height.max,
opacity : 1
}, 400, function() {
$(this).parent().parent().addClass('active')
});
next.fadeOut(100, function() {
$(this).hide()
});
curr.removeClass('active').find('img').height(Gallery.height.min)
.width(Gallery.width.min);
prevPrev.width(1).css( {
opacity : .1
}).animate( {
opacity : 1,
width : nextWidth
}, 400, 'linear', function(){Gallery.active = false});
setTimeout(function(){Gallery.active = false}, 400);
},
getItemsCount : function() {
return parseInt($('.afisha-gallery ul li').length, 10)
},
skipAll : function(direction) {
for ( var i = 0; i < this.getItemsCount() - 1; i++) {
setTimeout(function() {
$('.' + direction).trigger('click', {
fast : true
})
}, i * 600)
}
}
};
код крутилки
PHP код:
<ul class="clearfix">
<li>
<div>
<a href="afisha-min-5.php" onclick="setClass('rnr-entry');">
<img src="http://neborecords.ru/afisha/1258707779-3.jpg" width="86px" height="123px" alt="" /></a>
</div>
<i></i>
</li>
<li class="active">
<div>
<a href="afisha-min-10.php" onclick="setClass('dj-entry');">
<img src="http://neborecords.ru/afisha/1263717549-3.jpg" width="106px" height="149px" alt="" />
</a>
</div>
<i></i>
</li>
<li>
<div>
<a href="afisha-min-7.php" onclick="setClass('hiphop-entry');">
<img src="http://neborecords.ru/afisha/1260169776-3.jpg" width="86px" height="123px" alt="" />
</a>
</div>
<i></i>
</li>
<li class="hidden">
<div>
<a href="afisha-min-11.php" onclick="setClass('rnr-entry');">
<img src="http://neborecords.ru/afisha/1264143885-3.jpg" width="86px" height="123px" alt="" />
</a>
</div>
<i></i>
</li>
</ul>
<div class="buttons">
<a href="#" class="prev-all"></a>
<a href="#" class="prev"></a>
<a href="#" class="next-all"></a>
<a href="#" class="next"></a>
</div>
|
