Вчера и сегодня делал небольшой скрипт для своего сайта. Сделал. Теперь, если у тега “img” есть атрибут “scalable”, то на картинку можно будет кликнуть, чтобы её увеличить. В значение атрибута “scalable” нужно задать размер маленькой картинки (с единицами измерения css). Наконец можно будет заняться разделом “Мои фотографии”! Не стал искать готовых решений для такой задачи. Осваивать JS лучше на практике. Под катом пример работы, код html, javascript с комментариями и css.
JavaScript Обернём в function, чтобы вставить код прямо в html моего сайта и не портить глобальную область видимости.
(function()'use strict';//Создаём полупрозрачный серый фон на заднем плане под увеличенным изображением.//Он будет перекрывать все элементы экрана.constimgBg=document.createElement('div');document.getElementsByTagName('body')[0].appendChild(imgBg);imgBg.style='background-color: rgba(48, 48, 48, 0.6); position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1';imgBg.hidden=true;fillBg();//Функция, которая растягивает серый фон по высоте на весь экран.//Перерисовываем высоту серого фона при изменении размеров окна браузера.window.addEventListener('resize',fillBg);functionfillBg()imgBg.style.height=(document.documentElement.clientHeight+100)+'px';>//Определяем долю от размера экрана, которую будет занимать увеличенное изображениеletbigImgageScreenFraction;if(window.matchMedia('(max-width: 1080px)').matches)//Зашли с мобильного.bigImgageScreenFraction=1.0;>else//Зашли с компьютера.bigImgageScreenFraction=0.7;>//Заглушка для картинки. Появляется вместо неё на том месте откуда она увеличилась.letplaceholder=document.createElement('img');document.querySelectorAll('img[scalable]').forEach((img)=>constsmallSize=img.getAttribute('scalable');letdefaultStyle=`max-width:$smallSize>; max-height:$smallSize>`;img.style=defaultStyle;letisGoingToSmall=false;img.addEventListener('click',()=>if(img.getAttribute('is-big')==='true')//Картинка большая - уменьшаем//Смотрим по каким координатам надо вернуть картинку на место.letcoords=placeholder.getBoundingClientRect();//Устанавливаем для изображения уменьшенный размер.//Но position остаётся fixed, т.к. нужно, чтобы при анимации уменьшения не смещались остальные элементы страницы.img.style=`$defaultStyle>; position: fixed; left:$coords.left>px; top:$coords.top>px`;img.setAttribute('is-big',false);imgBg.hidden=true;//Указываем, что мы собираемся уменьшить картинку.//Эта переменная опять станет false, когда завершится анимация уменьшения.isGoingToSmall=true;>else//Картинка маленькая - увеличиваем.imgBg.hidden=false;img.setAttribute('is-big',true);//Перед тем как увеличить картинку вставляем вместо неё заглушку.placeholder.hidden=false;placeholder.style=`width:$img.width>px; height:$img.height>px; background-color: rgb(200, 200, 200)`;img.before(placeholder);//Увеличиваем картинку.doImageBig(img);>>);img.addEventListener('transitionend',()=>if(isGoingToSmall)//Отследили завершение анимации уменьшения.//Вставляем картинку обратно в поток.img.style=defaultStyle;isGoingToSmall=false;//Убираем заглушку.placeholder.hidden=true;>>);//Сохраняем центровку увеличенной картинки при изменении размеров окна браузера.window.addEventListener('resize',()=>if(img.getAttribute('is-big')==='true')doImageBig(img);>);>);//Эта функция расчитывает размеры увеличенного изображения и центрирует его.functiondoImageBig(img)letscreenHeight=document.documentElement.clientHeight;letscreenWidth=document.documentElement.clientWidth;letimgWidth=img.width;letimgHeight=img.height;letbigImgHeight=Math.round(screenHeight*bigImgageScreenFraction);letbigImgWidth=Math.round(screenWidth*bigImgageScreenFraction);letratio=imgWidth/imgHeightletnewWidth=Math.round(bigImgHeight*ratio);if(newWidthbigImgWidth)bigImgWidth=newWidth;>elsebigImgHeight=Math.round(bigImgWidth/ratio);>letleft=Math.round(0.5*(screenWidth-bigImgWidth));lettop=Math.round(0.5*(screenHeight-bigImgHeight));img.style=`max-width:$bigImgWidth>px; max-height:$bigImgHeight>px; left:$left>px; top:$top>px; position: fixed; z-index: 2`;>>)();
В случай с :after фото не является элементом HTML. Не обязательно «изо» будут картинками разного размера, они могут быть разными фотографии.
200 300 400 500
Как увеличить изображение с помощью скрипта JavaScript.
Опять таки способов реализации довольно много. И здесь важен индентификатор, например, miniatuyra1.
var imgbase ; function cambiarla() Щелчок ⇔ Отмена
Щелчок ⇔ Отмена
Также посмотрим на тот скрипт, при котором изменения происходят по щелчку мышки.
И тот, которым могут воспользоваться пользователи Picasa (подробнее).
100 | 200 | 300 | 400 | 500 | 600
Картинка по размеру экрана на CSS
Изменить изображение при наведении
37 комментариев:
anya При расширении большого количества изображений с помощью HTML5 они сами выстраиваются в каскад.Скажите как сделать так,чтобы они выстраивались в прямые линии?? спасибо! NMitra После картинки напишите
anya Получилось,но вертикально,а как сделать их в ряд по горизонтали? NMitra Уберите действие из комментария 2 и пробелы между кодом картинок.
..
. anya большое спасибо! Tatiana Chernetsova Спасибо большое! Я многому у вас учусь:) NMitra Я очень рада это слышать))) Владимир В «Использование CSS3: увеличение фотографии при клике», куда вставлять код? Извините за наивный вопрос, но я новичок в блоггере. NMitra При написании статьи на вкладке «HTML» см. http://4.bp.blogspot.com/-D4dwjS4d6WU/T1tkoVRlBwI/AAAAAAAACxU/Uy9OvLq1Kzc/s1600/oshibka-nezakrytyi-teg.png Анонимный Примеры не проверены во всех браузерах(Ие в частности).Не понятно как разместить например 5 одинаковых вариантов на одной странице — они просто глючат, по одиночке работают (миниатюра1 — миниатюра2 — побарабану. ) )))Конструктивная критика. NMitra Где есть id, нужно делать его индивидуальным. Не все свойства поддерживаются IE, но это не надолго. Для transition и transform нужны префиксы. Я рассматривала эти свойства в отдельных статьях. Анонимный здравствуйте. спасибо вам. много чего интересного я у вас узнал. у меня только есть вопрос. вот в CSS3 можно сделать так чтобы при увеличении страница не опускалась а оставалась в таком же положении в каком она и была. а то когда нажимаю я на нее страница и картинка спускаются вниз и как то не удобно. я новичок в этом. поэтому сам не могу разобраться. заранее спасибо! NMitra Отрегулируйте значения сами
См. подробнее http://shpargalkablog.ru/2011/04/css-nalozhenie.html Анонимный отрегулировать картинку по центру я смог, но не смог никак сделать чтобы при открытии картинки, страница не не сползала вниз. я наверное как то не правильно объясняю то что хочу сделать. Анонимный хочу исправить ошибку. «страница не сползала вниз» NMitra При использовании :target не получиться. 🙁 NMitra Исправила статью, замечания учтены. Дмитрий Спасибо, очень интересно. Хочу использовать transform. Подскажите, как сделать чтобы предыдущая картинка не подныривала под следующую. Спасибо. NMitra figure.vkl2:focus z-index: 100; position: relative; > Дмитрий Спасибо огромное. виталий нестёркин Здравствуйте долго искал как это воплотить благодаря вам сделал Увеличить фотографию с помощью позиционирования но вот загвоздка картинка открывается вбок и поэтому у людей с неширокими мониторами будет не вся видна подскажите что написать в коде чтобы изменить а точнее сдвинуть к центру экрана
как сейчас это выглядит можно увидеть на сайте http://xn--51-8kcfemaodkveyaqedoqejz1ao.xn--p1ai/ NMitra Здравствуйте,
.blok1 img + img виталий нестёркин спасибо что -то уже получается правда при значении -370 картинка сильно убежала влево поставил 370 сместилась почти на нужное место шас подберу нужное значение а вот left: 50% непонятный параметр менял на 10 % визуально нечего не изменилось что он регулирует и если понадобится каким параметром немного опустить в низ картинку? NMitra margin-top.
У вас две строки
Нижняя запись приоритетная, она перебивает значение left: 50%; По хорошему нужно сделать так (я сразу этого не сделала, чтобы акцентировать ваше внимание на нужных свойствах)
Теория: http://shpargalkablog.ru/2012/03/div-po-centru-html.html http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html http://shpargalkablog.ru/2011/04/css-nalozhenie.html http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html виталий нестёркин Спасибо большое за помощь шас пока некогда ближе к ночи попробую разобратса виталий нестёркин Наталья здравствуйте пытался написать вам письмо на адрес n.mitra@yandex.ru.письмо не отравилась Ошибка Недопустимый адрес Адрес n.mitra@yandex.ru. не существует или заблокирован. Письмо не было послано виталий нестёркин прошу прошения за мою невнимательность просто когда вставлял адрес не заметил точку после ru все нормально с ящикам Юрий Наташа, больше всего понравился вариант с transform: scale. Но при быстром перемещении курсора с одной соседней картинки на другую из границы «цепляются»: article img width: 100%; height: 231px; transition: 0.5s; >
article img:hover transform: scale(1.5); >
Видел в комментариях: figure.vkl2:focus z-index: 100; position: relative; >
Но это не решает проблемы,т.к. в приоритете все равно будет какое-нибудь конкретное изображение. Может в таких случаях нужно задавать большее расстояние между img, чтобы они не «цепляли» друг друга? Или не указывать для изображений слишком большие размеры при наведении курсора? NMitra figure:hover, figure:focus z-index: 101; > Юрий К сожалению, не помогло. Это моя вина, т.к. целиком не объяснил ситуацию. Дело в том, что изображения находятся внутри ячеек таблицы. Чтобы было более наглядно приведу код (в html все скобки удалил):
section article h2 Название статьи /h2 figure :first-child transform: translateX(-10px); >
Для крайних статей и всех изображений прописано transform. Может они конфликтуют? Хотя о возможности такого информации нигде не нашел. NMitra Ничего не понимаю, нужна или ссылка на страницу или на пример на http://jsfiddle.net/ Юрий Половина кода все равно «улетела». Есть section, в которой три article. В каждом article размещено изображение. Далее:
Помогите решить проблему, я создал сайт с картинками, которые берутся от сайта Unsplash, сделал, что хотел, но я бы еще хотел, чтобы была возможность при нажатии любой картинки, будто с рандома или с поиска, она увеличивалась, я много вариантов переискал, как это сделать, но у меня не получалось, но я нашел один вариант, который мне очень понравился и я хотел бы, чтобы у меня примерно также было https://playcode.io/916548, надеюсь кто-то поможет.
У меня такой вопрос как сделать чтобы каждое фото в сайте адаптировалась с помощью блоков вот например как на скриншоте как бы например в инстаргаме любое фото адапитруется с помощью div я подумал с помощью боотсрап там только ширина а высота я не пойму..
Нужно приложить код html и css, без этого трудно понять каким именно образом формируется сетка. Также следует сказать, будут ли все фотографии с квадратным соотношением сторон или нет.
23 июл 2017 в 12:57
вот да квадратные как видите на изображении а какой html css? Вы примерно можете написать код который может вот так как на изображении определить размер
23 июл 2017 в 13:13
Вы хотите резиновую вёрстку или чтобы блоки были примерно всегда одного размера, но перемещались по странице?
23 июл 2017 в 13:18
да вот например говорю блок див 10х10 а фото например 100х100 хочу чтобы автоматически стало 10х10(размер блока) без деформации т.д как на инстаграм посмотрите пойметеменя
23 июл 2017 в 13:29
@SportsTubers, может просто для div’ов делать background-image: url(. ); background-size: cover; ?
– user242433
23 июл 2017 в 13:48
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Как вариант можно использовать абсолютное позиционирование изображения относительно контейнера. То есть ширину задавать на весь размер контейнера через width: 100%, высота, как известно, установиться пропорционально. И после этого установить верхнюю позицию изображения как top: 50%. А дальше используем правило transform: translateY(-50%). Благодаря этому изображение впишется по высоте в контейнер. Естественно, у контейнера нужно указать свойство overflow: hidden, чтобы скрыть выходящие за его края части изображения.
' target='_blank' >$ ' target='_blank' >Photo by: $ ` > function search(searchImg) < let url = `$&query=$`; return fetch(url) .then(response => response.json()) .then(result => < return result.results; >); > function showImages(data) < images.innerHTML = ''; data.forEach(item =>< let image = document.createElement('div'); image.className = 'showImage'; image.innerHTML = ` 
' target='_blank' >$ ' target='_blank' >Photo by: $ ` images.appendChild(image); >); > searchImages.addEventListener('submit', (event) => < // if (input.value === '') < // alertify.error('Enter the title!') // >event.preventDefault(); let searchImg = input.value; searchStart(); search(searchImg) .then(showImages) >);