Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2019, 15:48
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Не работает слайдер touchTouch
Не работает слайдер touchTouch и есть ошибки. Помогите исправить.
Вот сайт на поддомене для тестов _https://update.lik-astana.kz/imidzhevaya-produktsiya/ezhednevniki/ezhednevnik-s-logotipom-detail.html

В карточке товара необходимо сделать слайдер изображений, хорошо подходит для этого touchTouch.

вот мой вывод изображений
<?php
defined('_JEXEC') or die('Restricted access');

$doc = JFactory::getDocument();
$style_image = '
.hovergallery img{
	-webkit-transform:scale(0.8); /*Webkit: уменьшаем размер до 0.8*/
	-moz-transform:scale(0.8); /*Mozilla: масштабирование*/
	-o-transform:scale(0.8); /*Opera: масштабирование*/
	-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
	-moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/
	-o-transition-duration: 0.5s; /*Opera: длительность анимации*/
	opacity: 0.9; /*Начальная прозрачность изображений*/
	margin: 0 10px 5px 0; /*Интервалы между изображениями*/
	}

	.hovergallery img:hover{
	-webkit-transform:scale(1.1); /*Webkit: увеличиваем размер до 1.2x*/
	-moz-transform:scale(1.1); /*Mozilla: масштабирование*/
	-o-transform:scale(1.1); /*Opera: масштабирование*/
	box-shadow:0px 0px 30px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
	-webkit-box-shadow:0px 0px 30px gray; /*Webkit: тени*/
	-moz-box-shadow:0px 0px 30px gray; /*Mozilla: тени*/
	opacity: 1;
	}

 ';
$doc->addStyleDeclaration($style_image);
/*
$document = JFactory::getDocument();
$document->addScriptDeclaration(" ");
*/
?>
<!-- <link rel="stylesheet" href="/templates/lik-astana/touch/css/styles.css" /> -->
<link rel="stylesheet" href="templates/lik-astana/touch/touchTouch/touchTouch.css" />
<script type="text/javascript">
$(function(){  $('.thumbs a').touchTouch(); });
</script> 
<div class="hovergallery"><div class="thumbs">
<?php
$count_images = count ($this->product->images);
if ($count_images >= 1) { /*$start_image = VmConfig::get(1) ? 0 : 1; */ $start_image = 0; }
for ($i = $start_image;  $i < $count_images; $i++)  {  $image = $this->product->images[$i];
?>
<?php echo $image->displayMediaThumb(false, true, 'class=""'); ?>
<?php } ?> 
</div></div>
 <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
		<script src="templates/lik-astana/touch/touchTouch/touchTouch.jquery.js"></script>
		<script src="templates/lik-astana/touch/js/script.js"></script>

		<!-- BSA AdPacks code. Please ignore and remove.-->
        <script src="//cdn.tutorialzine.com/misc/adPacks/v1.js" async></script>

ошибки показывает в консоли хрома, может причина в них.
Помогите реализовать галерею, сам в js нечего не понимаю.
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2019, 16:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Stas1985,
найдите другой слайдер, этот устарел.
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2019, 16:57
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Цитата:
найдите другой слайдер, этот устарел.
рони , Профессор, подскажите пожалуйста, какой слайдер лучше применить.
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2019, 17:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Stas1985,
https://wd.dizaina.net/scripts/peppermint/
Ответить с цитированием
  #5 (permalink)  
Старый 19.10.2019, 07:01
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Здравствуйте рони!
Попробовал ваш скрипт
<?php
defined('_JEXEC') or die('Restricted access');
$doc = JFactory::getDocument();
$style_image = '
.hovergallery img{
	-webkit-transform:scale(0.8); /*Webkit: уменьшаем размер до 0.8*/
	-moz-transform:scale(0.8); /*Mozilla: масштабирование*/
	-o-transform:scale(0.8); /*Opera: масштабирование*/
	-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
	-moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/
	-o-transition-duration: 0.5s; /*Opera: длительность анимации*/
	opacity: 0.9; /*Начальная прозрачность изображений*/
	margin: 0 10px 5px 0; /*Интервалы между изображениями*/
	}
	.hovergallery img:hover{
	-webkit-transform:scale(1.1); /*Webkit: увеличиваем размер до 1.2x*/
	-moz-transform:scale(1.1); /*Mozilla: масштабирование*/
	-o-transform:scale(1.1); /*Opera: масштабирование*/
	box-shadow:0px 0px 30px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
	-webkit-box-shadow:0px 0px 30px gray; /*Webkit: тени*/
	-moz-box-shadow:0px 0px 30px gray; /*Mozilla: тени*/
	opacity: 1;
	}
 ';
$doc->addStyleDeclaration($style_image);
/*
$document = JFactory::getDocument();
$document->addScriptDeclaration(" ");
*/
?>
 <script src="https://<?php echo $_SERVER["HTTP_HOST"];?>/templates/lik-astana/peppermint/peppermint.min.js" async></script>
 <link rel="stylesheet" href="https://<?php echo $_SERVER["HTTP_HOST"];?>/templates/lik-astana/peppermint/peppermint.required.css" type="text/css" />
 <link rel="stylesheet" href="https://<?php echo $_SERVER["HTTP_HOST"];?>/templates/lik-astana/peppermint/peppermint.suggested.css" type="text/css" />
 
<script type="text/javascript">
$('.peppermint').Peppermint();
//сохранить jQuery-ссылку на блок слайдера
var slider = $('.peppermint');
//запустить Peppermint
slider.Peppermint();
//клик по `#right-arr` переключит на следующий слайд
$('#right-arr').click(slider.data('Peppermint').next);
//клик по `#left-arr` переключит на предыдущий слайд
$('#left-arr').click(slider.data('Peppermint').prev);
//клик по `#getslidesnumber` покажет количество слайдов
$('#getslidesnumber').click(function() {
    alert('There are ' + slider.data('Peppermint').getSlidesNumber() + ' slides');
});
$('.peppermint').Peppermint({
  dots: true,
  slideshow: true,
  speed: 500,
  slideshowInterval: 5000,
  stopSlideshowAfterInteraction: true,
  onSetup: function(n) {
    console.log('Peppermint setup done. Slides found: ' + n);
  }
});
</script> 
<div class="hovergallery">
<div class="peppermint peppermint-inactive" id="peppermint">
<?php
$count_images = count ($this->product->images);
if ($count_images >= 1) { /*$start_image = VmConfig::get(1) ? 0 : 1; */ $start_image = 0; }
for ($i = $start_image;  $i < $count_images; $i++)  {  $image = $this->product->images[$i];
?>
<figure>
<?php echo $image->displayMediaThumb(false, true, 'class="touchTouch-img"'); ?>
</figure>
<?php } ?> 
</div></div>

но у меня он тоже не работает, подскажите что я сделал не так.
Попробовал скачать с github их скрипт https://github.com/wilddeer/Peppermint
Он скачанный в тестовом примере так же не работает

Последний раз редактировалось Stas1985, 19.10.2019 в 07:14.
Ответить с цитированием
  #6 (permalink)  
Старый 19.10.2019, 07:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

1)

//либо так
$('.peppermint').Peppermint({
    dots: true,
    slideshow: true,
    speed: 500,
    slideshowInterval: 5000,
    stopSlideshowAfterInteraction: true,
    onSetup: function(n) {
        console.log('Peppermint setup done. Slides found: ' + n);
   } 
});
//либо со ссылкой на объект если надо
var slider = $('.peppermint').Peppermint({
    dots: true,
    slideshow: true,
    speed: 500,
    slideshowInterval: 5000,
    stopSlideshowAfterInteraction: true,
    onSetup: function(n) {
        console.log('Peppermint setup done. Slides found: ' + n);
   } 
});


И все, а у вас по несколько раз об одном и том же в строках 36 - 40 и в 49.

2) Подключение плагина нужно производить в событии загрузки документа или после элемента/элементов на которые вешается плагин, устанавливаются события и т.п. А у вас скрипт вне события загрузки документа в строках 35-59, а блок с картинками выводится после них начиная со строки 60.
Ответить с цитированием
  #7 (permalink)  
Старый 19.10.2019, 07:47
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Переделал
<?php
defined('_JEXEC') or die('Restricted access');
$doc = JFactory::getDocument();
$style_image = '
.hovergallery img{
	-webkit-transform:scale(0.8); /*Webkit: уменьшаем размер до 0.8*/
	-moz-transform:scale(0.8); /*Mozilla: масштабирование*/
	-o-transform:scale(0.8); /*Opera: масштабирование*/
	-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
	-moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/
	-o-transition-duration: 0.5s; /*Opera: длительность анимации*/
	opacity: 0.9; /*Начальная прозрачность изображений*/
	margin: 0 10px 5px 0; /*Интервалы между изображениями*/
	}
	.hovergallery img:hover{
	-webkit-transform:scale(1.1); /*Webkit: увеличиваем размер до 1.2x*/
	-moz-transform:scale(1.1); /*Mozilla: масштабирование*/
	-o-transform:scale(1.1); /*Opera: масштабирование*/
	box-shadow:0px 0px 30px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
	-webkit-box-shadow:0px 0px 30px gray; /*Webkit: тени*/
	-moz-box-shadow:0px 0px 30px gray; /*Mozilla: тени*/
	opacity: 1;
	}
 ';
$doc->addStyleDeclaration($style_image);
/*
$document = JFactory::getDocument();
$document->addScriptDeclaration(" ");
*/
?> 
<div class="hovergallery">
<div class="peppermint peppermint-inactive" id="peppermint">
<?php
$count_images = count ($this->product->images);
if ($count_images >= 1) { /*$start_image = VmConfig::get(1) ? 0 : 1; */ $start_image = 0; }
for ($i = $start_image;  $i < $count_images; $i++)  {  $image = $this->product->images[$i];
?>
<figure>
<?php echo $image->displayMediaThumb(false, true, 'class="touchTouch-img"'); ?>
</figure>
<?php } ?> 

<script type="text/javascript">
	$('.peppermint').Peppermint({
	    dots: true,
	    slideshow: true,
	    speed: 500,
	    slideshowInterval: 5000,
	    stopSlideshowAfterInteraction: true,
	    onSetup: function(n) {
	        console.log('Peppermint setup done. Slides found: ' + n);
	   }
	});
</script>
 <script src="https://<?php echo $_SERVER["HTTP_HOST"];?>/templates/lik-astana/peppermint/peppermint.min.js" async></script>
 <link rel="stylesheet" href="https://<?php echo $_SERVER["HTTP_HOST"];?>/templates/lik-astana/peppermint/peppermint.required.css" type="text/css" />
 <link rel="stylesheet" href="https://<?php echo $_SERVER["HTTP_HOST"];?>/templates/lik-astana/peppermint/peppermint.suggested.css" type="text/css" />
</div>
</div>

По прежнему безуспешно. Что я делаю не так
Ответить с цитированием
  #8 (permalink)  
Старый 19.10.2019, 08:18
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Stas1985
Что я делаю не так
А далее возможная ошибка - объект/объекты, на которые устанавливается плагин указы неверно, читать документацию.

И здесь нужно выставлять не РНР код, а результирующий HTML, тот что будет на странице. Этот код можно получить в отладчике браузера.
Ответить с цитированием
  #9 (permalink)  
Старый 19.10.2019, 08:36
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Цитата:
А далее возможная ошибка - объект/объекты, на которые устанавливается плагин указы неверно, читать документацию.
Вот мой код для картинки
<figure>
<a title="Красный ежедневник с логотипом" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/Red_diary_with_logo.jpg">
<img src="/images/stories/virtuemart/product/resized/Red_diary_with_logo_200x200.jpg" alt="Красный ежедневник с логотипом">
</a>
</figure>

