JCarousel添加額外的空間，如果我設置自定義開始：位置

Question

我有一個JQuery JCarousel在CAKEPHP視圖中設置。這個特定的視圖有一個foreach循環來收集數據庫中的一系列縮略圖和標題。如果你點擊一個頁面，它會返回另一個頁面，其中包含一個放大的點擊和描述。

因此，我在第二頁上重新加載了JCarousel，並在上一頁上單擊了項目的開始位置。我將點擊的id發送到查詢字符串「？n = id＃」，然後使用javascript檢索它，將它分配給一個變量，然後分配給我的JCarousel函數。這很好，但問題是，當我這樣做時，JCarousel在Carousel的第一項之前添加了空白區域。同樣理想情況下，我希望點擊旋轉木馬項目的確切位置在上一頁。我的整個輪播塊每頁8個，大小各不相同。所以，如果我點擊下一個按鈕，然後點擊第10項，我想先看看下一個按鈕的出現，並在第二個地方顯示第10項。我也玩過偏移和一些數學，但沒有任何工作。我希望這是有道理的，因爲它讓我發瘋。 :)

這裏是我的代碼：

PHP頁面

<div id="wrap"> 
<ul id="mycarousel" class="jcarousel-skin-tango"> 
<?php $i=1; $cnt=1; ?> 
<?php foreach($all_works as $work): ?> 
<li class="clicked" id="<?php echo $cnt++; ?>">  
<a href="../../<?php echo $work['Work']['id'].DS.$work['Work']['category_id'].DS.$work['Work']['artist_id']; ?>?n=<?php echo $i++; ?>"> 
<?php echo $html->image('$image'.urlencode($work['Work']['picture']), array('border' => '0')); ?><span><?php echo $work['Work']['name']; ?></span></a> 
</li> 
<?php endforeach; ?> 
</ul><span><?php echo $cnt; ?> pieces shown</span></div> 

Javascript功能來獲取URL和的jCarousel：

$.extend({ getUrlVars: function() 
{var vars = [], hash; 
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
for(var i = 0; i < hashes.length; i++) 
{hash = hashes[i].split('='); 
vars.push(hash[0]); 
vars[hash[0]] = hash[1];}  
return vars;}, 
getUrlVar: function(name) 
{  
return $.getUrlVars()[name]; }}); 

var byName = $.getUrlVar('n'); 

jQuery(document).ready(function() { 
jQuery('#mycarousel').jcarousel({ 
scroll: 8, 
start: byName 
}); 
}); 

遺憾的格式，第一次發帖堆棧。

Answer 1

我終於明白了這一點。

因此，我一次在我的傳送帶上顯示8個項目。如果您顯示的數量多於或少於這些數字，則需要根據您的需求進行調整。我基本上採用了我通過url字符串傳遞的索引號，將它除以8.0001（.0001部分因此它甚至不是8的倍數），然後我將其舍入。我這樣做是因爲我需要將起始索引作爲索引中的第一個可見項目，而不一定是被單擊的項目。然後我把它乘以8.這給了我8,16,24等等的固定倍數。然後我加了8.這給了我的else if語句的範圍。然後我添加了一個8的倍數。這給了我我的開始位置。

$.extend(
     { getUrlVars: function() 
     { 

           var vars = [], hash;  
           var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
           for(var i = 0; i < hashes.length; i++)  
           {  
           hash = hashes[i].split('=');  
           vars.push(hash[0]);  
           vars[hash[0]] = hash[1];  
           }  
           return vars; 
           }, 
           getUrlVar: function(name) 
           {  
           return $.getUrlVars()[name]; }}); 

var byName = $.getUrlVar('n'); 
var totalItems = $.getUrlVar('c'); 
var wrapType = ""; 
var offsetNumber =""; 
var divisor = byName/8.0001; 
var mathRound = Math.floor(divisor); 
var eightA = mathRound * 8; 
var eightB = eightA + 8; 
var eightC = eightA + 1; 

if (byName == null || byName <= 8) 
{ 
byName = 1; 
wrapType = ""; 
offsetNumber = "0"; 
} 
else if (byName > eightA && byName <= eightB) 
{ 
byName = eightC; 
} 
else 
{ 
} 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
    scroll: 8, 
    visible: 8, 
    start: byName 
}); 
});