508.com.ua » type text508.com.ua

jQuery слайд-шоу

admin — Wed, 05 Jun 2013 19:31:26 +0000

Библиотека jQuery – это очень хорошее решение многих проблем. jQuery можно использовать для расширения возможностей сайта и в тоже время упростить процесс. jQuery плагин цикла позволяет очень легко и быстро создать слайд-шоу любой сложности. В этом уроке мы, как раз и будем создавать слайд-шоу. После изучения урока Вы увидите, что процесс создания проходит очень интересно и самое главное быстро.

Перед началом прохождения урока, Вам необходимо скачать библиотеку jQuery и плагин jQuery Cycle.

Шаг №1. Создаем HTML каркас

Так как в примере я не вижу смысла создавать сложный дизайн, мы будем использовать очень легкие HTML и CSS макеты. HTML код будет, например, таким:

JQuery Слайд-шоу

Как Вы можете заметить, я создал очень простой макет слайд-шоу, который состоит из простого тега div с идентификатором "myslides". Важно! Все картинки, из которых будет состоять слайд-шоу, необходимо поместить в один тег div.

Шаг №2. Создание таблиц стилей CSS

Далее, конечно, займемся CSS стилями.

body { background: rgb(50,50,50); } #myslides { width: 370px; height: 220px; padding: 0; margin: 0 auto; } #myslides img { padding: 10px; border: 1px solid rgb(100,100,100); background-color: rgb(230,230,230); width: 350px; height: 200px; top: 0; left: 0 }

Итак, что же мы сделали? Главное, нам необходимо убедится, что контейнер div с идентификатором "myslides" имеет фиксированную высоту и ширину. В этом примере мы установили высоту и ширину элемента myslides равную высоте и ширине изображений.

Теперь давайте посмотрим, что у нас должно получиться.

Шаг №4. JavaScript код

Сейчас переходим к самой интересной части нашего урока. Для того чтобы слайд-шоу заработало сначала необходимо подключить библиотеку jQuery и плагин jQuery Cycle. Между тегами вставьте следующий код:

Ниже разместим, маленький скрипт, который позволяет запустить эффект.

Первая линия написанного сценария, создает название функции. Вторая линия, вызывает элемент myslides и передает его в цикл. Вот и все! Если заново откроете HTML файл слайд-шоу, то уже увидите слайд шоу. Но на этом еще не все. До сих пор мы создали стандартный переход, далее мы будем его улучшать.

Настройка слайд-шоу

Сейчас мы посмотри, как изменить переход в слайд шоу. Я собираюсь показать, как можно изменить скорость перехода и изменить сам переход.

Настройка плагина очень проста. Если Вы хотите изменить переход, то необходимо чуть-чуть изменить код скрипта.

