Ищу помощи: изменить размер картинки в нетривиальной ситуации
Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора. И столкнулся с проблемой, которую сам решить не могу. Мне нужно задать размеры одной конкретной картинке на странице, ширину и высоту в пикселах - относительный размер в процентах для пропорционального масштабирования не годится. Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный 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, время: 10:08. |