Ищу помощи: изменить размер картинки в нетривиальной ситуации
Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора. И столкнулся с проблемой, которую сам решить не могу. Мне нужно задать размеры одной конкретной картинке на странице, ширину и высоту в пикселах - относительный размер в процентах для пропорционального масштабирования не годится. Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный CSS / жаваскрипт средствами конструктора. Проблема в том, что я не могу описать эту картинку в CSS - выдаваемый сервером код не присваивает ей никаких уникальных и постоянных аттрибутов, которые можно было бы использовть в CSS! Все аттрибуты, которые присваиваются картинке и родительскому DIV - либо генерируются системой (т.е. меняют значения при перезагрузках), либо не являются уникальными для данного элемента. А вписать в шаблон свой собственный аттрибут, как я уже отметил, нет возиожности. Есть единственный аттрибут, который удовлетворяет параметрам уникальности и неизменности - но он, собака, не явдяется ни классом, ни ID - а следовательно, насколько я понимаю, не может быть использован для описания элемента в CSS. Кроме того, этот аттрибут присваивается не самой картинке, а родительскому DIV. Вот это единственный аттрибут: data-slide-url="gallery-description" - и зацепиться можно только за него. Насколько я понимаю, эта ситуация может быть обработана только скриптом, но тут я совершенный нуль. Или всё-таки есть более простое решение? Может ли кто-нибудь помочь решить этот ребус? Вот кусок кода:
<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
<img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="" data-image-resolution="750w">
</div>
Спасибо заранее! |
Krakozavr,
<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
<img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="http://javascript.ru/cat/list/donkey.gif" data-image-resolution="750w"/>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('div[data-slide-url="gallery-description"]').children().css({"height":"100px", "width":"200px"});
</script>
|
Dilettante_Pro, спасибо огромное!
Ларчик просто открывался :) Но - уточняющий вопрос. Я забыл упомянуть важный момент: размеры указываются не единовременно, а в зависимости от размера экрана. Виноват, упустил из виду, что это может быть важно. Я пользуюсь констркуцией типа
@media only screen and (max-height:XXXpx){<!-- код с переменными параметрами -->}
Допустимо ли внедрение такой конструкции в код в таком формате? И.е. понятно, линк на скрипт уходит в шапку, а инструкции по размерам (вторая часть) - в такую конструкцию в кастомном CSS? ДОБАВЛЕНО: ну в CSS оно ожидаемо не исполняется, а внедрение кода в header не работает - потому что, видимо, код должен размещаться после искомого тэга, чтобы ему было чего обрабатывать, так? Попробовал собрать конструкцию для внедрения в footer (это возможно):
<script>
$('div[data-slide-url="gallery-description"]').children().css( @media only screen and (max-height:1100px){"height":"800px", "width":"600px"} @media only screen and (max-height:900px){"height":"400px", "width":"400px"} @media only screen and (max-width:800px){"height":"100px", "width":"100%"});
</script>
Говорит, ошибка в скрипте. |
Цитата:
|
Чтобы было понятнее, чего добиваюсь (а то может я думаю совсем в неверном направлении):
вот ссылка на применение. https://alex-potemkin.squarespace.com/ сайт на триале, надо нажать кнопку и ввести код для входа, уж простите :) Собственно, субъект масшитабирования - белая подложка под описанием. Проблема в том, что шаблон галереи не предусматривает такого блока вовсе, а мне он нужен. Я его создал хитрым хаком: загрузил белую картинку и дал ей в админке описание. Другие картинки в галерее тоже могут его иметь, но нету - так нету. Это описание выводится в специально размеченном DIV, свойства которого можно задат через CSS, а положение жестко привязано к картинке. Более того, в принципе работает адаптивный дизайн - галерея и текст масштабируются взависимости от разрешения дисплея, я там кое-что еще подкрутил и теперь почти хорошо. Но не совсем. Проблема в том, что картинка масштабируется пропорционально. И соответственно приходится "пропорционально" масштабировать текст. На маленьких разрешениях он становится слишком мелким - вот тут нужно бы увеличить ширину картинки-подложки. Казалось бы - пиши меньше, делай крупнее, и не морочь голову, ан нет. Это только половина беды. Вторая половина беды - раскладка страницы для мобильных девайсов :) Она имеет другую структуру - изображения в галерее выстраиваются в вертикальную ленту, масштабируясь по ширине экрана. И тогда все получается ровно наоборот: картинка-подкладка становится слишком высокой, с огромным белым пространством, которое приходится заполнять слишком крупным текстом, а сама галерея вообще выдавливается за край экрана. P.S. Сам я ниразу не кодер, фотограф я :) кой-чего по HTML/CSS знаю, но весьма поверхностно. А со скриптами дружбы нету вовсе. P.P.S. И кстати, думаю чо даже доступ к исходному коду поможет мало - потому что добавить уникальный идентификатор к одной отдельно взятой картинке в автоматически генерируемой галерее без анализа и переписывания всего кода скорее всего невозможно. |
искал примеры и решения.
нашел конструкцию, которая вроде почти как надо, но приспособленная к моим нуждам и предложенному решению - не работает.
<script>
var height=0;var width=0;
if (self.screen) {
width = screen.width
height = screen.height
}
if (width<810)
{
$('div[data-slide-url="gallery-description"]').children().css({"height": "300px", "width":""});
}
else
{
if ((width>=810) && (height>=800))
{
$('div[data-slide-url="gallery-description"]').children().css({"height":"", "width":""});
}
else
{
$('div[data-slide-url="gallery-description"]').children().css({"height":"400px", "width":"400px"});
}
}</script>
смотрел тут http://www.i2r.ru/static/476/out_17033.shtml и тут http://javascript.ru/forum/dom-windo...-kartinki.html и тут http://www.wellsait.ru/file_css.php |
Krakozavr,
Эта конструкция будет работать при следующем размещении:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).on('ready', function () {
var height = 0, width = 0;
if (self.screen) {
width = screen.width;
height = screen.height;
}
var target = $('div[data-slide-url="gallery-description"]').children();
if (width < 810) {
target.css({ "height": "300px", "width": "" });
}
else {
if ((width >= 810) && (height >= 800)) {
target.css({ "height": "100px", "width": "100px" });
}
else {
target.css({ "height": "400px", "width": "400px" });
}
}
});
</script>
</head>
<body>
<div class="slide sqs-gallery-design-strip-slide sqs-active-slide" data-slide-id="570836b92b8dde076f2016f4" data-slide-url="gallery-description" id="yui_3_17_2_28_1460187781722_544" data-type="image">
<img data-src="" data-image="" data-image-dimensions="700x900" data-image-focal-point="0.5,0.5" data-load="false" style="" alt="" class="loaded" src="http://javascript.ru/cat/list/donkey.gif" data-image-resolution="750w"/>
<div style='background:yellow'></div>
</div>
</body>
</html>
div с желтым фоном я добавил, чтобы было видно, что изменение размеров действует для всех children, входящих в выбранный div. Для предотвращения этого надо конкретизировать выбор целевого объекта, например
var target = $('div[data-slide-url="gallery-description"]').children('img');
Кроме того, целесообразно расширить действие этого скрипта также и на случай изменения размеров экрана - для этого строку 7 и следующие написать в виде
$(window).on('load resize', function () {
var width = $(window).width(),
height = $(window).height();
var target = $('div[data-slide-url="gallery-description"]').children('img');
|
Dilettante_Pro,
спасибо огромное что возитесь со мной :) что-то идет не так. В тесте всё работает как часы, но в реальном сайте скрипт игнорируется, всё масштабирование идет по правилам, определенным в CSS. Более того - когда я масштабирую окно с выделенным в открытом инспекторе длементом IMG - я вижу, что в процессе изменения размеров окна картинка масштабируется по правилу скрипта при изменении высоты (в обычной раскладке), и в инспекторе мелькают в свойствах элемента правильные размеры, но как только отпускаю окно - все становится "по умолчанию". в мобильной раскладке (масштаьирование по ширине) и этого не видно :) вот итоговый код:
<!-- gallery description -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(window).on('load resize', function () {
var width = $(window).width(),
height = $(window).height();
var target = $('div[data-slide-url="gallery-description"]').children('img');
if (width <= 800) {
target.css({ "height": "400px", "width": "100%" });
}
else {
if ((width > 800) && (height >= 700)) {
target.css({ "height": "", "width": "" });
}
else {
target.css({ "height": "400px", "width": "400px" });
}
}
});
</script>
<!-- end gallery -->
вот на всякий случай фрагмент моего кастомного CSS, описывающий галерею для размера экрана, соответствующего установленному в скрипте:
@media only screen and (max-height:700px){.collection-type-gallery #slideshow{height:400px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 400px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 11pt;}.site-title .logo {font-size: 31pt;}.logo-subtitle {font-size: 10pt;} #header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 10pt; padding-left: 50px; } body {font-size: 12pt; }
div.image-description { top: -30px; margin-top: 0px; background-color: white; background: white; margin-left: 40px; margin-right: 3px; }
.collection-type-gallery #slideshow .slide .image-description strong {
font-size: 18pt; color: #bbbbbb; font-weight: bold; line-height: 80%;}
.collection-type-gallery #slideshow .slide .image-description p {font-size: 11pt; margin-bottom: 5px; color: black; line-height: 116%;}}
Ест подозрение, чт это связано с указанием в оригинальном коде размеров элементов с маркером !important В инспекторе это выглядит например, так:
@media only screen and (max-width: 800px)
#slideshowWrapper.mobile-gallery #slideshow .slide img {
position: static !important;
height: auto !important;
width: 100% !important;
Прорбовал лобавлят !important в скрипт, но тогда он совсем перестает работать, и в примере тоже :) |
Krakozavr,
Попробуйте перед установкой своих параметров удалить классы на своем div |
Dilettante_Pro, проблма неожиданно решилась более простым способом. Оказывается, селектор аттрибута все-таки стандартно обрабатывается в CSS - в рещультате, помучавшись с выстраиванием определения тэга для повышения его веса, получилось в стандартной CSS-конструкции переопределить параметры картинки в рамках @media only screen ...
Тем не менее, огромное спасибо - как минимум понимания того, как оно работает, с Вашими подсказками прибавилось :) Без Вас я бы не добрался до решения. |
| Часовой пояс GMT +3, время: 11:12. |