Добрый день! Есть такая задача: при наведении курсора мыши, изображение должно увеличиваться. Попробовали реализовать это так. Создала замещающий клиентский модуль CommonCSSV2, в котором определила:
img.big {cursor: pointer; max-width: 500%;}
img.big:hover {max-width: none;}
В карточке определила класс для поля фото:
"operation": "insert",
"name": "UsrPhoto",
"values": {
//класс для фото
"wrapClass": [
"img.big"
],
"getSrcMethod": "getSrcMethod",
"onPhotoChange": "onPhotoChange",
"beforeFileSelected": "beforeFileSelected",
"readonly": false,
"defaultImage": "",
"generator": "ImageCustomGeneratorV2.generateCustomImageControl"
},
"parentName": "PhotoContainer",
"propertyName": "items",
"index": 0
}
К сожалению на страничке ничего не изменилось (кэш чистила). Подскажите, пожалуйста, что не так? Спасибо!
Нравится
Юлия, добрый день!
Для подключения своих стилей нет необходимости создавать замещающий модуль для CommonCSSV2. Можно создать свой модуль, в который добавить только необходимые стили, и подключить его к странице:
define("MyPageV2", ["MyPageV2Resources", "css!MyCSSModule"], function(resources) { ... } );
Касательно самих стилей - скорее всего, они перекрываются базовыми стилями image-edit-container и ts-image-edit-full-size-element. Попробуйте добавить свои стили примерно так:
.image-edit-container .big { cursor: pointer; } .image-edit-container .big:hover { width: 200% !important; height: 200% !important; max-width: none; max-height: none; } .image-edit-container .ts-image-edit-full-size-element:hover { max-width: none; max-height: none; }
И в карточке:
"operation": "insert", "name": "UsrPhoto", "values": { "classes": {"wrapClass": ["big"]}} ... }
Олег, огромное Вам спасибо!!! Все получилось! Вы гений!
Все здорово, вот только при увеличении фото текст, который был изначально вокруг изображения, остается на месте и "мешает" при просмотрe фотографии. Понимаю, что необходимо либо изменить стили этих полей с текстом, либо фото при увеличении должно быть "непрозрачным" .
Для того, чтобы увеличенное фото отображалось поверх остальных элементов страницы, можно в стиле .image-edit-container .big:hover установить значение свойства z-index больше 10. У остальных контролов по умолчанию 10.
Добрый вечер! Подскажите, пожалуйста, а можно ли добавить такой же класс на поле изображения в детали "файлы и ссылки"? Эта деталь на страничке прописана готовым "блоком", свойство надо добавить на отдельное поле, не смогла найти исходную страничку, чтобы сделать для нее замещающую и добавить класс. Подскажите, пожалуйста, где найти исходную страничку. Спасибо!
Юлия, возможно, Вам нужно заместить FileDetailV2.
Олег, замещение сделала, класс прописала. В консоли класс есть у поля с изображением, но эффекта изменения изображения нет. Подскажите, пожалуйста, чего не хватает
Юлия, возможно, класс контейнера, который содержит поле с изображением на детали "Файлы", отличается от image-edit-container. Попробуйте заменить стили для этого класса, по аналогии с image-edit-container.
Олег, спасибо Вам огромное за помощь. Все получилось! Для решения необходимо было сделать замещающий клиентский модуль для файла FileDetailTileViewCss, так как в нем прописаны свойства контейнера изображения. Код такой:
//стиль для увеличения фото щита в файлах и сообщениях
.entity-image-container-class .big {
float: left;
width: 128px;
height: 128px;
text-align: center;
line-height: 30% !important;
cursor: pointer;
z-index: 15;
}
.entity-image-container-class .big:hover {
width: 200% !important;
height: 200% !important;
max-width: none;
max-height: none;
}
.entity-image-container-class .ts-image-edit-full-size-element:hover {
max-width: none;
max-height: none;
}
Также создать замещающий модуль для файла FileDetailV2 и прописать класс "big" вот тут:
selectEntityContainer.items.push(checkBoxConfig);
var imageContainer = ViewUtilities.getContainerConfig("entity-image-container",
["entity-image-container-class"]);
var imageViewConfig = {
className: "Terrasoft.ImageView",
imageSrc: {"bindTo": "getEntityImage"},
classes: {wrapClass: ["entity-image-view-class"]},
classes: {wrapClass: ["big"]},
click: {"bindTo": "onEntityImageClick"}
};