На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Простая галерея js - три строчки кода без jQuery

Сейчас можно найти в интернете множество навороченных галерей и слайдеров. Большинство из них использует jQuery, есть также работающие на чистом css. Обилие переходов и эффектов впечатляет. Но вот для обыкновенного сайта найти обыкновенную простую галерею без использования jQuery и других заморочек не представляется возможным. Значит, стоит её написать самостоятельно. Итак, перед вами простая галерея js - три строчки кода без jQuery.

Вот они эти три строчки:

function newOk (ij) {
zx = document.getElementById('in_scrfocus');   
zx.innerHTML = "<img src="img/Life-of-Pix-"+ij+".jpg">";}
А вот так работает эта галерея:


Для того, чтобы заработала такая галерея, надо функцию newOk заключить в теги <script> (как обычно для ява скриптов), а в нужное место на странице добавить элемент div (для показа целого изображения):

<div id="in_scrfocus" name="in_scrfocus">
<img src="img/Life-of-Pix-1.jpg" />
</div>
и уменьшенные изображения, заключенные в ссылки:

<a href='javascript:void(0);' onclick='javascript:newOk(1);'><img src="img/Life-of-Pix-1.jpg" width="110"/>
<a href='javascript:void(0);' onclick='javascript:newOk(2);'><img src="img/Life-of-Pix-2.jpg" width="110"/>
<a href='javascript:void(0);' onclick='javascript:newOk(3);'><img src="img/Life-of-Pix-3.jpg" width="110"/>





тегизаметки, javascript








Как оптимизировать php скрипт
Программа "Оракул Хайяма" - предсказания с помощью рубаи


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Напишите и получите ответ в ближайшее время. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru