Перейти к содержимому


Увеличение Картинки При Наведении Курсора


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 297

#261 мистка

мистка

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 435 сообщений
  • ГородМосква

Отправлено 15 Август 2014 - 14:45

ПО ПРЕЖНЕМУ ОШИБКА

#262 batta

batta

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 15 Август 2014 - 14:51

Просмотр сообщениятихоня (15 Август 2014 - 14:45) писал:

ПО ПРЕЖНЕМУ ОШИБКА
В main.js
удалите код
	owlSliderObj = sliderOwl.data('owlCarousel');


#263 мистка

мистка

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 435 сообщений
  • ГородМосква

Отправлено 15 Август 2014 - 15:18

:unsure:

#264 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 15 Август 2014 - 16:52

Просмотр сообщениятихоня (15 Август 2014 - 15:18) писал:

:unsure:
В шаблоне "Бистро" версия jquery 1.11 , а cloud-zoom работает с версией jquery 1.9.* . Поэтому могут возникать ошибки при подключение данного плагина использую эту инструкцию

Ниже я попытался подключить плагин cloud-zoom используя jquery-migrate в котором включены некоторые старые функции из старого jquery 19.*

Вы можете проделать некоторые шаги для того чтобы плагин cloud-zoom сработал.
В файле "html" после кода:
<!-- сохраняем переменную пути до изображений -->
<script type="text/javascript">var imgFolder, assetsImagesPath = '{ASSETS_IMAGES_PATH}';</script>
Добавить:
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cloud-zoom.css" type="text/css" />
После кода:
<script type="text/javascript" src="{ASSETS_JS_PATH}forall.js"></script>
Добавить:
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.min.js"></script>

В конец файла "main.css" добавить код:
.allphoto.clr {
margin-top: 0;
width: 100%;
height: 60px;
}
.owl-carousel .owl-item {
float: left;
}
#owl-one-slider-tovar .item.js-zoom-gallery {
display: none !important;
}
#owl-one-slider-tovar .item.js-zoom-gallery:first-child {
display: block !important;
}
.fullimg.txtalgncnt {
	overflow: visible;
}


В файле "Товар"
Код:

Заменить:
<div class="fullimg txtalgncnt">
					 <!-- Большое изображение -->
					 {% IF GOODS_IMAGE_EMPTY %}
						 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
					 {% ELSE %}
						 <div id="owl-one-slider-tovar" class="owl-carousel">
							 {% FOR goods_images %}
							 <div class="item js-zoom-gallery" title="Увеличить">
								 <a itemprop="image" href="{goods_images.LARGE}" target="_blank" title="{GOODS_NAME}" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
										 <img class="firstBigGoodsImg" src="{goods_images.MEDIUM}" alt="{goods_images.NAME}" />
								 </a>
							 </div>
							 {% ENDFOR goods_images %}
						 </div>
					 {% ENDIF %}
					 <div class="js-zoom bottom-open-gallery"></div>
				 </div>
p.s
Лучше всего на странице товара маленькие изображения расположить горизонтально, чтобы он функционировал нормально.

#265 Новичок Ю

Новичок Ю

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 326 сообщений

Отправлено 24 Август 2014 - 22:44

Здравствуйте! У меня на сайте фото в описании модификаций увеличиваются по клику на странице с миниатюрой. Хочу также сделать в таблице, но пока получается только увеличение на новой странице (получается куча вкладок при просмотре). Можно ли сделать, как в модификациях? Планирую такие таблицы и на других страницах. Вот ссылка на  страницу с таблицей http://roylwoodshop....age_edit/567691

Вот на этом фото применен код, как в модификации
<a href="http://st.storeland....020748-big.jpg" rel="gallery" target="_blank"><span style="color:#D3D3D3;"><img alt="Чехол жаккард хлопок для матраса." src="http://st.storeland....6/P1020748.jpg" style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" /> </span></a>

Если возможно - хотелось бы без установки нового плагина...

#266 Новичок Ю

Новичок Ю

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 326 сообщений

Отправлено 24 Август 2014 - 22:49

У меня тема Радость, но с эти вопросом направили на эту ветку))

#267 AnnaM

AnnaM

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 25 Август 2014 - 06:16

Просмотр сообщенияНовичок Ю (24 Август 2014 - 22:44) писал:

Здравствуйте! У меня на сайте фото в описании модификаций увеличиваются по клику на странице с миниатюрой. Хочу также сделать в таблице, но пока получается только увеличение на новой странице (получается куча вкладок при просмотре). Можно ли сделать, как в модификациях? Планирую такие таблицы и на других страницах. Вот ссылка на  страницу с таблицей http://roylwoodshop....age_edit/567691

