Форум

Stas1985 · #1 (**permalink**) 18.10.2019, 15:48

Не работает слайдер 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

Stas1985,
найдите другой слайдер, этот устарел.

Stas1985 · #3 (**permalink**) 18.10.2019, 16:57

Цитата:

найдите другой слайдер, этот устарел.

рони , Профессор, подскажите пожалуйста, какой слайдер лучше применить.

рони · #4 (**permalink**) 18.10.2019, 17:53

Stas1985,
https://wd.dizaina.net/scripts/peppermint/

Stas1985 · #5 (**permalink**) 19.10.2019, 07:01

Здравствуйте рони!
Попробовал ваш скрипт

<?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
Он скачанный в тестовом примере так же не работает

laimas · #6 (**permalink**) 19.10.2019, 07:29

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.

Stas1985 · #7 (**permalink**) 19.10.2019, 07:47

Переделал

<?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>

По прежнему безуспешно. Что я делаю не так

laimas · #8 (**permalink**) 19.10.2019, 08:18

Сообщение от Stas1985

Что я делаю не так

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

И здесь нужно выставлять не РНР код, а результирующий HTML, тот что будет на странице. Этот код можно получить в отладчике браузера.

Stas1985 · #9 (**permalink**) 19.10.2019, 08:36

Цитата:

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

Вот мой код для картинки

<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 и запустить тестовый то он тоже не работает

laimas · #10 (**permalink**) 19.10.2019, 09:31

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

Форум

Справочник

Discord чат

Курсы javascript