Что такое jQuery и jQuery плагины и как их прикрепить к сайту

Разместил / Просмотров: 16 676 / комментариев 30

Приветствую, Вас уважаемые читатели блога. В этот солнечный и морозный день хотелось бы поделиться своими знаниями о таком интересном понятии как JQuery. И что это за такое страшное слово? :-) Говорю сразу, что я не пишу эти скрипты и естественно Вас этому учить не буду, просто хочется дать определение этому понятию, а также рассказать как его применять на сайте, с чем его кушать, а так же как его, так сказать, прикрутить на свой ресурс.

Перед тем как начать хочу сказать, что на данную стать меня натолкнул вот этот комментарий:

Наталия полностью права, мой блог посвящён, в принципе, JQuery, и JQuery плагинам, но что это такое, и как эти плагины применять на сайтах я не писал ниразу. Дорогие читатели, простите меня :-) я исправлюсь, честно :-)

Наталия, спасибо Вам большое за такой комментарий! И хотелось бы отметить, что Наталья — начинающий блоггер ( как и я :-) ) и всем родителям советую почитать её блог Маминого малыша. Наталья, у Вас и Вашего блога большое будущее.

Ладно, не будем сильно отвлекаться от темы, давайте перейдём ближе к делу. Дам общее понятие что такое JQuery.

JQuery

jQuery – это в первую очередь большая библиотека JavaScript скриптов, с помощью которой можно получить доступ к любому элементу так называемого DOM (объектная модель документа). Другими словами с помощью этого  jQuery на сайте можно сделать что хочешь как хочешь и когда захочешь, в частности касается это анимации :-) В основном эту библиотеку используют для украшения сайта, которая уже давно заменила flash. Если не в далёком прошлом красивый сайт можно было сделать только при помощи флеш элементов, то в настоящее время всё это можно сделать с помощью  jQuery.

Честно признаюсь не хочется долго объяснять именно значение этого слова, а хочется подробнее остановиться на jQuery плагинах, как их прикрепить к сайту. Но для начала давайте узнаем, что такое плагины.

jQuery плагины

jQuery плагины — это уже готовые скрипты плюс HTML и CSS, которые нужно просто скачать и прикрепить на свой ресурс. Слайдеры, галереи, всякие подсказки всплывающие, плавная прозрачность, многоуровневые меню и т.д. Перечислять можно бесконечно. Как оказывается прикрепить уже готовый скрипт бывает не так уж и легко, тем более если никогда не сталкивался с этим.

Чтобы было понятнее я буду прикреплять плагин к странице на примере, потому что на примере всегда понятнее.

Перед тем как начать Вам нужно на сайт прикрепить саму библиотеку jQuery, тут ничего сложного просто между тегами <head> и </head> поставьте вот это:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Вот и всё, первый шаг сделали :-)

Пример

Например, мне захотелось на свой сайт прикрепить вот такие интересные и красивые картинки с классной анимацией:

Пример можете посмотреть здесь, а скачать тут. Далее я хочу прикрепить всё это добро к новой странице. Создаю новую страницу, затем скачиваю красивую галерею, естественно с открытым кодом, и вижу следующее:

Как видите у меня есть три папки с картинками, стилями и с самим скриптом, а также три примера index.html. В данном случае будем использовать именно его.

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

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

Важные моменты в данном примере.

Нужно прикрепить стили именно того плагина, который прикрепляете, в данном случае это делается так:

<link rel="stylesheet" type="text/css" href="css/style1.css" />

Эту строчку нужно ставить между тегами <head> и </head> и на той странице где будет сама галерея, если у Вас, например Вордпресс, нужно ставить в header.php.

Так же ещё нужно прикрепить и сам скрипт этой красивой анимации, опять же между тегами:

<script src="Ссылка на скрипт"></script>

Ну а сейчас давайте посмотрим, что у меня получилось. Напоминаю, что я создал новую страницу и прикрепил туда галерею. Вот полюбуйтесь:

Пример

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

< !DOCTYPE html>

<!-- Так прикрепляются стили -->

<link rel="stylesheet" type="text/css" href="css/style1.css" />

        <!-- Так прикрепляется библиотека jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <!-- Так прикрепляется сам скрипт анимации -->
<script src="js/jquery.proximity.js"></script>

</pre>
<div class="container"><!-- Изображения --></div>
<section class="pe-container">
<ul id="pe-thumbs" class="pe-thumbs">
<li><a href="#"><img src="images/thumbs/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/7.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/8.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/9.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/10.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/11.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/12.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/13.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/14.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/15.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/16.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/17.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/18.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/19.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/20.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/21.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/22.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/23.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/24.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/25.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/26.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/27.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/28.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/29.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/7.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/4.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/5.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/thumbs/6.jpg" alt="" /></a></li>
</ul>
</section>
<pre>
 <!-- анимация -->
