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

Question

有人有建议如何做到这一点吗？

我的视图中有一个包含图像 URL 的数组，就像

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 上。绑定下一个/上一个以循环其中一个可见。

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