125 lines
2.4 KiB
JavaScript
125 lines
2.4 KiB
JavaScript
function size_caroussel(min,max){
|
|
if(!min){
|
|
|
|
min = 500;
|
|
}
|
|
|
|
if(!max){
|
|
|
|
max = 1000;
|
|
}
|
|
|
|
|
|
if(min > $(window).width()){
|
|
|
|
min = $(window).width();
|
|
|
|
}
|
|
|
|
|
|
var maximum = null;
|
|
|
|
$('#carousel img').each(function() {
|
|
var value = parseFloat($(this).attr('data-ratio'));
|
|
maximum = (value > maximum) ? value : maximum;
|
|
});
|
|
|
|
|
|
maw_width = parseInt($(window).width()*0.6);
|
|
|
|
|
|
|
|
if(maw_width < min){
|
|
maw_width = min;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(parseInt(maw_width) > parseInt(max)){
|
|
|
|
maw_width = max;
|
|
|
|
}
|
|
|
|
|
|
|
|
ideal_height= parseInt(maw_width/maximum);
|
|
|
|
height=ideal_height;
|
|
|
|
|
|
|
|
|
|
|
|
$('#carousel img').each(function(){
|
|
ratio = $(this).width()/$(this).height();
|
|
|
|
$(this).attr("width", height*$(this).data('ratio'));
|
|
$(this).attr("height", height);
|
|
});
|
|
|
|
|
|
|
|
$("#carousel").trigger("configuration", {
|
|
height : height
|
|
});
|
|
|
|
}
|
|
|
|
function getMinMarge( newItems ) {
|
|
var center = newItems.eq(0).outerWidth(true) + (newItems.eq(1).outerWidth(true) / 2);
|
|
var minMarg = ($(window).width() / 2) - center;
|
|
|
|
return minMarg;
|
|
}
|
|
function showTitle( item ) {
|
|
$('#title').html( item.attr( 'alt' ) );
|
|
}
|
|
|
|
$(window).resize(function(){
|
|
|
|
size_caroussel();
|
|
|
|
|
|
});
|
|
|
|
$(function() {
|
|
size_caroussel();
|
|
|
|
$('#carousel').carouFredSel({
|
|
width: 10000, // should be wide enough ;)
|
|
align: false,
|
|
circular: true,
|
|
infinite: false,
|
|
items: 3,
|
|
prev: '#prev',
|
|
next: '#next',
|
|
auto: true,
|
|
scroll: {
|
|
items: 1,
|
|
duration: 1000,
|
|
onBefore: function( oldItems, newItems, newSizes, animDuration ) {
|
|
$(this).parent().animate({
|
|
'marginLeft': getMinMarge( newItems )
|
|
}, animDuration);
|
|
oldItems.eq(1).animate({
|
|
'opacity': 0.8
|
|
}, animDuration);
|
|
newItems.eq(1).animate({
|
|
'opacity': 1
|
|
}, animDuration);
|
|
showTitle( newItems.eq(1) );
|
|
}
|
|
},
|
|
onCreate: function( items ) {
|
|
$(this).parent().css({
|
|
'marginLeft': getMinMarge( items )
|
|
});
|
|
$(this).children().not(':eq(1)').css({
|
|
'opacity': 0.8
|
|
});
|
|
showTitle( items.eq(1) );
|
|
}
|
|
});
|
|
}); |