Простая галерея 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Читайте также:
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.