плагин на jQuery Vegas – Backgrounds..., как прикрутить.

  • 10 Ответов
  • 475 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Lostgod

  • **
  • 20
  • 0
Ребят помогите плииз. Судя по демо, данный плагин правильно обрезает изображения при повороте экрана мобильника.
Как его правильно прикрутить. Не могу догнать.


https://github.com/jaysalvat/vegas
http://vegas.jaysalvat.com/documentation/setup/

*

Olg

  • ******
  • 1045
  • 73
Что именно из документации вы не догоняете?


*

Lostgod

  • **
  • 20
  • 0
http://www.safeit.su/   на главной странице установлен модуль на полноэкранный слайд. Но на мобильнике в вертикальном положении не обрезается по краям а сужается и получается маленькая картинка по середине. Вместо него хочу на данной странице прописать этот плагин.
данный плагин в демо режиме нормально отработал. Хочу поставить его себе и проверить на сайте. 
 
на странице. (https://github.com/jaysalvat/vegas/tree/master) есть скачать последнюю версию и так же архив vegas-master


как я понимаю.

скачал папку Vegas, положил из нее на сайт в папку Js, скрипт и CSS. На главное странице в режиме редактора прописать
стиль
<link rel="stylesheet" href="/js/vegas/vegas.min.css">
и сам скрипт
<script src="/js/vegas/vegas.min.js"></script>

далее необходимо положить папку 
Include the files in:
/bower_components/vegas/dist или /node_modules/vegas/dist
(где это находится? это менеджеры пакетов которые ставятся на сам линукс) и из какой папки сюда класть файлы?

Далее также в режиме редактора прописать

$("#example, body").vegas({
    slides: [
        { src: "/img/slide1.jpg" },
        { src: "/img/slide2.jpg" },
        { src: "/img/slide3.jpg" },
        { src: "/img/slide4.jpg" }
    ]
});

*

Olg

  • ******
  • 1045
  • 73
1) bower здесь вообще ни при чём.
2) У вас на сайте скрытая ссылка на сайт с ворованными шаблонами -- вы про это знаете?
3) Насколько я понял, вас не устраивает работа модуля funsupersized (или как он там называется); попробуйте проверить его настройки -- может там есть возможность сделать так, как вам надо.
4) Ежели вас имеющийся модуль не устраивает категорически, то его можно снять с публикации, а для нужной страницы прописать условия загрузки плагина vegas в шаблоне. На форуме есть большая тема про условия в шаблонах.

*

Lostgod

  • **
  • 20
  • 0
1)понял.
2) простите в каком месте вы ее нашли?
3) модуль сам по себе хороший, но по какойто причине не обрезает края а сужает картинку.
4)модуль то отключу, сам ставил. Про условия в шаблонах не слышал.  Посмотрю. Спасибо.

*

Olg

  • ******
  • 1045
  • 73
Код
<body class="site com-sppagebuilder view-page no-layout no-task itemid-437 ru-ru ltr  layout-fluid ">
<div style="position: absolute; top: 0px; left: -4123px;">Скачать <a href="http://joomix.org/shablony-joomla-3-x" title="новые шаблоны для Joomla 3" target="_blank">новые шаблоны для Joomla 3</a>.</div>

*

Lostgod

  • **
  • 20
  • 0
откуда то генерится и прописывает заново.

*

Olg

  • ******
  • 1045
  • 73
У вас шаблон ворованный? Если да, то ничего удивительного. В нём ещё и не такое может быть...

*

Lostgod

  • **
  • 20
  • 0
ну возможно, скачивал со свободного ресурса.
Условия для шаблонов для меня это в данный момент темный лес.
Вы можете мне помочь прикрутить плагин к главной странице? Цену за работу можно в ПМ.

*

Lostgod

  • **
  • 20
  • 0
Видно при просмотре кода страницы как работает скрипт, но не выводятся изображения. происходит конфликт jQuery так как уже подключен в шаблоне. когда я подключаю чтобы работал плагин, то перестают работать модули на сайте. 
как сделать чтобы данный скрипт использовал тот jQuery который есть в шаблоне?

<script src="test/jquery.js"></script>  
<script src="test/jquery.backstretch.js"></script>
<script>
  // Создаем массив изображений.
  var images = [
  "test/pot-holder.jpg",
  "test/coffee.jpg"
  ];
  
  // Небольшой скрипт для предварительной загрузки изображений.
  // В нем нет острой нужды, но идея хороша.
  $(images).each(function(){
  $('<img/>')[0].src = this;  
  });
  
  // Переменная index указывает на текущее используемое изображение.
  var index = 0;
  
  // Вызываем Backstretch в первый раз.
  // В данном случае используется скорость в 500ms для эффекта проявления изображений.
  $.backstretch(images[index], {speed: 500});
  
  // Устанавливаем интервал, через который будет увеличиваться index и устанавливаться новое изображение.
  // Примечание: скорость проявления будет использоваться из первого вызова плагина.
  setInterval(function() {
  index = (index >= images.length - 1)? 0 : index + 1;
  $.backstretch(images[index]);
  }, 5000);
  </script>  
« Последнее редактирование: 04.03.2016, 02:34:48 от Lostgod »