$(‘#myslides’).cycle({ fx: ‘cover’ });

Теперь мы зададим время перехода.

$(‘#myslides").cycle({ fx: ‘cover’, speed: 500 });

Еще одна вещь, какую мы можем сделать, это уменьшить время тайм-аута, тоисть время необходимое для каждого перехода.

$(‘#myslides’).cycle({ fx: ‘cover’, speed: 500, timeout: 2000 });

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

shuffle

$(‘#myslides’).cycle({ fx: ‘shuffle’, easing: ‘backout’, delay: -4000 });

zoom

$(‘#myslides’).cycle({ fx: ‘zoom’, sync: false, delay: -2000 });

turndown

$(‘#myslides’).cycle({ fx: ‘turnDown’, delay: -4000 });

curtainX

$(‘#myslides’).cycle({ fx: ‘curtainX’, sync: false, delay: -2000 });

scrollRight

$(‘#right’).cycle({ Fx:’scrollRight’, next:’#right’, timeout: 0, easing:’backinout’ });

Полный программный код

Ваш конечный HTML файл должен выглядеть следующим образом:

JQuery Слайд-шоу

Заключение

На простом примере Вы смогли увидеть, как работает плагин jQuery Cycle. Имейте в виде, что этот плагин имеет практически неограниченные возможности.

Изучаем LESS: введение

admin — Thu, 25 Apr 2013 04:44:34 +0000

Сегодня мы начинаем серию статей, посвященных технологии LESS – динамическому языку, который использует CSS-код и, так сказать, накачивает его стероидами. LESS позволяет вам использовать переменные, mixin’ы, разветвленные правила и даже функции прямо внутри кода CSS. Это поможет вам в значительной степени ускорить процесс разработки и улучшить качество проектов. Конечно же, как и в любом деле, вам потребуются некоторые знания, но как только вы поймете суть данной технологии, вам вряд ли снова захочется использовать чистый код, без применения LESS.

Содержание нашего курса

* Введение
* Использование переменных
* Использование mixin’ов
* Использование разветвленных правил
* Использование функций
* Разделяй и властвуй!
* Применяем на практике

Итак, мы все разложили по полочкам, и теперь вы знаете, чего ожидать в следующих частях нашего руководства. Давайте начнем с введения в LESS.

Что такое LESS и почему меня это должно волновать?

Нарабатывая опыт работы в сфере веб, мы обнаружили, что люди подразделяются на 3 типа, когда дело доходит до LESS (либо до любого другого инструмента предварительной обработки CSS). Среди них: люди, которые никогда не слышали об этом, те, кто попробовали, но считают, что эта технология не для них, и те, кто попробовали и им понравилось.

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

Из материалов Wikipedia, LESS – это:

Динамичный язык для разработки каскадных таблиц стилей, созданный Алексисом Селлиером. Он был создан под вдохновением от Sass, и повлиял на обновленный синтаксис Sass под названием «SCS», который перенял его форматирование синтаксиса на примере блоков в CSS.

LESS появился в 2009 году, и в последние месяцы стал стремительно набирать обороты, так как его все чаще и чаще применяют в проектах, как маленьких, так и гигантских, включая Bootstrap из Twitter’а – самый популярный проект на GitHub.

С ознакомлением с новыми сериями этого руководства, вы все ближе и ближе будете узнавать LESS, и как его использовать. Вкратце можно сказать, что он поможет вам создавать мощные библиотеки переменных, быстрые CSS3-эффекты и многое другое.

Какими ресурсами следует воспользоваться?

В интернете есть множество мест, где вы сможете прочитать о LESS, но для начала мы настоятельно рекомендуем вам сосредоточиться на less" type="text/css" href="type.less">
Как только вы загрузите все необходимые LESS-файлы, наступает время вызова файла LESS JS, который компилирует все ваши файлы LESS в одну каскадную таблицу стилей CSS.

Это то, что требуется для работы на стороне клиента. Удостоверьтесь в том, что вы вызываете файл less.js после того, как в документ включены каскадные таблицы стилей .less.

К сожалению, мы не будем вдаваться в подробности о том, как настраивать LESS на серверной стороне, просто потому, что нам не приходилось достаточно работать подобным образом, и не хотелось бы вводить вас в заблуждение. Вместо этого, давайте лучше подробнее изучим третий метод, который мы настоятельно вам рекомендуем. Используйте данную технологию, не прибегая к сторонам вообще.

Использование LESS.app для Mac OS X

Один из самых мощных клиентов, которым мы пользовались при разработке кода в LESS – это LESS.app для Mac OS X (простите нас, пользователи Microsoft; хотя, вы все равно можете попробовать SimpLESS). LESS.app компилирует ваши LESS-файлы в CSS-файл в процессе разработки, и даже дает вам возможность минимизировать ваш CSS-файл. Это делает процесс разработки стилей очень удобным и мощным, так как вы можете использовать множество LESS-файлов, компилировать их в одну каскадную таблицу стилей, минимизировать и загружать на сервер.

Для того чтобы использовать LESS.app, просто перетащите вашу папку с разработкой в окно приложения и LESS.app автоматически обнаружит все ваши LESS-файлы. Затем вы можете указать, который из них должен быть конвертирован в CSS, где его следует сохранить (в вашей папке с разработкой) и нужно ли его минимизировать.

Отличный инструмент, не сомневайтесь!

Так что, выкроите для себя пару минут в день на сегодня, и не забывайте следить за последующими этапами руководства.

В нашем следующем уроке мы будем изучать способы применения переменных в LESS. До встречи!

Создание CAPTCHA на PHP

admin — Sun, 22 Apr 2012 23:54:47 +0000

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

Для начала создадим простую форму.

Теперь приступит к созданию защиты от спамеров. CAPTCHA – это изображение состоящее из случайных символов.

Для реализации CAPTCHA нам прейдет на помощь PHP. Давайте создадим сценарий, который будет генерировать случайное изображение.

Для реализации CAPTCHA мы будем использовать сессии. На какой странице Вам необходимо реализовать CAPTCHA, откройте сессию.

Теперь создадим проверку ввода CAPTCHA. Если пользователь введет правильно, будут выполняться действия, отправка на электронную почту, добавление комментария и т.д.

if($_SESSION["captcha"]==$_POST["captcha"]) { //CAPTHCA совпадает. Идет выполнение действий. }

Наконец присоединим нашу CAPTCHA к форме.

Вот и все. Этот простой способ поможет вам защититься от спамеров.

P.S. сценарий создания CAPTCHA лучше всего размещать в файле с формой.