Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Увеличение Изображения Без Перехода

Автор arver, 07 окт. 2014 01:24

Назад

Авторизуйтесь для ответа в теме

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

#21 Ирина345

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

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

Отправлено 22 Апрель 2015 - 16:13

Cybernetic (21 Апрель 2015 - 07:23) писал:

Добрый день, пытаюсь сделать открытие фото (как в карточке товара)
Пытался применить вышеописанные инструкции (пост №2) ни чего не получилось (2 код добавил в main.js)

Пытался сделать для страницы http://santechbomba.ru/page/TEST

Нужно чтобы:

1) Фото открывалось полностью
2) Была возможность закрыть фото (всё как в карточке товара)

Здравствуйте, вам необходимо открыть редактор данной странице, при помощи кнопки "Источник", и добавить в конец

<script>
$(document).ready(function() {
$(".other_item a").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});});
</script>

Наверх

#22 Stas_Y

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

Пользователи
548 сообщений

Отправлено 22 Апрель 2015 - 17:37

А возможно ли: создаю товарную группу, предположим "Колбаса", в меню добавляю страницу, называю ее "Портфолио", ставлю что ссылается на "Колбаса". НО! Убрать на получившейся странице возможность купить, добавить в избранное и сравнить, при этом если нажать на картинку она просто увеличивается и под ней описание.
Заранее благодарен за ответ (шаблон весна)

Наверх

#23 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 23 Апрель 2015 - 04:36

Можно для определенной категории у товаров убрать ненужные блоки, какие блоки необходимо убрать и как будет называться категория?

Наверх

#24 Stas_Y

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

Пользователи
548 сообщений

Отправлено 23 Апрель 2015 - 05:24

Категория: Портфолио
1) фото №1 - убрать сортировку
2) фото №2 - убрать блок со значками "добавить в корзину, сравнение, добавить в избранное", при наведении на картинку
3) фото №3 - при нажатии на картинку, не должно быть перехода на страницу товара, нужно чтобы изображение просто увеличивалось и под ним блок с описанием
4) фото №4 - убрать цены

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

Наверх

#25 Cybernetic

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

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

Отправлено 23 Апрель 2015 - 08:53

Ирина345 (22 Апрель 2015 - 16:13) писал:

Здравствуйте, вам необходимо открыть редактор данной странице, при помощи кнопки "Источник", и добавить в конец

<script>
$(document).ready(function() {
$(".other_item a").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});});
</script>

Сделал всё по инструкции, работает не корректно:
1) Изображение при клике открывается в том же размере в котором на сайте в миниатюре (нужно что бы полностью, если слишком большое то ограничение 1920x1080)
2) При закрытии изображения, картинка пропадает(((

тест - http://santechbomba.ru/page/TEST

Наверх

#26 Ирина345

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

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

Отправлено 23 Апрель 2015 - 16:56

Cybernetic (23 Апрель 2015 - 08:53) писал:

Сделал всё по инструкции, работает не корректно:
1) Изображение при клике открывается в том же размере в котором на сайте в миниатюре (нужно что бы полностью, если слишком большое то ограничение 1920x1080)
2) При закрытии изображения, картинка пропадает(((

тест - http://santechbomba.ru/page/TEST

Здравствуйте, попробуйте такой вариант , поменяйте код данной странице на

<style type="text/css">img[tabindex="0"] {
  cursor: zoom-in;
}
img[tabindex="0"]:focus {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  margin: auto;
  box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);
}
img[tabindex="0"]:focus,  /* убрать строку, если не нужно, чтобы при клике на увеличенное фото, оно возвращалось в исходное состояние */
img[tabindex="0"]:focus ~ * {
  pointer-events: none;
  cursor: zoom-out;
}
</style>
<img alt="переправа" src="http://st.santechbomba.ru/12/1642/424/20150409_170915.jpg" tabindex="0" width="320" />

Наверх

#27 Stas_Y

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

Пользователи
548 сообщений

Отправлено 24 Апрель 2015 - 07:13

Stas_Y (23 Апрель 2015 - 05:24) писал:

Категория: Портфолио
1) фото №1 - убрать сортировку
2) фото №2 - убрать блок со значками "добавить в корзину, сравнение, добавить в избранное", при наведении на картинку
3) фото №3 - при нажатии на картинку, не должно быть перехода на страницу товара, нужно чтобы изображение просто увеличивалось и под ним блок с описанием
4) фото №4 - убрать цены

Кто поможет? Пост №24

Наверх

#28 Cybernetic

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

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

Отправлено 24 Апрель 2015 - 07:46

Ирина345 (23 Апрель 2015 - 16:56) писал:

Здравствуйте, попробуйте такой вариант , поменяйте код данной странице на

