Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Добавляем слайдер или плагин jquery на сайт blogspot

И так здравствуйте, несколько дней назад ко мне обратились за помощью по сайту который расположен на блогохостинге компании «Гугл» Blogspot.com. Заданием было добавить слайдер на страницу шаблона. И я решил возможно кому-то тоже понадобиться инструкция по установке слайдера, или какого-то jquery плагина.

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

1. Скачивание слайдера

download

Переходим на сайт  bxslider и скачиваем архив со сладером.

 

2. Разархивируем архив

archive

Открываем скачанный архив и разархивируем его в папку на своем ПК.

 

3. Загружаем файлы на удаленный сервер, или хранилища данных типа Google Drive, Dropbox, SkyDrive, Яндекс.Диск

upload

Для примера я выбрал Dropbox. После регистрации и входа создаем папку, например slider. После чего заходим в созданную папку и загружаем в нее разархивированные файлы слайдера. Если в разархивированном файле присутствуют папка, то нужно также их создать в нашем хранилище, у меня это папка images и plugins и загружаем файлы которые должны в них находиться.

 

4. Копируем код скриптов и стилей слайдера

add-style

Переходим на сайт нашего слайдера и копируем код который подключает скрипты и стили для работы слайдера.

 

5. Вставляем код в наш шаблон.

paste

Теперь переходим к нашему блогу на Blogspot.com и выбираем наш сайт, после чего выбираем пункт меню шаблон и кликаем по кнопке Изменить HTML. Теперь ищем в коде шаблона закрывающий тег </head> перед которым вставляем скопированный код. Но это еще не все, ведь мы не просто так загружали файлы слайдера в хранилище drobbox (Для чего смотрим в следующем шагу).

 

6. Изменяем пути скриптов и стилей

И так вот наш скопированный код слайдера:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

ПРИМЕТКА:

- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> - это библиотека jquery. Скорее всего у вас она уже подключена, в таком случае ее не нужно вставлять, разве что ваша версия уже устарела, тогда заменяем ее.
- <script src="/js/jquery.bxslider.min.js"></script> - это скрипт нашего слайдера.
- <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> - это стили для нашего лайдера

А вот как его нужно изменить:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="https://www.dropbox.com/s/mnkqiho9a27hk7u/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="https://www.dropbox.com/s/qynwm13y2pgkhr8/jquery.bxslider.css" rel="stylesheet" />

Как вы можете заметить изменились только ссылки скрипта и стилей слайдера. Но у вас будут другие ссылки, как их получить показываю ниже. Переходим на вкладку с нашим хранилищем dropbox и делаем все так как на рисунке ниже.

link

Выбираем нужный нам файл и в открывшемся окне нажимаем на кнопку «получить ссылку». После нажатия ссылка автоматически копируется в буфер обмена. и вставляем ее вместо старой ссылки выбранного файла. Тоесть если у нас например есть ссылка на скрипт jquery.bxslider.min.js, ищем его в списке и копируем его ссылку после чего вместо /js/jquery.bxslider.min.js мы вставляем нашу ссылку, у меня это https://www.dropbox.com/s/mnkqiho9a27hk7u/jquery.bxslider.min.js а у вас будет немного другая.

P.S. Так делаем со всеми скриптами и стилями которые необходимы для работы слайдера или плагина.

После всех изменений сохраняем наш шаблон кликнув по соответствующей кнопке.

7. Установка html кода

paste-html

Теперь копируем наш html код слайдра, и переходим на наш сайт. Здесь выбираем пункт меню «Дизайн» и выбираем нужный нам блок где хотим разместить слайдер. Нажимаем на ссылку изменить возле блока и в сплывающем окне в поле «Содержание» (Убедитесь что выбрана функция Изменить Html) вставляем наш код. У меня это следующий код:

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Где:

— <ul class=»bxslider»> — это наш блок со слайдером

— bxslider — класс нашего слайдера (который нам понадобиться для вызова слайдера)

 

— <li><img src=»/images/pic1.jpg» /></li> — это один слайд;

— <img src=»/images/pic1.jpg» /> — наше изображение;

— /images/pic1.jpg — ссылка на изображение (вместо этой ссылки вы вставляете ссылки на свои изображения).

Сохраняем и выполняем следующий шаг.

8. Вызываем слайдер (вызов нужен не во всех слайдерах, поэтому данный шаг не везде нужен)

call

Переходим на сайт слайдера и копируем код его вызова. после чего снова выбираем пункт меню шаблон и кликаем по кнопке Изменить HTML. И опять ищем в коде шаблона закрывающий тег </head> перед которым прописываем теги <script>  </script> и внутрь вставляем скопированный код. У меня это код:

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

 -$(‘.bxslider’) — вместо bxslider можно использовать свое наименование, но тогда нужно не забыть указать точно такое название клаcсу нашего слайдера (см. пункт 7 — <ul class=»bxslider»>…) .

На этом установка слайдера закончена.

Если у вас есть вопросы, то задавайте их в комментариях.

3 thoughts on “Добавляем слайдер или плагин jquery на сайт blogspot”

  1. Max:

    Привет.
    есть сайт на yii и прикручен bxslider. НО картинки он берет из определенной папки.
    поясните начинаещему как это работает? вот код. -Цель поменять под свои нужды,чтоб брал данные из другого места(папки)
    filterByCategory(26)->published()->with_img()->limit10()->findAll(); ?>

    <img title="full_description,50) ?>» src=»file?$action->file->resolvePath():»))->adaptive(225,169,Image::WIDTH)->cache()?>» style=»width: 100%» alt=»»/>

    1. admin:

      Здравствуйте, с yii я еще неработал, но вот нашел какойто плагин для него https://github.com/yii2mod/yii2-bx-slider , может Вам чем-то поможет

  2. Max:

    и еще интересно как сделать каждую картинку кликабельной в случае выборки картинок из папки.
    если каждую картинку в ручную прописывать-то понятно.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X