Сообщений в теме: 7

[Ast]

Аккаунт SL-368333

Здравствуйте. Как можно реализовать чтобы любая фотография на любой странице сайта увеличивались как фото товара? К примеру прописывая класс...

[Ирина345]

Ast (27 Май 2016 - 13:07) писал:

Аккаунт SL-368333

Здравствуйте. Как можно реализовать чтобы любая фотография на любой странице сайта увеличивались как фото товара? К примеру прописывая класс...

Здравствуйте, не совсем понимаю, зачем именно это необходимо. Большинство изображений на сайте используются как ссылки на определенные страницы, и если установить данный функционал, то ссылки срабатывать не будут, тем самым не будет работать переход на страницы. Если Вам необходимо сделать увеличение для изображений товара в каталоге, то найдите в шаблоне Товары код

 <a href="{goods.URL | url_amp}" title="{goods.NAME}" >
				  <img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=comfort{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" />
				</a>

замените на

<a href="{goods.IMAGE_LARGE}" title="{goods.NAME}" >
				  <img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=comfort{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" />
				</a>

далее в конец main.js добавьте

$(document).ready(function() {
$(".image a").fancybox();
});

[Ast]

Ирина345 (27 Май 2016 - 17:27) писал:

Здравствуйте, не совсем понимаю, зачем именно это необходимо. Большинство изображений на сайте используются как ссылки на определенные страницы, и если установить данный функционал, то ссылки срабатывать не будут, тем самым не будет работать переход на страницы. Если Вам необходимо сделать увеличение для изображений товара в каталоге, то найдите в шаблоне Товары код

<a href="{goods.URL | url_amp}" title="{goods.NAME}" >
<img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=comfort{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" />
</a>

замените на

<a href="{goods.IMAGE_LARGE}" title="{goods.NAME}" >
<img class="goods-cat-image-medium" alt="{goods.NAME}" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=comfort{% ELSE %}{goods.IMAGE_SMALL}{% ENDIF %}" />
</a>

далее в конец main.js добавьте

$(document).ready(function() {
$(".image a").fancybox();
});

Видимо я не правильно объяснил. Необходимо чтобы увеличивались не абсолютно все фотографии на сайте, а те, которые я размещаю в текстах на страницах. К примеру, указав в тэге фотографии класс, эту фотографию можно увеличить как это происходит с картинкой товара.

[Ast]

Загрузил jquery скрипты для "карусели" фотографий, в результате карусель работает, но виджет "вконтакте" в шапке постоянно раскрыт. Видимо конфликт скриптов?
скрипты jquery-1.6.4.min и jquery-ui.min и прописан в head с комментарием "Скрипт карусели".

Тестовая страница "карусели" /page/karusel

Возможно исправить проблему?
И второй вопрос как настроить карусель для мобильной верстки? В окончательном варианте в карусели должны быть в одновременном показе 2 картинки на ширину экрана десктопной и мобильной версии как на скрине.

Прикрепленные изображения

• 

[Firefly]

Ast (30 Май 2016 - 08:55) писал:

Загрузил jquery скрипты для "карусели" фотографий, в результате карусель работает, но виджет "вконтакте" в шапке постоянно раскрыт. Видимо конфликт скриптов?
скрипты jquery-1.6.4.min и jquery-ui.min и прописан в head с комментарием "Скрипт карусели".

Тестовая страница "карусели" /page/karusel

Возможно исправить проблему?
И второй вопрос как настроить карусель для мобильной верстки? В окончательном варианте в карусели должны быть в одновременном показе 2 картинки на ширину экрана десктопной и мобильной версии как на скрине.

Здравствуйте.
У Вас происходит конфликт библиотек jquery. Вам нужно удалить лишнее подключение в шаблоне HTML, при этом все должно работать и не выдавать ошибок:

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery-1.6.4.min.js"></script>

Для данной карусели можно установить резиновую ширину блока, чтобы он подстраивался под определенные разрешения.
Для этого зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

.sliderkar {
width: 1100px;
height: 200px;
overflow: hidden;
position: relative;
padding: 17px 67px 6px 53px;
margin-bottom: 10px;
background: #893F8A;
margin: 0px;
}

Замените на:

.sliderkar {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
padding: 17px 67px 6px 53px;
margin-bottom: 10px;
background: #893F8A;
margin: 0px;
}

[Ast]

Firefly (30 Май 2016 - 10:47) писал:

Здравствуйте.
У Вас происходит конфликт библиотек jquery. Вам нужно удалить лишнее подключение в шаблоне HTML, при этом все должно работать и не выдавать ошибок:

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery-1.6.4.min.js"></script>

Для данной карусели можно установить резиновую ширину блока, чтобы он подстраивался под определенные разрешения.
Для этого зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

.sliderkar {
width: 1100px;
height: 200px;
overflow: hidden;
position: relative;
padding: 17px 67px 6px 53px;
margin-bottom: 10px;
background: #893F8A;
margin: 0px;
}

Замените на:

.sliderkar {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
padding: 17px 67px 6px 53px;
margin-bottom: 10px;
background: #893F8A;
margin: 0px;
}

Да, виджет вконтакте закрылся, карусель работает ( /page/karusel ) но только при клике на стрелки, хотя установлен таймер автопрокрутки 4000.
А в мобильной версии немного подтормаживает при клике прокрутки и прокручивается только одно фото частями (iphone 4s).
На странице установлены 5 фотографий, но в прокрутке показываются только три. Только когда добавляю 2 пустых тега <li>&nbsp;</li>, в прокрутке показываются все 5 картинок.
Где-то ошибка?

[Ирина345]

Ast (30 Май 2016 - 11:36) писал:

Да, виджет вконтакте закрылся, карусель работает ( /page/karusel ) но только при клике на стрелки, хотя установлен таймер автопрокрутки 4000.
А в мобильной версии немного подтормаживает при клике прокрутки и прокручивается только одно фото частями (iphone 4s).
На странице установлены 5 фотографий, но в прокрутке показываются только три. Только когда добавляю 2 пустых тега <li>&nbsp;</li>, в прокрутке показываются все 5 картинок.
Где-то ошибка?

Здравствуйте,
у Вас в коде не установлена автоматическая прокрутка слайдера, у Вас установлена скорость прокрутки слайдера при клике.
Уточните пожалуйста какой инструкцией Вы пользовались при создание слайдера.

[Ast]

Ирина345 (30 Май 2016 - 13:55) писал:

Здравствуйте,
у Вас в коде не установлена автоматическая прокрутка слайдера, у Вас установлена скорость прокрутки слайдера при клике.
Уточните пожалуйста какой инструкцией Вы пользовались при создание слайдера.

Я исходил из инструкции в скрипте, прописаном в head

<!-- Скрипт карусели -->
<script>
$(window).bind('load', function(){
$().prepare_slider();
$('#slider_list > li').over();
var slider_link = $('.slider .box-right a');
var slider_link_index = 1;
var slider_count = $('#slider_list > li').size();
function slider_intro(){
//if(slider_link_index <= slider_count){
slider_link.trigger('click');
slider_link_index++;
setTimeout(function(){slider_intro()}, 4000); //время перелистования слайдеров
//}
}
setTimeout(function(){slider_intro()}, 4000);   //при запуске карусели - через сколько ее прокрутить
//Чтобы отключить автопрокрутку, надо удалить строку 15 - прокрутка будет только по стрелкам
});

</script>
<!-- Конец скрипта карусели -->

Автоматическая прокрутка заработала. но показываются не все фотографии в блоке. Из пяти только три. Если добавлять пустые строчки <li>&nbsp;</li>, показываются все фотографии, но в том числе и пустые