<script>// <![CDATA[ $(function() { var Photo = (function() { // list of thumbs var $list = $('#pe-thumbs'), // the images $elems = $list.find('img'), // maxScale : maximum scale value the image will have // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity settings = { maxScale : 1.4, maxOpacity : 0.9, minOpacity : Number( $elems.css('opacity') ) }, init = function() { // minScale will be set in the CSS settings.minScale = _getScaleVal() || 1; _initEvents(); }, // Get Value of CSS Scale through JavaScript: // http://css-tricks.com/get-value-of-css-rotation-through-javascript/ _getScaleVal= function() { var st = window.getComputedStyle($elems.get(0), null), tr = st.getPropertyValue("-webkit-transform") || st.getPropertyValue("-moz-transform") || st.getPropertyValue("-ms-transform") || st.getPropertyValue("-o-transform") || st.getPropertyValue("transform") || "fail..."; if( tr !== 'none' ) { var values = tr.split('(')[1].split(')')[0].split(','), a = values[0], b = values[1], c = values[2], d = values[3]; return Math.sqrt( a * a + b * b ); } }, _initEvents = function() { // the proximity event $elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function( event, proximity, distance ) { var $el = $(this), $li = $el.closest('li'), scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale, scaleExp = 'scale(' + scaleVal + ')'; // change the z-index of the element once it reaches the maximum scale value ( scaleVal === settings.maxScale ) ? $li.css( 'z-index', 1000 ) : $li.css( 'z-index', 1 ); $el.css({ '-webkit-transform' : scaleExp, '-moz-transform' : scaleExp, '-o-transform' : scaleExp, '-ms-transform' : scaleExp, 'transform' : scaleExp, 'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity ) }); }); } return { init : init }; })(); Photo.init(); }); // ]]></script>

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

  • Александр, Вы меня прямо на весь мир пропиарили)) Спасибо на добром слове!
    Пост отличный, спасибо, уже намного понятнее.
    Но вопросов куча:
    1. Для чего все остальные папки? Я так поняла, что Вы показали способ наименьшего сопротивления, а если бы я хотела использовать эти папки по назначению? Как тогда? (тема для нового поста)
    2. В исходном коде, насколько я понимаю, собраны фрагменты кода, которые нужно в блоге вставлять в разные места ( в хидер, CSS, и место, где будет нужный элемент) да?
    3. Если я хочу вставить элемент не на отдельную страницу, а на главную, сразу под шапкой, что куда вставлять (на вордпрсесс)?
    Заранее спасибо. Вы очень дружелюбно настроены, на таких блогах приятно время проводить))

  • Здравствуйте, Наталья.
    1.Папка js — там сам скрипт, css — там все стили, images — картинки.
    Так просто сделано чтобы удобнее было, как бы всё по полочкам разложено. Их можно настроить под себя, главное чтобы ссылки на эти файлы были правильными
    2.Тут всё правильно, но опять же повторюсь везде всё по разному.
    3. Можно в header.php или в index.php. Если в header.php тогда после тега правда там нужно пробовать подставлять. Я бы советовал в index.php после этой строки < ?php get_header(); ?> и опять же нужно пробовать подставлять толи под шапкой толи над шапкой. Тут объяснит трудно, потому что код темы везде разный.
    Наталия, ещё раз спасибо Вам :-)

  • Денис

    Прекрасно! Сколько я нахожусь на этом сайте, я ни разу не заметил ни одной отрицательной детали. Меня очень радует этот сайт и своим дружелюбием заставляет заходить на него снова и снова. Прекрасный сайт.

    Полезная статья для новичок. Таких сейчас мало совсем. Четко, грамотно, с примерами. «то что доктор прописал».

  • Денис, спасибо Вам за такие слова. Всегда рад :-)

  • Я бы советовал в index.php после этой строки
    Вот именно туда я вчера и вставила, и ничего не получилось))) Вернее, получилось вот что: лента с моими картинками вывелась, но она не двигалась, расположена была внизу самой шапки, а всего остального блога не было)))
    Буду сегодня опять пробовать)
    Потом расскажу, когда получится)

  • Денис, трудно с Вами не согласиться! Атмосфера — действительно потрясающая! Обычно на таких, технических блогах все такие шибко умные, что страшно и спросить у них))
    Но вот одна деталь все-таки есть — нет подписки по почте. Александр, я жду))
    Кстати, у Вас еще два новых подписчика, поздравляю!

  • Наталия, значит что то упустили, ели код который ставили не закрыли и он таким образом создаёт конфликт. В общем нужно пробовать и смотреть пример, где всё нормально работает

  • Спасибо Вам огромное! Честно, так приятно :-) Подписка скоро будет готова :-)

  • Подписку на почту уже сделал, как и обещал :-)

  • Подписалась:) Теперь я Ваш блог не потеряю)

  • Александр, я это сделала!
    А упустила, оказывается, самое главное: не закачала сам плагин))) Вы же об этом не написали, а я старательно все повторяла по пунктам)
    Вы, наверное, не рассчитывали, что есть такие «чайники», которые до этого сами не додумаются).
    В общем, первый шаг сделан, теперь окопаюсь на Вашем сайте на долго, пока не научусь!
    Спасибо Вам огромное!

  • Извините, Наталия, я и правда об этом не написал. В вордпрессе на много всё легче чем на сайте без движка, потому что существует множество плагинов, которые существенно облегчают задачу :-)

  • Спасибо огромное :-)

  • Ferox

    Александр, все сделал по пунктам, пробывал помещать в разные места адреса на скрипты, но лучшее, что получалось — это пустые маркированые рамки для изображений в колонку.
    Устанавливал как шаблон для отдельной страницы, скопировав целиком скрипт , вставил под get_template_part в базовой теме twentyten.
    В комментариях прочитал, что нужно установить какой-то плагин. Возможно, всем будет удобнее знать, какой и где. Скачаный .zip архив установить не удалось.

  • Ferox

    Нашел ошибку — распаковал не в то место скрипты. Теперь все позиционируется верно, но вместо маниатюр — рамочки «Изображение». Но их фон отображается.

  • Такое бывает, когда размер выбранной вами картинки не соответствует предусмотренной плагином, или же неверно указан адрес картинки.

  • Поддерживаю, Наталию. Ferox, можно пример посмотреть, что именно получилось? Скиньте ссылку.

  • Ferox

    Я на компьютере тестировал. Вложил скриншот и файл page-new.php в архив:
    http://feroxblog.in/wp-content/uploads/2012/03/Desktop.rar
    Не разместил на блоге потому, что он самодельный, стандартная тема надежнее.

  • Ferox

    Простите за второй даблпост — шаблон самодельный, не блог.

  • Ferox, у Вас ссылки на миниатюры не правильные, по этому происходит такая ошибка. Браузер картинки не может найти. Поставьте именно ссылки на изображения в коде.

  • Ferox

    Получилось. Переместил картинки и скрипты из папки с темой в корневую. Спасибо вам

  • Всегда рад :-)

  • Дмитрий

    Божественно)

  • Александр

    да это спам был

  • Александр, где спам был?

  • Спасибо, Дмитрий :-)

  • denis

    Александр мне не понятно если в папке js лежит сам скрипт анимации то есть jquery.proximity.js к которому мы прикрепили путь в блоке head, так а зачем тогда мы еще пишем сам скрипт в body в коде html страницы в которой хотим добавить этот плагин. Заранее спасибо за ответ!!!

  • denis, это сам вызов скрипта, но не во всех случаях. Если Вы заметили, то тот скрипт, который прикрепляем в head и тот что в body, они отличаются. Ещё раз повторюсь в некоторых случаях скрипт в body писать не нужно, всё зависит от самого плагина, его настроек и т.д.

  • denis

    ОК!!! Спасибо за ответ теперь понятно. Будем пробовать, смотреть!!!

  • Артем

    Добрый день!

    Я пытаюсь сделать, чтобы скрипт http://scrollme.nckprsn.com/ заработал на изображение, которому я присвоил id — solo.

    Для этого я скачал архив с плагином, расположенный в нем файл
    jquery.scrollme.js я разместил в папке /js/ на сервере (сайт создается
    на wordpress). Затем прописал в файле functions.php следующий код для
    исполнения:

    add_action( ‘wp_enqueue_scripts’, function(){
    wp_enqueue_script( ‘jquery.scrollme’,
    get_template_directory_uri() . ‘/js/jquery.scrollme.js’,
    array ( ‘jquery’ ),
    true
    );
    });

    Далее в файле footer.php я прописал следующий код:

    <div
    id="#solo"
    data-when="enter"
    data-from="0.5"
    data-to="0"
    data-opacity="0"
    data-translatex="-200"
    data-rotatez="90"

    Все вышеперечисленный действия никак не повлияли на анимацию
    изображения. Сайт я делаю для себя, по урокам в интернете, но по данному
    моменту мне с трудом удается найти правильное решение (пытаюсь уже 4
    дня), как и что правильно взаимосоединить. Перечитал много одинаковых
    статей с разными вариантами подключения jQuery, но ничего не выходит.
    Явно что-то просто недопонимаю и упускаю.Прошу вашей помощи или совета.

    Спасибо.