jQuery圖片庫定製

編輯：這個問題在這一點上部分回答，感謝尼爾誰已經把我放在正確的路徑使用scrollTo插件;但是，如下所述，我仍然遇到了讓「下一個」和「上一個」鏈接按照需要正確調整滾動縮略圖列表的問題。因此，我想知道是否有任何其他熟練的jQuery程序員願意嘗試一下，並試圖幫助我克服這個障礙......非常感謝。jQuery圖片庫定製

/////////////////////////

知道如果任何精通jQuery的程序員，可以修改圖片庫提供了一些援助腳本：我想在即將推出的項目中使用Galleriffic--如果您不熟悉的話，可以使用一個偉大的插件，但不要將縮略圖分成多個頁面，我想要一個滾動div來同時顯示所有的大拇指，如here所示。

我的問題是，是否有可能讓大拇指的滾動列表「跟隨」大圖像的狀態 - 也就是說，如果點擊「下一張照片」顯示全尺寸圖像以及相應的縮略圖不在視圖中時，列表將自動滾動顯示當前縮略圖，如果這是有道理的。我想這樣的腳本會要求全尺寸的圖像遵循或「感知」縮略圖的可見狀態並根據需要調整可見性。請讓我知道，如果我應該更具體。

我希望可能有一些現有的jQuery功能來完成這項任務（？），並且我預先感謝你在這裏的任何方向。

來源

2011-01-25 nickpish

.scrolltop（值）（http://api.jquery.com/scrollTop/ ）和.position（）應該做的伎倆 – generalhenry 2011-01-25 23:16:34

有a plug-in，會爲你做到這一點。

它允許您指定一個元素，例如您想要滾動的縮略圖「IMG」。它還允許您指定如何執行滾動的效果。

查看關於如何使用它的示例。

至於下方的跟進評論：

按鈕旁邊移動和以前有類「下一步」或「上一頁」和包含大形象類「提前鏈接」的主播，他們都有一個「href」屬性可以轉到下一張/上一張幻燈片。因此，要滾動到該幻燈片的縮略圖，您應該在jQuery代碼的開頭或附近編碼如下所示的代碼。我只用肉眼檢查，所以它可能有AA錯字的，但你應該得到的漂移：

$('.next, .prev, .advance-link').live().click().function(){ 
    var href = $(this).attr('href'); 
    $('#thumbs').scrollTo($('.thumb[href=' + href + ']'), {axis: 'y'}); 
});

來源

2011-01-25 23:36:19 Neil

感謝您的反應尼爾 - 我想我有點困惑的事實是，在右邊的全尺寸圖像容器是由jQuery生成的，所以我不知道在哪裏指定通過縮略圖列表來調用scrollTo腳本以獲取滑動位置的值...正如我在下面的評論中提到的，當用戶點擊全尺寸圖像或下一個/上一個按鈕時，我希望不僅顯示下一個/上一個全尺寸圖像，而且反映相應縮略圖的滾動位置左... – nickpish 2011-01-26 00:16:29

這裏有一個粗略的例子

$('.current img').live('mouseenter',function(){ 

    var alt = $(this).attr('alt'); 
    var thumb = $('.thumbs [alt='+alt+']'); 
    var position = thumb.position(); 
    var thumbs = $('.thumbs'); 
    thumbs.scrollTop(position.top); 
});

來源

2011-01-25 23:34:25 generalhenry

非常感謝所有的答覆傢伙;和generalhenry，如果你會原諒我平淡的編程知識，並提供一些更具體的如何應用，我會非常感激。我意識到，當用戶點擊較大圖像或下一個/上一個按鈕時，我正在有效地嘗試做兩件事：（1）切換到下一個/上一個全尺寸圖像和（2）在位置上反映該選擇的縮略圖滾動列表 – nickpish 2011-01-26 00:11:46

jQuery圖片庫定製

回答

相關問題