0
Фотографии На Страницах
Автор Ast, 27 мая 2016 13:07
Сообщений в теме: 7
#1
Отправлено 27 Май 2016 - 13:07
Аккаунт SL-368333
Здравствуйте. Как можно реализовать чтобы любая фотография на любой странице сайта увеличивались как фото товара? К примеру прописывая класс...
Здравствуйте. Как можно реализовать чтобы любая фотография на любой странице сайта увеличивались как фото товара? К примеру прописывая класс...
#2
Отправлено 27 Май 2016 - 17:27
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(); });
#3
Отправлено 27 Май 2016 - 20:42
Ирина345 (27 Май 2016 - 17:27) писал:
Здравствуйте, не совсем понимаю, зачем именно это необходимо. Большинство изображений на сайте используются как ссылки на определенные страницы, и если установить данный функционал, то ссылки срабатывать не будут, тем самым не будет работать переход на страницы. Если Вам необходимо сделать увеличение для изображений товара в каталоге, то найдите в шаблоне Товары код
далее в конец main.js добавьте
<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(); });
#4
Отправлено 30 Май 2016 - 08:55
Загрузил jquery скрипты для "карусели" фотографий, в результате карусель работает, но виджет "вконтакте" в шапке постоянно раскрыт. Видимо конфликт скриптов?
скрипты jquery-1.6.4.min и jquery-ui.min и прописан в head с комментарием "Скрипт карусели".
Тестовая страница "карусели" /page/karusel
Возможно исправить проблему?
И второй вопрос как настроить карусель для мобильной верстки? В окончательном варианте в карусели должны быть в одновременном показе 2 картинки на ширину экрана десктопной и мобильной версии как на скрине.
скрипты jquery-1.6.4.min и jquery-ui.min и прописан в head с комментарием "Скрипт карусели".
Тестовая страница "карусели" /page/karusel
Возможно исправить проблему?
И второй вопрос как настроить карусель для мобильной верстки? В окончательном варианте в карусели должны быть в одновременном показе 2 картинки на ширину экрана десктопной и мобильной версии как на скрине.
#5
Отправлено 30 Май 2016 - 10:47
Ast (30 Май 2016 - 08:55) писал:
Загрузил jquery скрипты для "карусели" фотографий, в результате карусель работает, но виджет "вконтакте" в шапке постоянно раскрыт. Видимо конфликт скриптов?
скрипты jquery-1.6.4.min и jquery-ui.min и прописан в head с комментарием "Скрипт карусели".
Тестовая страница "карусели" /page/karusel
Возможно исправить проблему?
И второй вопрос как настроить карусель для мобильной верстки? В окончательном варианте в карусели должны быть в одновременном показе 2 картинки на ширину экрана десктопной и мобильной версии как на скрине.
скрипты 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; }
#6
Отправлено 30 Май 2016 - 11:36
Firefly (30 Май 2016 - 10:47) писал:
Здравствуйте.
У Вас происходит конфликт библиотек jquery. Вам нужно удалить лишнее подключение в шаблоне HTML, при этом все должно работать и не выдавать ошибок:
Для данной карусели можно установить резиновую ширину блока, чтобы он подстраивался под определенные разрешения.
Для этого зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
Замените на:
У Вас происходит конфликт библиотек 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> </li>, в прокрутке показываются все 5 картинок.
Где-то ошибка?
#7
Отправлено 30 Май 2016 - 13:55
Ast (30 Май 2016 - 11:36) писал:
Да, виджет вконтакте закрылся, карусель работает ( /page/karusel ) но только при клике на стрелки, хотя установлен таймер автопрокрутки 4000.
А в мобильной версии немного подтормаживает при клике прокрутки и прокручивается только одно фото частями (iphone 4s).
На странице установлены 5 фотографий, но в прокрутке показываются только три. Только когда добавляю 2 пустых тега <li> </li>, в прокрутке показываются все 5 картинок.
Где-то ошибка?
А в мобильной версии немного подтормаживает при клике прокрутки и прокручивается только одно фото частями (iphone 4s).
На странице установлены 5 фотографий, но в прокрутке показываются только три. Только когда добавляю 2 пустых тега <li> </li>, в прокрутке показываются все 5 картинок.
Где-то ошибка?
у Вас в коде не установлена автоматическая прокрутка слайдера, у Вас установлена скорость прокрутки слайдера при клике.
Уточните пожалуйста какой инструкцией Вы пользовались при создание слайдера.
#8
Отправлено 30 Май 2016 - 14:01
Ирина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> </li>, показываются все фотографии, но в том числе и пустые
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных