WebDuty » плагин http://webduty.ru Блог посвящённый веб-технологиям Tue, 10 Apr 2012 19:48:00 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Twitter на вашем сайте с помощью Juitter http://webduty.ru/twitter-%d0%bd%d0%b0-%d0%b2%d0%b0%d1%88%d0%b5%d0%bc-%d1%81%d0%b0%d0%b9%d1%82%d0%b5-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-juitter.htm http://webduty.ru/twitter-%d0%bd%d0%b0-%d0%b2%d0%b0%d1%88%d0%b5%d0%bc-%d1%81%d0%b0%d0%b9%d1%82%d0%b5-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-juitter.htm#comments Fri, 24 Jul 2009 14:06:39 +0000 admin http://webduty.ru/?p=791 Juitter – это jQuery-плагин, который позволяет размещать сообщения с Twitter’ра на вашем сайте. Он достаточно лёгок и быстр :) Вы можете выводить свои твиты, либо определённого пользователя, вы можете ограничить язык твитов, выводить твиты нескольких пользователей, фильтровать их по ключевым словам.
cover
Вы можете настроить Juitter под свои требования, указать количество выводимых сообщений, частоту обновления, отображать аватары пользователей или нет. Вы можете легко настроить его внешний вид, используя CSS.

Установка

Установить Juitter на свой сайт очень просто. Нужно подключить необходимые файлы:

<script src="/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="/app/js/jquery.juitter.js" type="text/javascript"></script>
<script src="/app/js/system.js" type="text/javascript"></script>

Настройки плагина хранятся в начале файла jquery.juitter.js. Разобраться не сложно.
На странице необходимо указать слой, куда будут выводиться сообщения:

<div id="juitterContainer"></div>

Вот и всё.
Дополнительную информацию можно узнать на сайте плагина.
Cкачать архив c плагином и примером

Создание сайтов в новосибирске лучше всех выполнят эти ребята.

]]> http://webduty.ru/twitter-%d0%bd%d0%b0-%d0%b2%d0%b0%d1%88%d0%b5%d0%bc-%d1%81%d0%b0%d0%b9%d1%82%d0%b5-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-juitter.htm/feed 0 Великолепная галерея с помощью jQuery http://webduty.ru/%d0%b2%d0%b5%d0%bb%d0%b8%d0%ba%d0%be%d0%bb%d0%b5%d0%bf%d0%bd%d0%b0%d1%8f-%d0%b3%d0%b0%d0%bb%d0%bb%d0%b5%d1%80%d0%b5%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm http://webduty.ru/%d0%b2%d0%b5%d0%bb%d0%b8%d0%ba%d0%be%d0%bb%d0%b5%d0%bf%d0%bd%d0%b0%d1%8f-%d0%b3%d0%b0%d0%bb%d0%bb%d0%b5%d1%80%d0%b5%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm#comments Fri, 17 Jul 2009 14:33:42 +0000 admin http://webduty.ru/?p=691 В этой статье я покажу вам как с помощью библиотеки jQuery без лишних телодвижений можно сделать отличную галерею. Для её создания мы будем использовать замечательный плагин GalleryView. Чем же хорош этот плагин? Дело в том, что он обладает нужным функционалом, при очень простой установке на веб-страницу. Кроме того, эта jquery галерея отлично интегрируется с CMS.
Gallery Anatomy
А также этот плагин поддерживает темы, причем в архив уже включены 2 стандартные темы: для светлого и тёмного дизайна. GalleryView требует jQuery Timers и jQuery Easing.
Посмотреть пример Cкачать GalleryView

Автор плагина – Джек Андерсон
Cайт плагина

Простой пример

Для начала подключим нужные файлы jquery галереи:

<link type="text/css" rel="stylesheet" href="galleryview.css" /> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> 
<script type="text/javascript" src="jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>

Затем зададим параметры галереи:

$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});

Все другие параметры не обязательны. С ними вы можете поэкспериментировать самостоятельно.

Задаём слой, в котором будет отображаться jquery галерея.

<div id="photos" class="galleryview">
	...
</div>

Внутри него размещаем несколько div’ов. По одному на фотографию. Структура такого вида:

...
<div class="panel">
	<img src="URL фотографии" />
	<div class="panel-overlay">
		<h2>Название фотографии</h2>
		<p>
                  Описание фотографии
		</p>
	</div>
</div>
...

Сразу после нескольких таких div’ов, не закрывая главный слой (id=”photos”), вставляем список вида:

<ul class="filmstrip">
	<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
	<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
	<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
	<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
	<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
	<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
	<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
	<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>

Список состоит из уменьшенных изображений соответствующих фотографий.
Вот и всё! Если всё сделать правильно, должна получиться примерно вот такая галерея.

Темы

Повторюсь, в комплекте плагина включены 2 стандартные темы. Но вы можете создавать и свои собственные. Тема состоит из шести изображений в формате PNG.
nav-dark
Просто создайте изображения с соответствующими именами файлов и размерами:

  • pointer.png and pointer-down.png – 19 x 10
  • next.png – 22 x 22
  • prev.png – 22 x 22
  • panel-nav-next.png and panel-nav-prev.png – 42 x 42

