На нашем сайте мы используем 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"/>




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



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

Читайте также:




Урок 11. Перегрузка реляционного оператора C#
Ошибка 0xc000007b при запуске Visual Studio 2013


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