Вот все картинки с обработчиком
<div class="peppermint peppermint-inactive" id="peppermint">
<figure>
<a title="Нанесение на ежедневники логотипов, эмблем, фирменной символики." class="touchTouch-img" href="
https://update.lik-astana.kz/images/stories/virtuemart/product/egedn.jpg">
<img src="/images/stories/virtuemart/product/resized/egedn_200x200.jpg" alt="Нанесение на ежедневники логотипов, эмблем, фирменной символики.">
</a>
</figure>
<figure>
<a title="Ежедневник с нанесением" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/ezhednevnik_s_naneseniem.jpg">
<img src="/images/stories/virtuemart/product/resized/ezhednevnik_s_naneseniem_200x200.jpg" alt="Ежедневник с нанесением">
</a>
</figure>
<figure>
<a title="Ежедневник с логотипом" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/egednevnik_s_logotipom.jpg">
<img src="/images/stories/virtuemart/product/resized/egednevnik_s_logotipom_200x200.jpg" alt="Ежедневник с логотипом">
</a>
</figure>
<figure>
<a title="Нанесение логотипа на папки" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/tisnenie_na_papkah_dly_schetov1.jpg">
<img src="/images/stories/virtuemart/product/resized/tisnenie_na_papkah_dly_schetov1_200x200.jpg" alt="Нанесение логотипа на папки">
</a>
</figure>
<figure>
<a title="Ежедневник с эмблемой" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/ezhednevnik_s_logotipom.jpg">
<img src="/images/stories/virtuemart/product/resized/ezhednevnik_s_logotipom_200x200.jpg" alt="Ежедневник с эмблемой">
</a>
</figure>
<figure>
<a title="Красный ежедневник с логотипом" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/Red_diary_with_logo.jpg">
<img src="/images/stories/virtuemart/product/resized/Red_diary_with_logo_200x200.jpg" alt="Красный ежедневник с логотипом">
</a>
</figure>
<figure>
<a title="Ежедневник с тиснением" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/egednevnik_s_tisneniem.jpg">
<img src="/images/stories/virtuemart/product/resized/egednevnik_s_tisneniem_200x200.jpg" alt="Ежедневник с тиснением">
</a>
</figure>
<figure>
<a title="Тиснение на ежедневниках без фольги" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/tisnenie_bez_folgi.jpg">
<img src="/images/stories/virtuemart/product/resized/tisnenie_bez_folgi_200x200.jpg" alt="Тиснение на ежедневниках без фольги">
</a>
</figure>
<figure>
<a title="Печать на ежедневниках" class="touchTouch-img" href="https://update.lik-astana.kz/images/stories/virtuemart/product/pechat_na_egednevnikah.jpg">
<img src="/images/stories/virtuemart/product/resized/pechat_na_egednevnikah_200x200.jpg" alt="Печать на ежедневниках">
</a>
</figure>
<script type="text/javascript">
	$('.peppermint').Peppermint({
	    dots: true,
	    slideshow: true,
	    speed: 500,
	    slideshowInterval: 5000,
	    stopSlideshowAfterInteraction: true,
	    onSetup: function(n) {
	        console.log('Peppermint setup done. Slides found: ' + n);
	   }
	});
</script>
 <script src="https://update.lik-astana.kz/templates/lik-astana/peppermint/peppermint.min.js" async=""></script>
 <link rel="stylesheet" href="https://update.lik-astana.kz/templates/lik-astana/peppermint/peppermint.required.css" type="text/css">
 <link rel="stylesheet" href="https://update.lik-astana.kz/templates/lik-astana/peppermint/peppermint.suggested.css" type="text/css">
</div>


Документацию взял тут https://wd.dizaina.net/scripts/peppermint/
Если взять готовый https://github.com/wilddeer/Peppermint и запустить тестовый то он тоже не работает
Ответить с цитированием
  #10 (permalink)  
Старый 19.10.2019, 09:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Подключать плагин нужно же раньше, чем использовать его так ведь? Код строки 60 должен быть до строки 48.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AddEventListener не правильно работает с классами Flakky Events/DOM/Window 2 27.05.2016 13:51
Не работает всплывающая форма на второстепенных страницах denjer Javascript под браузер 0 22.04.2016 21:30
Слайдер не работает дальше второй картинки kamlayka Элементы интерфейса 1 11.03.2016 14:58
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
Не работает слайдер NeoMurderer jQuery 6 12.11.2011 21:37