jQuery解决方案，用于在发布〜到Facebook之前通过缩略图进行分页

Question

有人有建议怎么做吗？

我的视图中有一个数组，其中包含图片网址，例如

Array
(
    [0] => http://i2.cdn.turner.com/cnn/2011/CRIME/06/18/florida.casey.anthony.trial/t1main.anthony.os.jpg
    [1] => http://i2.cdn.turner.com/cnn/2011/images/06/18/c1main.black.hole.nasa.cxc.jpg
    [2] => http://i2.cdn.turner.com/cnn/2011/LIVING/06/16/texas.veterans.legacy/tzvids.price.courtesy.jpg
    [3] => http://i2.cdn.turner.com/cnn/2011/LIVING/06/18/pet.road.trips.rs/tzvids.pet.road.trip.jpg
    [4] => http://i2.cdn.turner.com/cnn/2011/SHOWBIZ/06/17/photos.reynolds.auction/tzvids.monroe.dress.nca.jpg
    [5] => http://i2.cdn.turner.com/cnn/2011/images/06/18/tzvids.grill.cnn.jpg
)

我想知道是否有一个jQuery插件可以让我模仿FB的功能，人们可以翻阅缩略图，当提交当前活动的图像时会保存在帖子中。

非常感谢任何建议 - 甚至是部分解决方案或路线图。

_

Answer 1

您应该始终考虑到并非所有用户都启用了JavaScript这一事实。为了适应这些用户，您应该尝试构建应用程序，以便始终存在某种类型的HTML回退，以便为可能已禁用JS或不可用的用户提供服务。

noscript回退的一种方法以及以表单形式发送数据的能力：

http://jsfiddle.net/niklasvh/5cnxh/

Answer 2

有两种选择：自己动手，或使用插件。

这基本上是一个图像轮播，所以jcarousel或类似的工作。只要不给它过渡并一次显示一张图像。

要直接执行此操作，请使用CSS绝对定位将所有图像元素堆叠在一起。要么隐藏除了一个之外的所有，要么在更高的Z-index上激活。绑定next / prev循环显示其中一个。

Answer 3

您可以这样做：http://jsfiddle.net/9vjyP/。我认为这是不言自明的。

var current = 0;

var arr = [
'http://i2.cdn.turner.com/cnn/2011/CRIME/06/18/florida.casey.anthony.trial/t1main.anthony.os.jpg',
'http://i2.cdn.turner.com/cnn/2011/images/06/18/c1main.black.hole.nasa.cxc.jpg',
'http://i2.cdn.turner.com/cnn/2011/LIVING/06/16/texas.veterans.legacy/tzvids.price.courtesy.jpg',
'http://i2.cdn.turner.com/cnn/2011/LIVING/06/18/pet.road.trips.rs/tzvids.pet.road.trip.jpg',
'http://i2.cdn.turner.com/cnn/2011/SHOWBIZ/06/17/photos.reynolds.auction/tzvids.monroe.dress.nca.jpg',
'http://i2.cdn.turner.com/cnn/2011/images/06/18/tzvids.grill.cnn.jpg'
];

$('#prev').click(function() {
    $('img').attr('src', arr[--current]);
    return false;
});

$('#next').click(function() {
    $('img').attr('src', arr[++current]);
    return false;
});

$('#submit').click(function() {
    alert($('img').attr('src'));
    return false;
});