1С-Битрикс Разработчикам

Заглянувший

Сообщений: 5 Регистрация: 28.09.2010

28.09.2010 01:24:42

Помогите, как сделать так, чтобы детальная (большая) картинка товара, увеличивалась не прямо на странице, а как бы появлялась поверх страницы!? Очень нужно, так как картинка увеличивается и из-за этого весь сайт съезжает! (((((((

Пользователь 3531 Гуру Сообщений: 2866 Баллов: 512 Регистрация: 16.02.2006	#2 0 28.09.2010 10:15:03 Смотрите в сторону lightbox, fancybox.... Например, в демо-магазине сейчас картинки показываются с помощью fancybox, посмотрите как сделано там и сделайте то же самое у себя.... /истина где-то рядом....

Пользователь 54403 Эксперт Сообщений: 1063 Баллов: 175 Регистрация: 18.12.2009	#3 0 28.09.2010 11:31:09 img style="position: absolute" Экс-битриксоид. Компонент (и.с.) - существительное мужского рода (ГОСТ 34.003-90).

Пользователь 72268 Заглянувший Сообщений: 5 Регистрация: 28.09.2010	#4 0 28.09.2010 12:19:58 Если честно, то ничего не понятно (((((

Пользователь 72287 Постоянный посетитель Сообщений: 101 Баллов: 14 Регистрация: 28.09.2010	#5 0 28.09.2010 12:34:03 Наймите яваскрипт программиста. Либо сами по-гуглите про fancybox с доками. Примеров миллион! Выбирай любой

Пользователь 72268 Заглянувший Сообщений: 5 Регистрация: 28.09.2010	#6 0 28.09.2010 12:38:25 Дайте хотябы ссылку! Я думал тут реально могут помочь... ошибался...

Пользователь 72287

Постоянный посетитель

Сообщений: 101 Баллов: 14 Регистрация: 28.09.2010

28.09.2010 13:08:47

Вы же понимаете что за вас работу вашу делать не будут... Эх.. НУ ладно

http://fancybox.net/ - вот ссылка на сайт. В правом верхнем углу есть кнопочка скачать. В архиве у вас будет пример использования. Для него необходимы базовые знания HTML.
Затем в шаблон сайта вы добавляете подгрузку библиотеки jquery(например с сайта google, или разместив его у себя)

Код
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

Затем добавляете ссылку на саму библиотеку фенсибокс, не забыв разместить её у себя на сервере!

Код
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

Затем добавляем таблицу стилей для фенси, не забыв разместить её у себя на сервере!
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
После этого добавляете код инициализации фенси, чтоб оно смогло отличить что ей надо показывать, а что нет! Перед work_area размещаем яваскрипт

Код

$(document).ready(function() {

   /* This is basic - uses default settings */
   
   $("a#single_image").fancybox();
   
   /* Using custom settings */
   
   $("a#inline").fancybox({
      'hideOnContentClick': true
   });

   /* Apply fancybox to multiple items */
   
   $("a.group").fancybox({
      'transitionIn'   :   'elastic',
      'transitionOut'   :   'elastic',
      'speedIn'      :   600, 
      'speedOut'      :   200, 
      'overlayShow'   :   false
   });
   
});

Затем модифицируете шаблон вывода catalog.element,или для чего оно вам там надо, находите строки, которые отвечают за вывод анонсного и подробного изображения и переписываете его так, как это сделано в примере фенси.

Код
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Это всё взято из примера естественно! Здесь ссылка <a id="single_image" href="image_big.jpg"> на детальное изображение а img - <img src="image_small.jpg" alt=""/> анонсное изображение!

Фенси отдупляет что ей открывать вот вот этому вот тегу id="single_image", естественно можно сменить

Надеюсь у вас всё получится! Ибо разжевал как мог! Если нет - тогда пишите, договоримся на коммерческой основе работ ведь на час

Пользователь 54403

Эксперт

Сообщений: 1063 Баллов: 175 Регистрация: 18.12.2009

28.09.2010 15:09:37

Или просто напишите у тэга картинки style="position: absolute; margin-top:-20px; margin-left: -10px" и посмотрите результат, может станет понятно в какую сторону мыслить. Возможно, учитывая что картинка уже увеличивается, что это там уже как-то реализовано, только кто-то покорежил классы и position теперь не absolute. Поможет в этом случае firebug.

Экс-битриксоид.

Компонент (и.с.) - существительное мужского рода (ГОСТ 34.003-90).

Пользователь 72268 Заглянувший Сообщений: 5 Регистрация: 28.09.2010	#9 0 28.09.2010 16:57:02 Просто в дремучем коде шаблона вывода информации из каталога, фиг знает где-чего менять (((((

Пользователь 72287 Постоянный посетитель Сообщений: 101 Баллов: 14 Регистрация: 28.09.2010	#10 0 29.09.2010 00:24:08 А найти через Ctrl+F DETAIL_PICTURE уже не катит? =/ Перестаньте дурью маяться

Форум

Центр поддержки

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером