JCarousel добавляет дополнительное пространство, если я установил пользовательский start: position - PullRequest
Новая
       17

JCarousel добавляет дополнительное пространство, если я установил пользовательский start: position

0 голосов
/ 17 июля 2011

У меня настроен JQuery JCarousel в виде CAKEPHP. Это конкретное представление имеет цикл foreach для сбора серии миниатюр и заголовков из базы данных. Если вы щелкаете страницу, она возвращает другую страницу с увеличенным описанием и описанием фрагмента.

Итак, я перезагружаю JCarousel на второй странице с начальной позицией элемента, нажатой на предыдущей странице. Я посылаю кликнувший идентификатор в строку запроса «? N = id #» и извлекаю его с помощью javascript, присваиваю его переменной, а затем моей функции JCarousel. Это прекрасно работает, но проблема в том, что когда я делаю это, JCarousel добавляет пустое пространство перед первым элементом Карусели. Также, в идеале, я бы хотел, чтобы элемент Карусели, на который нажали, был в том же положении, что и на предыдущей странице. Весь мой блок карусели - 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
});
});

извините за форматирование, первое размещение в стеке.

1 Ответ

0 голосов
/ 19 июля 2011

Я наконец понял это.

Таким образом, я показываю по 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
 });
});
...