Мне удалось добавить jcarousel для навигации по моему html-сайту, построенному с использованием динамического шаблона. Однако мне нужно, чтобы ссылка на изображение отображалась активной, когда я нахожусь на странице, на которую она ссылается, чтобы зритель знал, где он находится. Кроме того, всякий раз, когда я перехожу на новую страницу, jcarousel возвращается к началу своей позиции прокрутки, когда мне нужно, чтобы она оставалась в последней позиции, в которой она была. Надеюсь, это имеет смысл. Я нашел отличную демонстрацию здесь, которую я скачал, но не могу понять, как удалить элементы, которые я хочу, из галереи изображений в демонстрации. http://blog.themeforest.net/tutorials/how-to-integrate-the-jquery-galleria-and-jcarousel-plugins/ Надеюсь, вы поможете!
jcarousel - как я могу сделать ссылку на изображение в карусели активной
Ответы (1)
Что-то вроде этого должно помочь вам начать.
ИЗМЕНИТЬ
Вот более полный пример. Теперь начальное значение извлекается из вашего 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>
ИЗМЕНИТЬ
Вам также нужно будет добавить свою собственную проверку. Прямо сейчас я не проверяю, является ли "startVal" нулевым или находится ли запрошенный начальный индекс в диапазоне доступных элементов.
ИЗМЕНИТЬ
Таким образом, для каждого URL-адреса на вашем сайте вам нужно будет добавить параметр строки запроса, чтобы определить, какой элемент в карусели выбран.
Примеры:
- 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), он не будет существовать, и вы можете получить ошибки.
Не хотел делать это еще более запутанным, но я надеюсь, что это внесло некоторую ясность.
