Перейти к следующему / предыдущему названному якору с помощью клавиш со стрелками влево / вправо

Question

Перейти к следующему / предыдущему названному якору с помощью клавиш со стрелками влево / вправо

0

Я создал галерею (используя ZenPhoto), и у меня есть все изображения с одной загрузки альбома на одной странице. Каждое изображение имеет именованный якорь:

<a href="image4_full.jpg" title="image4" name="image4">
  <img src="image4.jpg" alt="image4" />
</a>

--- edit --- Примечание: якоря не названы по порядку, имена могут быть любыми, например, "морковь", "пудели", "сибирская язва", "you_always_complicate_things".

Я хотел бы позволить пользователям перейти к следующему/предыдущему именованному якорю, используя клавиши со стрелками влево/вправо. Я буду использовать jQuery, если это необходимо, но я предпочел бы более короткое решение, если это легко возможно. Пожалуйста помоги :)

MindOverflow 16 апр. 2014, в 18:28

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Sebb · Accepted Answer · 2014-04-16T14-37-00.000Z

Используйте событие Keydown:

var num = 1;
var imagecount = 4;
document.body.addEventListener('keydown', function (e) {
  var keyCode = e.keyCode;
  if(keyCode==37) { //left
    if(num > 1) num -= 1; 
    location.hash = "#image" + num;
  }
  else if(keyCode==39) { //right
    if(num <= imagecount) num += 1; 
    location.hash = "#image" + num;
  }
});

EDIT: использовать разные имена

var num = 0;
var images = new array();
images[0] = "image1";
images[1] = "imageZ";
images[2] = "theend";
var imagecount = images.length - 1;
document.body.addEventListener('keydown', function (e) {
  var keyCode = e.keyCode;
  if(keyCode==37) { //left
    if(num > 0) num -= 1; 
    location.hash = "#" + images[num];
  }
  else if(keyCode==39) { //right
    if(num < imagecount) num += 1; 
    location.hash = "#" + images[num];
  }
});

Вы можете сгенерировать массив изображений с помощью php (ответьте, если вам нужен код). "Хороший способ" был бы, насколько я знаю, иметь json файл с именами изображений и извлекать его с вашего сайта, но реализация этого без jQuery - это приключение в кросс-браузере.

Это очень эффективно, спасибо! Однако, возможно, мой пример кода вводил в заблуждение, потому что имена якорей взяты из имен изображений, поэтому на одной странице я могу иметь якоря с разными именами, например, «img1234», «морковь», «image4», «заправленный огнем», «капуста». , Было бы возможно иметь код обрабатывать это?
Отредактировал первоначальный ответ, чтобы соответствовать вашим потребностям;)