Još sinoć počeo da pišem, pa videh da je problem samo centriranje.
Nešto na brzinu, moglo bi ovo i drugačije,
javascript
:
Kôd:
$(function() {
var slideshow = $('#slideshow'),
content = $('#content');
function resizeCallback() {
slideshow.css({
'margin-left': ((content.width() - slideshow.width())/2) + 'px'
});
}
resizeCallback();
$(window).on('resize', resizeCallback);
$('.slide_block:even').addClass('not-active');
slideshow.on('click', '.not-active a', function(e) {
e.preventDefault();
}).on('mouseover', '.not-active', function(e) {
var elem = $(e.currentTarget);
if(!elem.hasClass('slide_block')) {
elem = elem.parentsUntil('.slide_block');
}
elem.removeClass('not-active');
$('.slide_block').not(elem).addClass('not-active');
switch(elem.attr('id')) {
case 'block1':
var margineLeft = (content.width() - 1000)/2;
break;
case 'block2':
var margineLeft = (content.width() - slideshow.width())/2;
break;
case 'block3':
var margineLeft = (content.width() - slideshow.width())/2 - 1000;
break;
}
slideshow.stop().animate({
'margin-left': margineLeft + 'px'
}, 1300);
});
});
css:
Kôd:
.not-active {
filter: alpha(opacity=30);
-khtml-opacity: .30;
-moz-opacity: .30;
opacity: .30;
}