Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 19.10.2019, 11:00
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 103

Подключил
<?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;
	}
	.gallery-box{ width: 100%; height: auto; display: inline-block;}
	.touchTouch-img{float: left; width: 33%;}
 ';
$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({
	    dots: true,
	    slideshow: true,
	    speed: 500,
	    slideshowInterval: 5000,
	    stopSlideshowAfterInteraction: true,
	    onSetup: function(n) {
	        console.log('Peppermint setup done. Slides found: ' + n);
	   }
	});
</script>
<div class ="gallery-box">
<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>
</div>

так тоже не работает. Может есть варианты более проще, не могу понять пробовал 3 разных слайдера, не один не работает.
Ответить с цитированием
  #12 (permalink)  
Старый 19.10.2019, 11:23
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 103

Сейчас поставил единственно более-менее рабочий вариант. Подскажите как на этом варианте реализовать возможность перелистывания слайдов на мобильном, добавить стрелки для перелистывания, сделать возможность увеличения на мобильных устройствах
Ответить с цитированием
  #13 (permalink)  
Старый 19.10.2019, 11:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,174

Сообщение от Stas1985
перелистывания слайдов на мобильном, добавить стрелки для перелистывания, сделать возможность увеличения на мобильных устройствах
Искать подходящий слайдер с поддержкой, а их в сети много.
Ответить с цитированием
  #14 (permalink)  
Старый 19.10.2019, 11:38
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 103

Так я ставил уже 3 шт разных и не один не работает.
Работает только тот что сейчас.
Ответить с цитированием
  #15 (permalink)  
Старый 19.10.2019, 11:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,174

И вы предлагаете мне вам найти нужное?

https://www.internet-technologies.ru...slayderov.html
Ответить с цитированием
  #16 (permalink)  
Старый 21.10.2019, 07:08
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 103

Дело в том что галерея слайдер в карточке ненужна, необходимо чтоб при клике на картинку она увеличилась и была возможность листать на мобильных устройствах. Сейчас увеличение работает, но нет возможности листания.
Ответить с цитированием
  #17 (permalink)  
Старый 21.10.2019, 07:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,174

Сообщение от Stas1985
необходимо чтоб при клике на картинку она увеличилась и была возможность листать на мобильных устройствах
Это и есть слайдер.
Ответить с цитированием
  #18 (permalink)  
Старый 21.10.2019, 08:37
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 103

Решил оставить старый. Подскажите как добавить стрелки листания
Ответить с цитированием
  #19 (permalink)  
Старый 21.10.2019, 16:33
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 103

подскажите пожалуйста, как вернуть закрывающий блок в начальное положение.
Вот пример моего кода
<div class="all-photo">
<a href="javascript:allphoto()">Еще&nbsp;<?php $result_count_image = $count_images - 1; // echo $result_count_image; ?>фото&nbsp;&nbsp;&nbsp;
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
</div></a>
<script type="text/javascript">
// <![CDATA[
function allphoto()
{ document.querySelector("#info").classList.toggle("open") }
document.querySelector("#info").addEventListener('click', function() 
{ this.classList.add("open")
});
// ]]>
</script>

вот страница _https://update.lik-astana.kz/bagetnaya-masterskaya/oformlenie-v-baget/izgotovlenie-ram-dlya-kartin-detail.html

если показать все изображение то все нормально но если нажать чтоб их свернуть то изображение свернутся а страница не промотается.
Есть блок в котором все эти изображения <div id="info"> подскажите как сделать якорь только при закрытии допустим на блок <div id="images-close">
Ответить с цитированием
Ответ



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

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


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