24
02
10
4

jQuery для чайников | Эффект линзы | плагин JQzoom

Рубрики: jQuery
Тэги: , , ,

lenseffect.jpg

Вот такую любопытную штуковину я нашел у веб разработчика из солнечной Италии Марко Рензи (Marco Renzi). Плагин называется jQzoom (версия 1.0.1 Evolution). С его помощью можно реализовать несколько вариаций весьма красивого и впечатляющего эффекта увеличительного стекла при наведении указателя мыши на картинку-превьюшку.

Для реализации эффекта понадобится сам плагин jQzoom, который можно бесплатно скачать на сайте автора, и плюс до кучи библиотека jQuery в min варианте. Кроме того, понадобятся две картинки одного и того же изображения: большая и маленькая. Маленькая будет работать превьюхой, а большая, соответственно, показывать голую задницу увеличенные фрагменты ее же и рядом с ней.

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

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom1.0.1.js" type="text/javascript"></script>

Как вы уже знаете, jQuery привязывается к классам или селекторам деталей веб-страницы. В нашем случае для работы понадобится всего лишь один класс, привязанный к ссылке, которая, в свою очередь, является чем-то вроде якоря. Рассмотрим фрагмент кода страницы:

<a href="bigpicture.jpg" class="jqzoom">
<img src="smallpicture.jpg" alt="" />
</a>

Обратите внимание на адрес ссылки. Здесь используется просто имя большой картинки. Это говорит о том, что ссылка на самом деле не является таковой, а тэг <a href> используется лишь как удобная оболочка. “Текстом” же этой псевдо-ссылки является картинка превьюшки. Вот так вот ненавязчиво и оригинально.

Теперь о том, как работает эффект. Для начала приведем код скрипта, который необходимо добавить на страницу в пределах тэгов <head></head>:

Читать полностью →

16
02
10
0

Проблема с подпиской на email рассылку от Feedburner

Рубрики: Полезняшки
Тэги: , , , ,

Сегодня я столкнулся с такой проблемой, попытавшись подписаться на свою же собственную email рассылку от Feedburner через стандартную форму, установленную на моем новом блоге Dizweb.Ru:

fburner.gif

Стандартный код формы выглядит следующим образом:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=имя_фида', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address: </p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="имя_фида" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Как видите, здесь задействован попап (target=”popupwindow”). Сдается мне, что моему Dr.Web-у это сильно не понравилось, и он решил подгадить таким вот подлым образом. То есть, код формы правильный, но антивирус, установленный на моем компе, не дает ей верно отрабатывать свой хлебушек.

Я уверен, что у многих пользователей также установлены антивирусные проги (если нет — вы камикадзе) с настройками на блокировку всплывающих окон. И если вы хотите, чтобы ваша рассылка на email от Feedburner у всех пользователей работала без проблем, то замените стандартный код на следующий:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="_blank"><p>Enter your email address: </p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="имя_фида" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Теперь форма будет открываться просто в новом окне. Не забудьте только заменить слова “имя_фида” на свое. То есть, если адрес фида http://feeds.feedburner.com/dizweb, то имя, соответственно — dizweb.

UPD: Как оказалось, хулиганил не антивирь, а сама Опера, ибо в других браузерах изначальный код работал исправно. Но как бы там ни было, переделанный вариант выглядит кошернее, имхо.

10
02
10
14

jQuery для чайников | Начальные сведения | Простой слайдер

Рубрики: jQuery
Тэги: ,

jqsipleslide.gif

Привет всем любителям и осваивателям прелюбопытнейшей штуковины по имени jQuery! Продолжим наши изыскания и изучения.

Сегодня разберем базовый принцип использования библиотэки jQuery на примере простейшего слайдера — блока с контентом, плавно вылезающим из-за края экрана при клике по торчащей закладке. Также плавно и сноровисто он заползает обратно при повторном клике по той же самой закладке. Применить эту простенькую вещицу можно на любом сайте, разместив поверх основного содержимого и положив внутрь что-нибудь полезное. Например, ссылки на ваши профили в социалках.

Но обо всем по порядку. Для начала еще раз остановимся на том, как пристегнуть библиотеку jQuery к странице вашего сайта. Понятное дело, что саму б-ку нужно вначале скачать. Идем на родину — jquery.com Скачать можно как полную версию (156 Кб), так и минимизированную (69 Кб). Разница между ними лишь в удобстве чтения для разработчиков. Если хотите поковыряться в коде самой б-ки, то качайте полную версию. Если только для использования на вашем сайте, то минимальную. В минимальной просто оставлен весь функционал, но убраны все комментарии. Файл с библиотекой кладем в корневую папку сайта.

Чтобы пристегнуть б-ку к странице, необходимо в пределах тэгов <head></head> прописать адрес к б-ке:

<script type="text/javascript" src="jquery.js"></script>

Читать полностью →

Стр. 7 из 41« 1...«45678910»...Посл. »