Question

我在CAKEPHP视图中设置了JQuery JCarousel。此特定视图具有foreach循环，用于从数据库中收集一系列缩略图和标题。如果您单击某个页面，它将返回另一个页面，其中包含所单击的部分的放大和描述。

所以，我正在第二页上重新加载JCarousel，并在上一页上点击该项目的开始位置。我将点击的id发送到查询字符串“？n = id＃”，然后使用javascript检索它，将其分配给变量，然后分配给我的JCarousel函数。这很好用，但问题是，当我这样做时，JCarousel会在Carousel的第一项之前添加空格。理想情况下，我希望将点击的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>

用于检索网址和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（.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
 });
});

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

1 个答案: