0

我有一个带有缩略图的画廊（如果重要，我使用 FlexSlider 2）。

我的问题是：我需要能够仅使用缩略图重新排序照片，这样它就可以像一面镜子一样 - 更改缩略图中的顺序也应该改变画廊本身的顺序。

除此之外，最好让它通过 AJAX 将 serialize() 信息发布到记录新订单的脚本（我在我的 Ruby on Rails 应用程序中使用“acts_as_list”gem）

所以，想象一下有这样的东西：

<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>

所以， only#thumbnails应该是可变的......但是#gallery' 的顺序应该自动改变。

那可行吗？

4

1 回答 1

3

根据您的示例，这里是一个可能的解决方案，它并不漂亮，但所有主要部分都在那里。此代码仅根据缩略图索引重新排序图像，它不会序列化任何内容。

小提琴

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

代码

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);
        }
    }
})

这是怎么回事 ？

  • 获取缩略图的原始索引
  • 获取缩略图的新索引
  • 找到与原始索引对应的图像
  • 找到与新索引对应的图像
  • 将原始索引与新索引进行比较
  • 根据原始索引与新索引的比较结果更改图像位置
于 2013-09-23T17:48:40.763 回答