Как отобразить слайдер, который щелкнут после перехода на ту же страницу после перезагрузки страницы в слайдере изображения Jssor

Question

Я использую слайдер изображений Jssor в своем приложении. требование - когда пользователь нажимает изображение с номером индекса 5, пользователь переходит на любую другую страницу. Когда пользователь возвращается на страницу слайдера, то же изображение должно отображаться (например, с номером индекса 5) вместо изображения с номером индекса 1.

Я использую строку запроса, чтобы получить индексный номер щелкнутого изображения.

var sbIndex = '<%= Request.QueryString["SubIndex"]%>'; 
$('#jssor_2').$GoTo = sbIndex; 

Может ли кто-нибудь дать мне решение, чтобы получить индексный номер изображения, которое нажато.

Answer 1

Я не знаю jssor, я просто посмотрел на него. В любом случае, похоже, что jssor не должен противоречить моему ответу.

Вы можете поместить индекс в URL-адрес, поэтому, когда клиент перезагружается, вы читаете этот индекс и устанавливаете его. Способ сделать это, помещает # в url. Все, что изменилось с правой стороны #, не приведет к перезагрузке страницы, поэтому это хорошее место для размещения переменных, предназначенных для javascript.

Позвольте мне показать простой пример принципа. Это фотогалерея, фотографии - брюссельская капуста.

<div id="buttons"></div> 
<img id="image" src=""> 
<script> 
// these are images of Brussels Sprouts 
var images = [ 
    'https://d2t35vvdhj0e6p.cloudfront.net/m/i/brussels_sprouts.jpg', 
    'http://www.polskafoods.com/sites/all/sites/default/files/images/brussels-sprouts-polish-recipe.jpg', 
    'http://www.onlyfoods.net/wp-content/uploads/2013/05/Brussels-Sprouts.jpg', 
    'http://www.qvm.com.au/wp-content/uploads/2013/04/Brussel-Sprouts.jpg', 
    'https://www.smartkitchen.com/assets/images/resources/large/1281295928Brussels%20Sprouts.jpg' 
]; 

function generateButton(index) { 
    return '<input type="button" value="' + index + '" onclick="goto(' + index + ')" />'; 
} 
function goto(index) { 
    if(images[index]) { 
    // set the url 
    location = '#' + index; 
    // set the image source 
    document.getElementById('image').src = images[index]; 
    } 
} 
window.onload = function() { 
    var index = 0; 
    // check if any index is in the url 
    if(Number(location.hash.substr(1))) { 
    index = Number(location.hash.substr(1)); 
    } 
    var buttons = ''; 
    for(var i in images) { 
    buttons += generateButton(i); 
    } 
    document.getElementById('buttons').innerHTML = buttons; 
    goto(index); 
} 
</script>