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

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 上激活。绑定 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;
});