Rectangular jquery image slider

Question

I need an image slider as shown below.

[for example, if the left arrow is pressed, the items will move left and down.]

Any idea would be very helpful. thanks.

Answer 1

Due to the fact that I liked this idea and wanted to test myself when creating jquery plugins, I created a plugin called Aperture, which can be viewed and downloaded at http://itsjoe.de/aperture/demo/

The code and gui are not perfect yet. Let's see if you like it. Improvements can be implemented later.

Github: https://github.com/griffla/jQuery.Aperture

Answer 2

I would suggest exploring some custom encodings using the jQuery animation function. You can perform certain animations based on the specific position of the boxes in the queue, for example.

$(".arrow").click(function(){ $(".boxes").each(function(){ var i = $(this).index(); //get position of box in list of boxes if(i == 0){ //first box //animate, move down and remove box } else if(i == 1) { //animate, move down } else if(i > 1 && i <= 4) { //animate, move left } else if(i == 5) { //animate, move up } //create another box to appear on the right and move up }); ); 

This is just a very simple idea, there are probably better ways to do this.