Добро пожаловать на сайт <БагБД>, где вы можете задавать вопросы о программировании и разработке на Битрикс и Битрикс24, и получать быстрые и квалифицированные ответы от профессионалов!

Увеличение картинки

00 голосов
8
Как сделать увеличение картинки по клику подобно тому, как это реализовано на официальном сайте?

Подобная тема уже затрагивалась на форумах:
(1) Увеличение картинки по клику;
(2) Увеличение;
(3) увеличалка изображения при клике, средствами виз. редактора .

Однако, в (1) и (2) обсуждение закончилось на том, что нужно просто брать сторонние скрипты (подобные highslide).
А в (3) автор предлагает использование специального компонента для каждой картинки, которую требуется увеличивать по клику.

Меня, в первую очередь, интересует, представлены ли в движке bitrix стандартные средства увеличения картинки подобно highslide? Стандартная фотогалерея не подходит, ведь на странице может быть одна-две-три картинки, нет смысла использовать целую фотогалерею, когда нужно детально просмотреть одну картинку. А просмотр картинки в полном размере на отдельной странице/вкладке - крайне неудобен.
highslide неудобен тем, что нужно загружать 2 картинки (уменьшенную копию и оригинал), что вовсе не приветствуется.

Заранее благодарен за полезные ответы!
спросил 29 Май, 13 от Nelliel (120 баллов)

8 Ответы

00 голосов
Хорошую тему подняли.
ответил 29 Май, 13 от Jeanett (140 баллов)
00 голосов
Цитата
Виталий Аникин пишет:
Как сделать увеличение картинки по клику подобно тому, как это реализовано на официальном сайте?



См. файл http://dev.1c-bitrix.ru/bitrix/components/bx/bitrix.image.popup/templates/.default/script.js


Применение
Код
<span onclick="jsPublicImage.ShowImage(this, '/images/interface7/admin.jpg', true)" class="public-image-zoom-image">
   <img width="255" height="190" title="Административный раздел сайта" alt="Административный раздел сайта" class=" popup-image border" src="/images/interface7/admin_sm.jpg" onclick="jsPublicImage.ShowImage(this, '/images/interface7/admin.jpg', true)">
</span>
ответил 02 Июнь, 13 от Lekar (2,220 баллов)
00 голосов
Пожалуйста можно чуть-чуть поподробней. Куда идет файл со скриптом по ссылке? А куда идет код? Спасибо.
ответил 01 Сен, 13 от nikonofun (140 баллов)
00 голосов
Цитата
Vitalijus Amosovas пишет:
Пожалуйста можно чуть-чуть поподробней. Куда идет файл со скриптом по ссылке? А куда идет код? Спасибо.


Подробнее это надо у разработчиков спрашивать, можно ли вообще воспользоваться их кодом :)
ответил 30 Ноя, 13 от Lekar (2,220 баллов)
00 голосов
А что мешает написать самом небольшой JS? ну или воспользоваться тем же highslide?
ответил 12 Март, 14 от katena (280 баллов)
00 голосов
Простейший вариант можно сделать очень просто и без библиотек и функций:
Код
      <div style="border: 1px red solid; width: 80px; height: 60px;" onclick="this.firstChild.width=this.firstChild.width==800?80:800;this.firstChild.height=this.firstChild.height==600?60:600;"><img src="test.jpg" width="80" height="60" style="position: absolute"></div>

Ну а мишуры навешать - уже дело вкуса.
ответил 03 Июль, 14 от Eddie (2,060 баллов)
00 голосов
1) Воспользуйтесь jQuery плагином fancybox. Гугл поможет.
либо
2) Воспользуйтесь Битркис API. Название функции не помню, но она есть.

Может всплывет интересный момент у вас. Возможно придется делать ресайз изображения для изготовления превью. В этом случае поможет функция Битрикс API ResizeImageGet (подробнее см. документацию).
ответил 03 Ноя, 14 от wogich (630 баллов)
00 голосов
+ отдам за jqeury ;)
ответил 03 Март, 15 от Runnar (1,000 баллов)

Похожие вопросы

0 голосов
4 ответов
спросил 24 Сен, 13 от Orli (120 баллов)
0 голосов
4 ответов
спросил 30 Июнь, 13 от Renex (180 баллов)
0 голосов
3 ответов
спросил 03 Март, 14 от Mageradje (660 баллов)
0 голосов
5 ответов
спросил 03 Ноя, 13 от Lechman (380 баллов)
0 голосов
4 ответов
спросил 09 Июнь, 13 от Mageradje (660 баллов)