CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 267   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

24

Простая галерея на jQuery

Jemand 26282 ,
JavaScript

1. CSS

#gallery {
	width: 528px;
	overflow: hidden;
	margin: 0 auto;
	background: #f8f8f8;
	border: 1px solid #c7c7c7;
	border-radius: 5px;
}
#gallery a {
	display: block;
	float: left;
	color: #fff;
	width: 150px;
	height: 150px;
	margin: 8px;
	padding: 4px;
	border: 1px solid #c7c7c7;
	border-radius: 3px;
}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение jQuery Touch Gallery Min

<script type="text/javascript" src="jquery.touch-gallery-1.0.0.min.js" /></script>

4. HTML

<!--1.jpg - оригинальное изображение, 1-th.jpg - уменьшеное изображение -->
<div id="gallery">
	<a href="1.jpg"><img src="1-th.jpg" /></a>
	<a href="2.jpg"><img src="2-th.jpg" /></a>
	<a href="3.jpg"><img src="3-th.jpg" /></a>
	<a href="4.jpg"><img src="4-th.jpg" /></a>
	<a href="5.jpg"><img src="5-th.jpg" /></a>
	<a href="6.jpg"><img src="6-th.jpg" /></a>
	<a href="7.jpg"><img src="7-th.jpg" /></a>
	<a href="8.jpg"><img src="8-th.jpg" /></a>
	<a href="9.jpg"><img src="9-th.jpg" /></a>
</div>
<!--1.jpg - оригинальное изображение, 1-th.jpg - уменьшеное изображение -->

5. JavaScript

<script type="text/javascript">
	$('#gallery a').touchGallery();
</script>

JavaScript нужно добавить перед закрывающим тегом </body>

Рекламная пауза

» 24 комментария

  1. Спасибо! очень полезно. Пригодилось))))) И очень все просто

    • Пожалуйста…

      • Ну единственное, если на 1 страницу размещать слишком много картинок, они начинают тупить и не открываться. приходится разбивать.
        atrio-russia.ru
        Но моих 0левых знаний на большее не зватит

        • Попробуйте скрипт iLoad.
          Очень удобный и вроде не тупит.

          • 4 февраля 2012 16:46

            Thumb up 0  Thumb down0 0

            А как его использовать? Научите нуба)

          • 6 февраля 2012 11:08

            Thumb up 0  Thumb down0 0

            Что именно вызывает трудности?

          • 9 февраля 2012 11:56

            Thumb up 0  Thumb down0 0

            Да все… разобралась, погуглила. красиво получилось. спасибо за совет!)
            ТОлько еще 1 вопрос… Эксплорер ругается на элементы АктивХ. На моем компьютере-то ладно, но просто такое же будет у посетителей сайта? или это можно как-то обойти?

          • 15 февраля 2012 21:19

            Thumb up 0  Thumb down0 0

            Что пишет?

  2. подскажите пжл, почему у меня изображения открываются в новом окне? отображается все корректно, но когда нажимаешь на изображение они просто открываются в новой вкладке.
    за ранее спасибо.

  3. Спасибо огромное, очень помогли!

  4. У меня на странице отображается только 2 столбца с фотографиями, все прекрасно работает но третий столбик куда-то пропал.. где его можно найти?
    Заранее спасибо!

  5. IE как я понял не поддерживает данную галерею, а жаль очень красивая

  6. Обновил Оперу до 12-ой версии и всё… Фотографии разворачивает, а обратно не сворачивает. Может сможете подсказать в чем дело? Спасибо.

  7. Добрый вечер. а почему в новой версии Опера картинка не закрывается? как бы зависает и всё =(


Оставить комментарий