<style type="text/css">img[tabindex="0"] {
cursor: zoom-in;
}
img[tabindex="0"]:focus {
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto;
max-width: 50%;
max-height: 50%;
margin: auto;
box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);
}
img[tabindex="0"]:focus, /* убрать строку, если не нужно, чтобы при клике на увеличенное фото, оно возвращалось в исходное состояние */
img[tabindex="0"]:focus ~ * {
pointer-events: none;
cursor: zoom-out;
}
</style>
<img alt="переправа" src="http://st.santechbomba.ru/12/1642/424/20150409_170915.jpg" tabindex="0" width="320" />

Вроде бы все получилось но есть мелкие недочеты, при увеличении кнопки меню видны, можно сделать что бы картинка открывалась и за ней ни чего не мешало

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

Наверх

#29 Vaccina

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

Модераторы
24 353 сообщений

Отправлено 24 Апрель 2015 - 07:50

В main.css найдите:

#header {
  position: relative;
  z-index: 99;
}

замените на:

#header {
  position: relative;
  z-index: 1;
}

Наверх

#30 Cybernetic

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

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

Отправлено 24 Апрель 2015 - 08:27

Vaccina (24 Апрель 2015 - 07:50) писал:

В main.css найдите:

#header {
position: relative;
z-index: 99;
}

замените на:

#header {
position: relative;
z-index: 1;
}

Я так понял при написании текста который огибает картинку возникают проблемы (картинка открывается так же как стоит, маленькая то есть)
Хотелось бы посмотреть что буде с текстом(версткой) если добавить увеличение изображения, вот тут http://santechbomba....ru/page/Главная
картинка которую хотелось бы увеличить http://st.santechbom.../1339/282/5.png

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

Наверх

#31 Ирина345

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

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

Отправлено 24 Апрель 2015 - 12:30

Cybernetic (24 Апрель 2015 - 08:27) писал:

Я так понял при написании текста который огибает картинку возникают проблемы (картинка открывается так же как стоит, маленькая то есть)
Хотелось бы посмотреть что буде с текстом(версткой) если добавить увеличение изображения, вот тут http://santechbomba....ru/page/Главная
картинка которую хотелось бы увеличить http://st.santechbom.../1339/282/5.png

Здравствуйте, добавьте в шачало данной странице( открытой в режиме просмотра код) код

<style type="text/css">img[tabindex="0"] {
  cursor: zoom-in;
}
img[tabindex="0"]:focus {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  margin: auto;
  box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);
}
img[tabindex="0"]:focus,  /* убрать строку, если не нужно, чтобы при клике на увеличенное фото, оно возвращалось в исходное состояние */
img[tabindex="0"]:focus ~ * {
  pointer-events: none;
  cursor: zoom-out;
}
</style>

далее найдите код изображения

<img alt="" height="179" src="http://st.santechbomba.ru/7/1339/282/5.png" style="float: left;" width="191" />

и замените на

<img alt="" height="179" src="http://st.santechbomba.ru/7/1339/282/5.png" style="float: left;" tabindex="0" width="191" />

Наверх

#32 Ostinems

Продвинутый пользователь

Пользователи
162 сообщений

Отправлено 09 Март 2017 - 23:42

Я уже замучился, с темы на тему, переходить.

Вопрос актуальный и сегодня, в карточке товара при нажатии - вылазит "фото" и черный экран и все, не закрыть не перевести...Аккаунт SL-381048

Наверх

#33 Mr.Nito

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

Модераторы
1 364 сообщений

Отправлено 10 Март 2017 - 09:04

Ostinems (09 Март 2017 - 23:42) писал:

Я уже замучился, с темы на тему, переходить.

Вопрос актуальный и сегодня, в карточке товара при нажатии - вылазит "фото" и черный экран и все, не закрыть не перевести...Аккаунт SL-381048

Здравствуйте.
В файле main.js синтаксические ошибки, удалите ненужный тег <script>
в самом конце файла

<script>
// На странице товара при наведении на маленькое изображение - изменяем большое изображение
$("#left-column ul#preview_images li img").click(function() {
							 var $src = $(this).attr('src');
							 $("#wrap img").attr('src', $src.replace('mini', 'main'));
							 return false;
});
$("#left-column ul#preview_images li a").click(function() {
							 var $src = $(this).attr('src'); var $href = $(this).attr('href');
							 $("#wrap a").attr('href', $href.replace('mini', 'main'));
							 return false;
});
</script>

замените на

// На странице товара при наведении на маленькое изображение - изменяем большое изображение
$("#left-column ul#preview_images li img").click(function() {
							 var $src = $(this).attr('src');
							 $("#wrap img").attr('src', $src.replace('mini', 'main'));
							 return false;
});
$("#left-column ul#preview_images li a").click(function() {
							 var $src = $(this).attr('src'); var $href = $(this).attr('href');
							 $("#wrap a").attr('href', $href.replace('mini', 'main'));
							 return false;
});