X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Адаптивные изображения под размер модального окна, верстка
Fiasko
Fiasko
Topic Starter сообщение 26.7.2017, 17:12; Ответить: Fiasko
Сообщение #1


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

Код
<div class="mini_zoom_wrapp">
   <a href="img/stockholm-sweden-riddarholmen-2862.jpg" class="ankor_box">
      <img src="img/stockholm-sweden-mini.jpg" alt="">
   </a>
</div>

<div class="mini_zoom_wrapp">
   <a href="img/stockholm-sweden-riddarholmen-2862.jpg" class="ankor_box">
      <img src="img/stockholm-sweden-mini.jpg" alt="">
   </a>
</div>

<div class="mini_zoom_wrapp">
   <a href="img/stockholm-sweden-riddarholmen-2862.jpg" class="ankor_box">
      <img src="img/stockholm-sweden-mini.jpg" alt="">
   </a>
</div>


Мы нажимаем на миниатюру, появляется модальное окно в котором с помощью js-а мы берем путь к нужному большому изображению, присваиваем этот путь к новой картинке, которая в свою очередь и открывается в модальном окне (мод.окно тут не описываю)!

Подскажите, как сделать таким образом чтобы модальное окно подстраивалось под размер экрана по высоте и ширине,а в нем была уже адаптирована вот эта наше большое изображение по высоте и ширине.

p.s. Модальное окно располагаю по центру экрана с помощью js-а, беру ширину и высоту экрана, отнимаю высоту и ширину нашего модального окна, делю наполовину и получаю отступы top и left соответственно. В данном случае из-за того, что изображение большое не успевает загрузиться, не успевает сформироваться модальное окно по высоте ,то и координаты получаются некорректные.


У кого есть по этому вопросы готовые свои решения или советы может? (готовые плагины не расматриваем в данном случае). Всем спасибо за внимание

Сообщение отредактировал Fiasko - 26.7.2017, 17:17
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WoWeb
WoWeb
сообщение 26.7.2017, 17:22; Ответить: WoWeb
Сообщение #2


Цитата(Fiasko @ 26.7.2017, 17:12) *
p.s. Модальное окно располагаю по центру экрана с помощью js-а, беру ширину и высоту экрана, отнимаю высоту и ширину нашего модального окна, делю наполовину и получаю отступы top и left соответственно.

Почему бы просто через css не прописать модельному окну:
Код
.mini_zoom_wrapp{
position:fixed;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
width:свой размер, можно в %
height:auto;
}

.mini_zoom_wrapp > a{
display:block;
}

.mini_zoom_wrapp img{
width:100%;
height:auto;
display:block;
}



--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Fiasko
Fiasko
Topic Starter сообщение 26.7.2017, 17:29; Ответить: Fiasko
Сообщение #3


WoWeb, спасибо за совет! Но тогда не будет возможности к примеру к данному блоку применить например css3 анимации с использованием transform и другими значениями.
К примеру если взять из библиотеки animate.css эффект
bounceInDown или bounceoutDown который использует в своей анимации transform:translate3d(значения). Может быть по этому вопросу есть также какие-то советы как совместить?

P.s. И эти блоки повторюсь которые описаны выше и к которым вы написали стили не относятся к модальному окну (это просто 3 подряд картинки в ссылках на свои картинки большого размера),я понял что вы имеете ввиду. Вы предлагаете модальному окну задать позиционирование через transform.

Сообщение отредактировал Fiasko - 26.7.2017, 17:31
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WoWeb
WoWeb
сообщение 26.7.2017, 17:32; Ответить: WoWeb
Сообщение #4


Цитата(Fiasko @ 26.7.2017, 17:29) *
К примеру если взять из библиотеки animate.css эффект
bounceInDown или bounceoutDown который использует в своей анимации transform:translate3d(значения). Может быть по этому вопросу есть также какие-то советы как совместить?

Ну можно перед анимацией на лету оборачивать контейнер через .wrap() и ему уже задавать translate3d. Возможно нужно будет сделать между действиями мизерный таймаут в 100ms
Да и вроде можно добавлять translate3d таким образом transform: translateX(-50%) translateY(-50%) translate3d(10px,0px,0px);

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Сообщение отредактировал WoWeb - 26.7.2017, 17:36


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Требуется копирайтер под Дзен
Размер статей 1-1.5к знаков.
1 GigArt 1162 4.5.2021, 13:31
автор: ISK
Открытая тема (нет новых ответов) Armorica - товарная партнерская сеть | Смартлинка | CPA, Revenue Share | Офферы под все ГЕО
13 Armorica 1952 29.4.2021, 17:27
автор: Armorica
Открытая тема (нет новых ответов) Ссылки (PBN) под Украину, Морды, статейные, индивидуальный подход
то что дает жирный рост, конкурентное преимущество
21 mvchansas 6605 28.4.2021, 9:45
автор: mvchansas
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКрауд-маркетинг. Ручное размещение ссылок под бурж с гарантией
13 seolink.orders 2209 26.4.2021, 14:46
автор: seolink.orders
Открытая тема (нет новых ответов) Оптимизировать сайт под PageSpeed Insights
18 serg5777 1356 25.4.2021, 19:19
автор: suffix


 



RSS Текстовая версия Сейчас: 6.5.2021, 19:13
Дизайн