Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 09.01.2015, 16:07   #1
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию Навигация в галерее с помощью стрелок

Здравствуйте. Сделал галерею просмотра картинок на css. Переход (назад / вперед) с помощью href='#pic2 / #pic4' (pic№ - на каждой картинке свой). Как сделать, чтобы ссылки нажимались с клавиатуры, но без использование jQuery?
Код HTML:
<a href='#pic2' title='Назад'><div class='back_g'></div></a> 
<a href='#pic4' title='Вперед'><div class='next_g'></div></a>
Спасибо.

Нашел в просторах интернета:
Код:
document.addEventListener('keydown', function(event) {
    if (event.keyCode == 37) {
        alert('Left was pressed');

    }
    else if (event.keyCode == 39) {
        alert('Right was pressed');
    }
}, true);
Как заставить его нажимать на ссылка с нужным id?

Последний раз редактировалось Parallelogram; 09.01.2015 в 16:19.
Parallelogram вне форума Ответить с цитированием
Старый 10.01.2015, 08:52   #2
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

У меня просто модальное окно на чистом css, что нужно прописать вместо алерта, чтобы срабатывало переключение между картинками?
Parallelogram вне форума Ответить с цитированием
Старый 10.01.2015, 09:13   #3
Человек_Борща
Старожил
 
Аватар для Человек_Борща
 
Регистрация: 30.12.2009
Сообщений: 11,442
По умолчанию

По колдуйте с accesskey, кроме того, есть готовые JS'ки для навязывания горячих клавиш. Типа hotkey.js и т.д.
Человек_Борща вне форума Ответить с цитированием
Старый 10.01.2015, 15:57   #4
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

Цитата:
Сообщение от Человек_Борща Посмотреть сообщение
По колдуйте с accesskey.
Не подходит, т.к. нет славишь вперед назад, да и вообще только сочетания +ctrl +alt +shift.
Код HTML:
<!-- Собственно та самая картинка, которая выводится -->
<div class='pop' id='pic1'> 
  <img src='IMG_1.jpg' />
</div>
<div class='pop' id='pic2'> 
  <img src='IMG_2.jpg' />
</div>
<div class='pop' id='pic3'> 
  <img src='IMG_3.jpg' />
</div>

<!-- Кнопка вперед -->
<a href='#' title='Вперед'>
  <div class='next_g'> >>>>> </div>
</a>
Возникла проблема с определением того, на какую ссылку нажимать, чтобы переключиться на нужную картинку.

А если так? При открытии картинки, появляется модальное окно собственно с самой картинкой. В адресной строке появится адрес с тегом test.ru/index.php#pic2
С помощью js считать этот тег и в зависимости от номера определить предыдущее и следующее изображение. Например, если pic2, то следовательно предыдущее - pic1, а следующее - pic3.
После этого вставить в соответствующей ссылки НАЗАД / ВПЕРЕД в href='' и при нажатии на клавишу переходить по этим ссылкам.
Как узнать тег из адресной строки, я понял. function showLoc() {var x = window.location.hash;} А вот как его изменить (pic +- 1) и вставить в href соответствующей кнопки не знаю.
Parallelogram вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка TWebBrowser с помощью стрелок клавиатуры Dennis777 Общие вопросы Delphi 10 20.02.2014 10:45
Проверка стрелок Ковалёв Александр Общие вопросы C/C++ 4 04.01.2011 09:01
Переходы в галерее Elefanter WordPress и другие CMS 2 08.06.2010 21:22
Врашение стрелок ddeman666 Помощь студентам 3 16.05.2010 22:37
Перемещать строки вверх-вниз, с помощью стрелок. Rio309 Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 6 27.10.2008 21:47