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