Closed cwulff closed 12 years ago
Hmmm, instead of going in and modifying the plugin, I think the easiest solution would be to slap some css3 animation in there... I'm still learning css3 stuff so I can almost bet there's a better way to do this - I did try using translateX()
and transform:scale(1.2);
but it just didn't look right. I'm sure this could use a bit of tweaking, but I didn't spend a lot of time fussing over it. This is what I ended up with (demo):
CSS
.mb-panel .grow {
padding: 10px;
border: 1px solid #999;
position: relative;
width: 120%;
left: -30px; /* adjust this position as needed - just trying to recenter the panel after it has grown */
z-index: 999; /* needed to overlap the non-current panels */
background: white; /* needed to hide the non-current panels behind the current */
-webkit-animation: .5s ease; /* adjust time to match the plugin speed option */
-moz-animation: .5s ease;
-ms-animation: .5s ease;
-o-animation: .5s ease;
animation: .5s ease;
-webkit-animation-name: grow;
-moz-animation-name: grow;
-ms-animation-name: grow;
-o-animation-name: grow;
animation-name: grow;
}
@-webkit-keyframes grow {
0% { left: 0; width: 100%; }
100% { left: -30px; width: 120%; }
}
@-moz-keyframes grow {
0% { left: 0; width: 100%; }
100% { left: -30px; width: 120%; }
}
@-ms-keyframes grow {
0% { left: 0; width: 100%; }
100% { left: -30px; width: 120%; }
}
@keyframes grow {
0% { left: 0; width: 100%; }
100% { left: -30px; width: 120%; }
}
And I used this callbacks in the initialization code
$('#slider').movingBoxes({
// **** Callbacks ****
// e = event, slider = MovingBoxes Object, tar = current panel #
// callback when MovingBoxes has completed initialization
initialized: function(e, slider, tar){
// increase heights by 130% - doesn't seem to work for all panels in the demo (all different heights)
slider.heights = slider.$panels.map(function(i,e){
return $(e).outerHeight(true) * 1.3;
}).get();
// set starting panel
slider.$panels.eq(tar-1).find('.mb-inside').addClass('grow');
},
// callback before any animation occurs
beforeAnimation: function(e, slider, tar){
/* start css animation at the same time as the panel animation */
slider.$el.find('.grow').removeClass('grow');
slider.$panels.eq(tar-1).find('.mb-inside').addClass('grow');
}
});
It's been a month, I'm guessing this solution worked for you. Please feel free to reopen this issue if you are still having problems.
Aw geez... I completely forgot to come back and say thanks! What a jerk.
This worked perfectly.
Rather than having the images spaced apart, I'd like to have them overlapping, with the .current over laying its neighbours on either side. Giving the li a negative margin seems to work fine to make them overlap, but the "next"
Not a really a bug obviously, but I'd appreciate any thoughts on how to approach this.