Вот на этом фото применен код, как в модификации
<a href="http://st.storeland....020748-big.jpg" rel="gallery" target="_blank"><span style="color:#D3D3D3;"><img alt="Чехол жаккард хлопок для матраса." src="http://st.storeland....6/P1020748.jpg" style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" /> </span></a>

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

#268 Новичок Ю

Новичок Ю

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 326 сообщений

Отправлено 26 Август 2014 - 21:17

Вот ссылка http://roylwoodshop....ge_edit/567691. Почему вы удалили предыдущее письмо? Адрес этот, его не может не быть! Ведь по этой странице (и по этой ссылке) мне уже давали советы)

#269 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 26 Август 2014 - 23:27

Добавьте в конец вашего файла main.js следующий код

$(function() {
  $('a[rel="gallery"], .zooming').fancybox();
});

Обратите внимание на то, что все ваши изображения в таблице должны иметь вид

<a target="_blank" rel="gallery" href="Адрес большого изображения">
  <img src="Адрес маленького изображения" alt="">
</a>

т.е изображение (тег <img>) должно быть обвернуто в ссылку (тег <a>) с атрибутом rel="gallery" или классом zooming

<a target="_blank" class="zooming"  href="Адрес большого изображения">
  <img src="Адрес маленького изображения" alt="">
</a>


#270 tolikkansk

tolikkansk

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 357 сообщений

Отправлено 27 Август 2014 - 17:01

Как сделать, чтобы картинка, которая появляется справа, была того же размера. что и картинка основная товара?

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

  • zoom.png


#271 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 27 Август 2014 - 17:22

Просмотр сообщенияtolikkansk (27 Август 2014 - 17:01) писал:

Как сделать, чтобы картинка, которая появляется справа, была того же размера. что и картинка основная товара?

Здравствуйте.
Добавьте в main.css код
.cloud-zoom-big {
width: 450px !important;
height: 305px !important;
}


#272 tolikkansk

tolikkansk

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 357 сообщений

Отправлено 28 Август 2014 - 07:41

Это работает только для этой картинки,нужно чтобы для всех.

#273 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 28 Август 2014 - 12:23

Просмотр сообщенияtolikkansk (28 Август 2014 - 07:41) писал:

Это работает только для этой картинки,нужно чтобы для всех.
Здравствуйте!
В шаблоне "Товар" найдите строку:

<a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">

и замените её на:

<a itemprop="image" href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0">


#274 tolikkansk

tolikkansk

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 357 сообщений

Отправлено 28 Август 2014 - 20:10

Спасибо,а можно ли, чтобы область выделения была для всех одинаковая или это невозможно? А то получается вот такой вот казус:

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

  • 3.png
  • 4.png


#275 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 28 Август 2014 - 20:26

Просмотр сообщенияtolikkansk (28 Август 2014 - 20:10) писал:

Спасибо,а можно ли, чтобы область выделения была для всех одинаковая или это невозможно? А то получается вот такой вот казус:
Эта область зависит от исходного размера фотографии: чем она меньше, тем область выделения больше. Возможный вариант решения - загружать фотографии одинаковых размеров.

#276 tolikkansk

tolikkansk

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 357 сообщений

Отправлено 28 Август 2014 - 20:36

Где это прописывается, как она зависит?

#277 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 28 Август 2014 - 20:43

Просмотр сообщенияtolikkansk (28 Август 2014 - 20:36) писал:

Где это прописывается, как она зависит?
В файлах, имеющих в названии "cloud-zoom".

#278 tolikkansk

tolikkansk

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 357 сообщений

Отправлено 29 Август 2014 - 10:56

Понимаете, у этих фотографий одинаковый изначально размер: 350*450. Почему по-разному увеличивается?

#279 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 29 Август 2014 - 13:56

Просмотр сообщенияtolikkansk (29 Август 2014 - 10:56) писал:

Понимаете, у этих фотографий одинаковый изначально размер: 350*450. Почему по-разному увеличивается?
Здравствуйте, попробуйте загрузить изображение более большого размера.

#280 unicum

unicum

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений

Отправлено 11 Сентябрь 2014 - 18:27

Подскажите пожалуйста как сделать чтоб при наведении курсора на товар картинка увеличивалась и в режиме слайд-шоу показывались другие фотографии( если имеются) так же в увеличенном режиме.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных