jcarousel - как я могу сделать ссылку изображения в карусели оставаться активной

Question

Успешно добавили jcarousel для навигации по сайту html, который построен с динамическим шаблоном. Однако мне нужно, чтобы ссылка на изображение отображалась активна, когда я нахожусь на странице, с которой она связана, чтобы зритель знал, где они находятся. Кроме того, всякий раз, когда я перехожу на новую страницу, jcarousel возвращается к началу своей позиции прокрутки, когда мне нужно, чтобы она оставалась в последнем положении, в котором она находилась. Надеюсь, это имеет смысл. Я нашел отличную демонстрацию здесь, которую я загрузил, но не могу понять, как удалить элементы, которые я хочу, из галереи изображений в демо. http://blog.themeforest.net/tutorials/how-to-integrate-the-jquery-galleria-and-jcarousel-plugins/ Надеюсь, вы сможете помочь!

Answer 1

Что-то вроде этого должно вас начать.

EDIT

Вот более полный пример. Теперь начальное значение вытягивается из вашего URL-адреса.

Например. Если URL-адрес вашего веб-сайта - www.mysite.com/page2.html, вы можете добавить URL-адрес (в данном случае «startVal»), к которому можно получить доступ через JavaScript.

Таким образом, ваш URL-адрес будет выглядеть как «www.mysite.com/page2.html?startVal=2», где startVal = 2 определяет, какой элемент в карусели установлен как выбранный элемент запуска.

<script type="text/javascript"> 

var $sel = null; 
$(document).ready(function() { 

    // This function helps pull out items from your URL. (in this case 'startVal') 
    $.urlParam = function (name) { 
     var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); 
     if(results == null){ //if results is null then return "0" 
      return 0; 
     } 
     return results[1] || 0; 
    } 

    //Get the value of startVal from the QueryString. (in the example below, it would return 2) 
    //EXAMPLE: www.mysite.com/page2.html?startVal=2 
    var startVal = parseInt($.urlParam('startVal')); 

    $('#mycarousel').jcarousel({ 
     start: startVal //Use the value of startVal to determine which item the carousel should default to on page load. 
    }); 

    //Get the image you wish to default as selected, again we do this based off the startVal we received from the URL 
    $sel = $('#mycarousel li:nth-child(' + startVal + ')').find('img'); 
    $sel.css('border', 'solid 2px blue'); //Here we can format it however we want 

    //This function assigns a click event to each item in the carousel and changes which one is selected. 
    $('#mycarousel img').click(function() { 
     $sel.css('border', 'solid 0px white'); 
     $(this).css('border', 'solid 2px blue'); 
     $sel = $(this); 
    }); 
}); 

</script> 

EDIT

Вам также нужно добавить в своих собственных проверках. Прямо сейчас я не проверяю, имеет ли значение «startVal» значение null, или что запрошенный индекс начала находится в диапазоне доступных элементов.

EDIT

Таким образом, для каждого URL на вашем сайте, вам необходимо добавить параметр строки запроса, чтобы определить, какой элемент в Carousel выбран.

Примеры:

• www.mysite.com/page1.html?startVal=1
• www.mysite.com/page2.html?startVal=2
• www.mysite.com/ page3.html? StartVal = 3
• www.mysite.com/page4.html?startVal=4

Вы должны подтвердить, что запрашиваемый элемент на самом деле существует. В противном случае, если URL-адрес запрашивает номер позиции 698 (www.mysite.com/page4.html?startVal=689), он не будет существовать, и вы можете получить ошибки.

Не означает, что это более сбивает с толку, но я надеюсь, что это добавило некоторой ясности.