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