2011-07-17 3 views
0

私はJQuery JCarouselをCAKEPHPビューで設定しました。この特定のビューには、一連のサムネイルとタイトルをデータベースから収集するforeachループがあります。ページをクリックすると、クリックした部分の拡大と説明付きの別のページが返されます。カスタムスタートを設定した場合、JCarouselは余分なスペースを追加します。位置

したがって、前のページでクリックしたアイテムの開始位置を2ページ目にJCarouselで再ロードしています。私はクリックされたIDをクエリ文字列 "?n = id#"に送り、javascriptを使ってそれを検索し、それを変数に代入してから私のJCarousel関数に代入します。これはうまくいきますが、私がこれを行うと、JCarouselは回転台の最初の項目の前に空白を追加してしまうという問題があります。また、理想的には、クリックしたカルーセルアイテムを前のページと同じ位置に配置したいと考えています。私のカルーセルブロック全体は1ページあたり8個で、サイズが異なります。だから、次のボタンをクリックしてアイテム10をクリックすると、次のボタンをクリックして表示され、2番目のアイテムのアイテム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 
}); 
}); 

スタック

答えて

0

私はこれを最終的に考え出しました。

私は一度に私のカルーセルに8つのアイテムを表示します。これらの数より多いまたは少ない数を表示する場合は、ニーズに合わせて調整する必要があります。私は基本的に、私がURL文字列を渡したインデックスの数を8.0001で割った(.0001の部分は8の倍数でもないので)、それを切り捨てました。これは、開始インデックスをインデックス内で最初に表示されるアイテムにする必要があるためです。必ずしもクリックされたアイテムである必要はありません。私は8でそれを乗算しました。これは私に8、16、24などの堅固な倍数を与えました。その後私は8を追加しました。これは私にelse ifステートメントの範囲を与えました。私は8の倍数に1を加えました。これは私のスタートポジションを与えました。

$.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 
}); 
}); 
関連する問題