Форум Сайтостроение Веб-строительство

Простое увеличение изображений на сайте

12
S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
#11
Апокалипсис:
S_A_N_T_A, Посмотрите код конкурентов вашей тематики в топе :)
И поймете что это не очень важно, наверное есть другие, более важные места.

Спасибо! Учту)

E
На сайте с 27.10.2018
Offline
1
Esser
#12

Могу предложить использовать Swipebox http://brutaldesign.github.io/swipebox/

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

S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
#13
Esser:
Могу предложить использовать Swipebox http://brutaldesign.github.io/swipebox/
В адрес ссылки указываете путь до большого изображения, а img до миниатюры.

Спасибо! Но там много кода!

E
На сайте с 27.10.2018
Offline
1
Esser
#14
S_A_N_T_A:
Спасибо! Но там много кода!

Не совсем понял, что значит "много кода". Обернуть картинку в ссылку с классом и добавить js-код: 

$('.swipebox').swipebox({

	useSVG : false,

	hideBarsDelay: 0, 

	loopAtEnd: true, 

	removeBarsOnMobile: false

});

Это много? Или Вы про то, что необходимо подключить целую библиотеку?

S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
#15
Esser:
Не совсем понял, что значит "много кода". Обернуть картинку в ссылку с классом и добавить js-код:
$('.swipebox').swipebox({
	useSVG : false,
	hideBarsDelay: 0, 
	loopAtEnd: true, 
	removeBarsOnMobile: false
});

Это много? Или Вы про то, что необходимо подключить целую библиотеку?

Я про библиотеку.

---------- Добавлено 31.10.2018 в 09:53 ----------

Перепробовал штук 10 лайтбоксов. Пока еще в поиске.

VoV@
На сайте с 22.09.2007
Offline
196
VoV@
#16
S_A_N_T_A:
Просто в готовые решения создают лишнюю нагрузку. Все таки надо взяться за изучение JS с целью саморазвития)

Тут без JS не получится сделать. Если хотите сами такие вещи чинить, изучайте JS, или наймите кого-нибудь.

Для сабжа можно в превью указать какой-нибудь атрибут, например, data-fullsize с адресом к полноразмерной картинке. А при на клик по превью повесить обработчик, который копирует адрес из data-fullsize в атрибут src просмотрщика.

В этом случае, большая картинка будет грузиться в момент изменения src картинки в окне просмотра. В зависимости от того, какие компоненты вы подключаете (jquery, bootstrap и т.п.), код будет отличаться. Или ставьте JS-плагин фотогалереи по его инструкции.

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!
Не будет ли в Image-Money.ru фотохостинг с оплатой Отдача апачем картинки
M
На сайте с 04.10.2011
Offline
90
mmkulikov
#17
S_A_N_T_A:
Нужно как можно проще.

Ну ловите )) Самое примитивное. 100500 лет назад "игрался" с "изучением"

Вот

http://it-kmm.com/articles/main_web.php?p=588

и

Вот

http://it-kmm.com/articles/main_web.php?p=139

Сдается, обращаться скайп avdesk-it-kmm Верстка, кодинг - контакты в профиле... VPS от 5€ (https://gmhost.com.ua/?partner=10255)
S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
#18
VoV@:
Тут без JS не получится сделать. Если хотите сами такие вещи чинить, изучайте JS, или наймите кого-нибудь.

Для сабжа можно в превью указать какой-нибудь атрибут, например, data-fullsize с адресом к полноразмерной картинке. А при на клик по превью повесить обработчик, который копирует адрес из data-fullsize в атрибут src просмотрщика.

В этом случае, большая картинка будет грузиться в момент изменения src картинки в окне просмотра. В зависимости от того, какие компоненты вы подключаете (jquery, bootstrap и т.п.), код будет отличаться. Или ставьте JS-плагин фотогалереи по его инструкции.

Сейчас пробую вывести изображение через модальное окно "bootstrap".

<span data-toggle="modal" data-target="#name">Ссылка</span>

Но опять же браузер изображение подгружает сразу, а не после нажатия =(

mmkulikov:
Ну ловите )) Самое примитивное. 100500 лет назад "игрался" с "изучением"
Вот
http://it-kmm.com/articles/main_web.php?p=588
и
Вот
http://it-kmm.com/articles/main_web.php?p=139

Это совсем другое.

---------- Добавлено 31.10.2018 в 12:22 ----------

VoV@:
Тут без JS не получится сделать. Если хотите сами такие вещи чинить, изучайте JS, или наймите кого-нибудь.

Для сабжа можно в превью указать какой-нибудь атрибут, например, data-fullsize с адресом к полноразмерной картинке. А при на клик по превью повесить обработчик, который копирует адрес из data-fullsize в атрибут src просмотрщика.

В этом случае, большая картинка будет грузиться в момент изменения src картинки в окне просмотра. В зависимости от того, какие компоненты вы подключаете (jquery, bootstrap и т.п.), код будет отличаться. Или ставьте JS-плагин фотогалереи по его инструкции.

Как же все сложно))

Пытаюсь использовать Bootstrap modal dialog

<span data-toggle="modal data-fullsize="Большое изображение"><img src="Маленькое Изображение"></span>

Я на верном пути?

Что дальше делать не пока не понял...

Подгрузка html кода формы Не корректно работает bootstrap AdContent - плагин для
VoV@
На сайте с 22.09.2007
Offline
196
VoV@
#19

Самый простой вариант (допустим, jquery подключён):


<div id="fullImage"><img src="" /></div>
<div id="preview">
<img src="pic1-mini.jpg" class="thumbnail" data-fullsize="pic1-fullsize.jpg" />
<img src="pic2-mini.jpg" class="thumbnail" data-fullsize="pic2-fullsize.jpg" />
<img src="pic3-mini.jpg" class="thumbnail" data-fullsize="pic3-fullsize.jpg" />
<img src="pic4-mini.jpg" class="thumbnail" data-fullsize="pic4-fullsize.jpg" />
</div>

<script>
$(document).ready(function () {
$(".thumbnail").click(function () {
$("#fullImage img").attr("src", $(this).attr("data-fullsize"));
});
});
</script>

Где поместить <div id="fullImage"><img src="" /></div> не важно, хоть в модальном окне, хоть на странице же где-нибудь.

PS https://codepen.io/anon/pen/dgBKmx

S_A_N_T_A
На сайте с 23.11.2009
Offline
154
S_A_N_T_A
#20

VoV@ - Спасибо Вам! Связал с Bootstrap modal dialog, который уже все равно есть на сайте и весит всего 28кб, только fullImage заменил на класс.

Отлично! Все работает!

Всем спасибо!

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий