Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Fото галерея на jquery

Fото галерея на jquery

Сегодня поговорим о том как собственными руками сделать красивую и простую галерею. Идея такова разметить таблицу и засунуть в неё нужные нам изображения, что бы по клику на эскиз вызывалась процедура которая и будет показывать нам выбранное изображение.

Сss код:

table{border-collapse:collapse;}
td{padding:10px; border:1px solid #ccc;cursor:pointer;}


Добавляем рамки и указатель курсора, а также отступы между ячейками с эскизами

Скрипт:

function changePicture(pic)
{
    document.getElementById('bigImagePic').src=pic;
}


берем элемент id равный bigImagePic и заменяем на ссылку с изображением которая была передана в pic

Html код:

<table border="0">
<tbody>
<tr>
<td colspan="5"><img id="bigImagePic" src="pic_1.JPG" alt="" /></td>
</tr>
<tr>
<td onclick="changePicture('pic_1.JPG')"><img src="pic_1_small.JPG" alt="" /></td>
<td onclick="changePicture('pic_2.JPG')"><img src="pic_2_small.JPG" alt="" /></td>
<td onclick="changePicture('pic_3.JPG')"><img src="pic_3_small.JPG" alt="" /></td>
<td onclick="changePicture('pic_4.JPG')"><img src="pic_4_small.JPG" alt="" /></td>
<td onclick="changePicture('pic_5.JPG')"><img src="pic_5_small.JPG" alt="" /></td>
</tr>
</tbody></table>


Демо: смотреть
Скачать: changepicture.zip [548 b] (cкачиваний: 110)
Опубликовал dimas_ua, 15-09-2010, 00:00 Комментариев: 1
 (голосов: 0)
Пишет kronosua, 21 сентября 2010 22:47
  • Сообщений: 0
  • Новостей: 0
це зовсім не jquery