Создайте папку в папке themes, обзовите её как-нибудь и скопируйте ваши файлы в неё. Затем в настройках вашей галереи установите в параметре nav_theme название вашей папки.

Полный список параметров

Параметр Тип значения По умолчанию Описание
panel_width integer (pixels) 400 Ширина галереи
panel_height integer (pixels) 300 Высота галереи
frame_width integer (pixels) 80 Ширина уменьшенной фотографии
frame_height integer (pixels) 80 Высота уменьшенной фотографии
overlay_height integer (pixels) 70 Высота панели описания
overlay_font_size any font size value (px,em,pt,%) ‘1em’ Размер шрифта в описании
overlay_position ‘top’ | ‘bottom’ ‘bottom’ Расположение панели описания
filmstrip_position ‘top’ | ‘bottom’ ‘bottom’ Расположение панели с уменьшенными изображениями фотографий
transition_speed jQuery time value (200,’slow’,etc) 400 Скорость анимации
transition_interval jQuery time value (200,’slow’,etc) 6000 Интервал между сменой фотографий (0 = без автоматической смены)
overlay_opacity float 0.0 – 1.0 0.6 Прозрачность панели описания
overlay_color jQuery color value (rgb,hex,name) ‘black’ Цвет фона панели описания
background_color jQuery color value (rgb,hex,name) ‘black’ Цвет фона галереи
overlay_text_color jQuery color value (rgb,hex,name) ‘white’ Цвет текста панели описания
caption_text_color jQuery color value (rgb,hex,name) ‘white’ Цвет текста названий фотографий в предпросмотре
border css value (e.g. ‘3px dotted #343434′) ‘1px solid black’ Ширина, стиль и цвет рамки галереи
nav_theme (’light’ | ‘dark’) ‘light’ Цвет кнопок навигации
easing jQuery easing value (’linear’,’swing’,etc) ’swing’ Тип анимации
show_captions boolean false Определяет, отображать или нет подписи к фотографиям
fade_panels boolean true Определяет, исчезать панели во время переходов или переключаться моментально.
pause_on_hover boolean false Если true, то анимация останавливается когда указатель наведён на панель.

Посмотреть пример Cкачать GalleryView

Progg it

]]> http://webduty.ru/%d0%b2%d0%b5%d0%bb%d0%b8%d0%ba%d0%be%d0%bb%d0%b5%d0%bf%d0%bd%d0%b0%d1%8f-%d0%b3%d0%b0%d0%bb%d0%bb%d0%b5%d1%80%d0%b5%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery.htm/feed 18 jCrop – jQuery-плагин для кадрирования изображений http://webduty.ru/jcrop-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%ba%d0%b0%d0%b4%d1%80%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd.htm http://webduty.ru/jcrop-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%ba%d0%b0%d0%b4%d1%80%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd.htm#comments Wed, 01 Jul 2009 11:18:18 +0000 admin http://webduty.ru/?p=480 Jcrop – это быстрый и лёгкий способ кадрирования изображений на вашем сайте. Например, его можно использовать на сайтах знакомств для кадрирования фотографий, в различных админках, для быстрого редактирования фотографий продукции, в фотогалереях и т.п.
cover
jCrop работает во всех современных браузерах (Firefox 2 +, Safari 3 +, Opera 9.5 +, Google Хром 0,2 +, Internet Explorer 6 +). Он был внедрён во многие плагины для различных CMS, в том числе Wordpress, Drupal, Textpattern, Facebook и т.д.
Более подробную информацию вы можете получить на сайте разработчика.

Посмотреть пример Cкачать архив

]]> http://webduty.ru/jcrop-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd-%d0%b4%d0%bb%d1%8f-%d0%ba%d0%b0%d0%b4%d1%80%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d1%8f-%d0%b8%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd.htm/feed 4 Меню в стиле Mac OS с помощью jQuery-плагина jqDock http://webduty.ru/%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b2-%d1%81%d1%82%d0%b8%d0%bb%d0%b5-mac-os-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%b0-jqdock.htm http://webduty.ru/%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b2-%d1%81%d1%82%d0%b8%d0%bb%d0%b5-mac-os-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%b0-jqdock.htm#comments Fri, 05 Jun 2009 16:26:46 +0000 admin http://webduty.ru/?p=192 Это jQuery-плагин позволяет легко создавать меню в стиле MacOS (или эффект “fish eye”), превращая обычные изображения в расширяющююся область, вертикальную или горизонтальную. jqDock хорошо работает во всех основных браузерах, включая Internet Explorer 6.
cover1
JqDock несложен в применении, разобраться сможет даже новичок. Всё идеально настраивается, в том числе: выравнивание, скорость анимации, размер изображений, этикетки и т. д.
Плагин разработкан Роджером Барретом. Дополнительную информацию вы можете найти на сайте плагина jqDock.

]]> http://webduty.ru/%d0%bc%d0%b5%d0%bd%d1%8e-%d0%b2-%d1%81%d1%82%d0%b8%d0%bb%d0%b5-mac-os-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e-jquery-%d0%bf%d0%bb%d0%b0%d0%b3%d0%b8%d0%bd%d0%b0-jqdock.htm/feed 3