Простая галерея 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"/>
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

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




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Начало работы с SQLite в Visual Studio на C#: создание бд, таблиц, вставка записей и отображение
Урок 9. Цикл For Each Java
Используем C#, чтобы узнать, из чего сделан ваш компьютер