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

有人对如何做到这一点有什么建议吗

我的视图中有一个带有图像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的功能，在这个功能中，一个人可以通过缩略图翻页，并且在提交当前活动的图像时，它会与帖子一起保存

任何建议——即使是部分解决方案或路线图——都将不胜感激

_

---

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

这基本上是一个图像旋转木马，所以jcarousel或类似的工具可以工作。只需不转换，一次只显示一个图像

---

要直接执行此操作，请使用CSS绝对定位将所有图像元素堆叠在彼此的顶部。隐藏除一个以外的所有对象，或者在更高的Z索引上指定活动对象。绑定下一个/上一个以循环其中一个可见。

有两个选项：自己动手或使用插件

这基本上是一个图像旋转木马，所以jcarousel或类似的工具可以工作。只需不转换，一次只显示一个图像

---

要直接执行此操作，请使用CSS绝对定位将所有图像元素堆叠在彼此的顶部。隐藏除一个以外的所有对象，或者在更高的Z索引上指定活动对象。绑定下一个/上一个循环，在其中一个可见。

您可以执行以下操作：。我认为这是不言自明的

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

---

您可以这样做：。我认为这是不言自明的

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

---

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

一种具有

noscript

回退功能以及以表单形式发送数据的方法：

---

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

一种具有

noscript

回退功能以及以表单形式发送数据的方法：

---

“随帖提交”。。。一般形式的帖子还是发布到Facebook？@niklas-事实上，这将是一般形式的帖子，因为帖子最初发布在我的应用程序“随帖提交”。。。通用表单帖子或发布到Facebook？@niklas-事实上这是通用表单帖子，因为帖子最初发布在我的应用程序+1上，用于路线图-有没有关于如何抓取活动并在提交时发送其URL的建议？+1用于路线图-有没有关于如何抓取活动并在提交时发送其URL的建议？这是一个好的开始，它只需要一种方法来处理低于零或高于arr.length的电流。@pimvdb感谢您的帮助-如果我在实现@niklas'解决方案时遇到困难，将尝试使用此方法。这是一个好的开始，它只需要一种方法来处理低于零或高于arr.length的电流。@pimvdb感谢这把伟大的小提琴-如果我在实现@niklas'解决方案时遇到困难，将尝试这把小提琴。这是一把非常好的小提琴，谢谢！对于如何将拇指裁剪到特定尺寸，您有什么建议吗？我想到了TimThumb，但这需要将图像存储为temp——任何用于裁剪的客户端解决方案，还是服务器端？我看到服务器端资源被浪费了，因为只会选择/保存一个thumb。@torr您可以使用CSS设置预定义的维度，或者如果您确实想进行裁剪，您可以将它们放置在一个隐藏溢出的div中或作为背景图像（第二个选项仅在启用JS的情况下才能正常工作）CSS/溢出解决方案工作完美-thx为您提供帮助这是一个非常好的小提琴，谢谢！对于如何将拇指裁剪到特定尺寸，您有什么建议吗？我想到了TimThumb，但这需要将图像存储为temp——任何用于裁剪的客户端解决方案，还是服务器端？我看到服务器端资源被浪费了，因为只会选择/保存一个thumb。@torr您可以使用CSS设置预定义的维度，或者如果您确实想进行裁剪，您可以将它们放置在一个隐藏溢出的div中或作为背景图像（第二个选项仅在启用JS的情况下才能正常工作）CSS/溢出解决方案工作完美-thx为您提供帮助