如果我设置自定义开始：位置，JCarousel 会添加额外的空间

Question

我在 CAKEPHP 视图中设置了 JQuery JCarousel。这个特定的视图有一个 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>

用于检索 url 和 JCarousel 的 Javascript：

$.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（0.0001 部分，所以它甚至不是 8 的倍数），然后我将其向下舍入。我这样做是因为我需要起始索引是索引中的第一个可见项目，而不一定是被单击的项目。然后我将它乘以 8。这给了我 8、16、24 等的实数倍数。然后我添加了 8。这给了我 else if 语句的范围。然后我将 1 加到 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
 });
});