Блог Web-мастера

jQuery, php, CSS и немножко SEO


Тэги статей ‘галерея’

Фотогалерея Image.VIT

Четверг, апреля 9, 2009

Фотогалерея Image.VIT — галерея пользователей феодосийской городской сети ООО ТКК «ВИТ»

image-vti-net-ua

Фотогалерея

Фотография - это в первую очередь воспоминания, мгновение, сохраненное для будущего. Раньше эти мгновения хранились в фотоальбомах, в шкафу. Но для нашего стремительного “цифрового” времени этого мало. Необходимо дать всем желающим, или только тем, кому мы доверяем,  возможность вместе с нами просматривать наши счастливые  моменты жизни, для этого и была создана фотогалерея Image.vit

Галерея Image.VIT — это:

  • личные фотоальбомы
  • участие в общих альбомах различных тематик
  • доступ к своим альбомам не только из Феодосийской локальной сети VIT, но и Интернет
  • возможность давать ссылки на свои альбомы и фотографии друзьям и знакомым со всего мира
  • Коды для вставки изображений на сайт, форум, блог
  • Интересные акции и конкурсы для всех

Компания ВИТ с удовольствием приглашает Вас принять участие в новом проекте — тематических фотоконкурсах. Любой конкурс - это, прежде всего, великолепная возможность заявить о себе и своих возможностях, продемонстрировать свое умение в той или иной области. Цель конкурса - выявить новых талантливых участников-фотографов, которые готовы поделиться своим взглядом на мир сквозь объектив своей фотокамеры.

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Tags: ,
Опубликовано в Новости, Обзоры | No Comments »

10 галерей для Вашего сайта

Вторник, апреля 7, 2009

1. Лайтбокс Lightbox2

Лайтбокс - простой, ненавязчивый скрипт, используется для наложения изображения на текущую страницу. Легко и быстро настраивается и работает во всех современных браузерах. Особенности: можно использовать с группами изображений и легко переключаться между ними (предыдущее - следущее).  Лайтбокс анимированно ресайзится под размеры изображения. Используется prototype.

lightbox | jquery

lightbox | prototype

2. Cлайдер изображений jQuery Image Strip

jQuery Image Strip - слайдер изображений, с эффектом скольжения по-горизонтали. Используется jQuery.

jQuery Image Strip

Image Strip | jquery

3. Cлайдер изображений slideViewer  1.1

slideViewer 1.1 - простой слайдер изображений, с эффектом скольжения по-горизонтали. Построен на ненумерованных списках. Используется jQuery.

gallery-3

slideViewer | jquery

4. Cлайдер изображений Photo Slider

Photo Slider - слайдер изображений, отличается от остальных автоматической прокруткой изображений, с возможностью приостановки. Используется jQuery.

gallery-4

Photo Slider | jquery

5. Обрезание изображений jQuery Thumbs

jThumb - динамично обвертывает изображения  и / или ссылки с изображениями в div. Вы можете задать им конкретные размеры (ширина и высота) в CSS файле. В кадр попадает середина изображения. Используется jQuery.

gallery-5

jQuery Thumbs | jquery

6. Слайдер изображений  jCarousel Lite

jCarousel Lite - очень легкая галерея, всего лишь 2 kb.  Позволяет прокручивать изображения, HTML - код. Используется jQuery.

gallery-6

jCarousel Lite | jquery

7. Эффекты смены изображений jQuery Cycle Plugin

Cycle Plugin - плагин jquery, используется для создания эффектов при смене изображений в галерее.

gallery-7

Cycle Plugin | jQuery

8.  Галерея с миниатюрами lightweight image gallery

lightweight image gallery - галерея с миниатюрами. Используется javascript. gallery-8

9. Галерея с миниатюрами Galleria

Galleria - красивая галерея с миниатюрами. Особенности: показ описания изображения, возможность  листания изображений (предыдущее - следующее) Используется jQuery.

gallery-9

Galleria | jquery

10.  Простая галерея на HTML - HTML vs jQuery

html vs jquery - самая простая галерея. В ее основе лежит html - тэг “marquee”. Управление галереей осуществляется небольшими функциями javascript. Код галереи - 10 строк (галерея + управление). Используется HTML.

Галерея на HTML

html vs jquery | html + javascript

Вот, собственно, и всё! Желаю блестящих реализаций всех ваших идей.

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Tags: , ,
Опубликовано в javascript | 4 Comments »

HTML vs Jquery

Вторник, марта 24, 2009

В этой статье я расскажу как сделать простейшую галерею на html. Название “HTML vs Jquery” ,безусловно преувеличено. Чистый html
не пожет конкурировать как с jquery, так и с другими библиотеками, но всё зависит от поставленной задачи.
Если нам необходимо сделать просто прокрутку изображений, тогда конечно самым простым способом будет использование HTML-тэга marquee. И если нам будет необходимо использовать управление галереей, тогда нам не обойтись без небольших javascript‘ов.

Пример того, что у меня получилось:

Галерея на HTML

Галерея на HTML

HTML Код:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML marquee | HTML vs Jquery | goldblog.com.ua</title>
<!--Подключаем стили сss-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset class="gallery">
<legend>HTML</legend>
<!--Формируем бегущую строку-->
<marquee id="gall" scrolldelay="0" scrollamount="3" direction="up" truespeed
onmouseover='document.getElementById("gall").stop();'
onmouseout='document.getElementById("gall").start();'>
<img src="h.gif" ><img src="t.gif" ><img src="m.gif" ><img src="l.gif" >
</marquee>
</fieldset>
<fieldset class="manage">
<legend>Управление HTML-галлереей</legend>
<!--Устанавливаем кнопки управления галереей-->
<!--Запустить бегущую строку-->
<div id="play"   onclick='document.getElementById("gall").start();'></div>
<!--Остановить бегущую строку-->
<div id="paused" onclick='document.getElementById("gall").stop();'></div>
<!--Изменить направление движения бегущей строки-->
<div id="up"     onclick='document.getElementById("gall").direction="up";'></div>
<div id="left"   onclick='document.getElementById("gall").direction="left";'></div>
<div id="right"  onclick='document.getElementById("gall").direction="right";'></div>
<div id="down"   onclick='document.getElementById("gall").direction="down";'></div>
</fieldset>
<a href="http://goldblog.com.ua">goldblog.com.ua</a>
</body>
</html>

В тело галереи можно вставить всё, чего душа пожелает: блоки, ссылки, изображения и тд…

Описание javascript-функций:

  • document.getElementById(”gall”).start() - запускает бегущую строку с id=”gall“
  • document.getElementById(”gall”).stop() - останавливает бегущую строку с id=”gall“
  • document.getElementById(”gall”).direction=”up” - заставляет бегущую строку двигаться вверх
  • document.getElementById(”gall”).direction=”left” - заставляет бегущую строку двигаться влево
  • document.getElementById(”gall”).direction=”right”- заставляет бегущую строку двигаться вправо
  • document.getElementById(”gall”).direction=down”- заставляет бегущую строку двигаться вниз

Рабочий пример HTML vs jquery.rar(14 Kb)

Юзайте на здоровье

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Если Вам понравилась эта статья,
подпишитесь на RSS !

Tags:
Опубликовано в HTML, javascript | 4 Comments »