jQuery UI sortable list mirror

Question

I have a gallery with thumbnails (if it matters, I use FlexSlider 2).

And my problem is: I need to be able to re-order the photos using thumbnails only, so that it would act like a mirror - changing the order in thumbnails should yield in changing the order in the gallery itself as well.

Apart from that it would be nice to have it post the serialize() info via AJAX to script that would record the new order (I use "acts_as_list" gem for my Ruby on Rails application)

So, in imagine having something like this:

<ul id="gallery">
   <li>Img 1</li>
   <li>Img 2</li>
</ul>

<ul id="thumbnails">
   <li>Img 1 thumb</li>
   <li>Img 2 thumb</li>
</ul>

So, only #thumbnails should be changeable ... but #gallery's order should be changed automatically.

Is that doable ?

Answer 1

Based on your example here is a possible solution, it's not pretty but all the major parts are there. This code only reorders images based on thumbnail index, it doesn't serialize anything.

Fiddle

http://jsfiddle.net/Rusln/NhuZp/

Code

var originalIndex;
var newIndex;
var originalImage;
var newImage;
var gallery = $("#gallery");
$("#thumbnails").sortable({
    start:function(ev,ui){
        originalIndex = ui.item.index();
        originalImage = gallery[0].children[originalIndex];
    },
    stop:function(ev,ui){
        newIndex = ui.item.index();
        newImage = gallery[0].children[newIndex];        
        if(originalIndex < newIndex){
            $(newImage).after(originalImage);
        }else{
            $(newImage).before(originalImage);
        }
    }
})

Whats going on ?

• get original index of the thumbnail
• get new index of thumbnail
• find image corresponding to original index
• find image corresponding to new index
• compare original index to new index
• change image position based on the result of comparing original index to new index