10 replies to this topic

[styopinevgeniy]

Здравствуйте, уважаемые разработчики!

Ситуация следующая:

На сайт загружена фотография клиента в поле JBZoo Image, обрезанная версия которой отображается в шаблонах teaser, full и т.д.

Часто бывает, что в уменьшенной версии фотографии обрезается голова клиента, что, очевидно, с эстетической и чисто человеческой точки зрения неправильно

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

 

 

[3d]

Простой способ - использовать одинаковое соотношение сторон изображений в Тизере и в Фуле аналогично исходному файлу.

Т.Е. если оригинал 800*600, то используйте соотношение 4:3 в Тизере и Фуле.

[styopinevgeniy]

Простой способ - использовать одинаковое соотношение сторон изображений в Тизере и в Фуле аналогично исходному файлу.

Т.Е. если оригинал 800*600, то используйте соотношение 4:3 в Тизере и Фуле.

Спасибо Вам за верный совет!

Действительно, можно пойти по такому пути!

Но я изначально подразумевал в шаблонах соотношение 1:1. Под такой вариант у меня заточено отображение всей анкеты. Может быть можно где-то настроить область отображения исходной фотографии? Например, обязательно с верхней границы и, скажем, до середины фото.

Edited by styopinevgeniy, 16 August 2013 - 10:16.

[styopinevgeniy]

Подскажите ещё, пожалуйста, как избавиться от синих полос, появляющихся при наведении на края фотографии:

 

 

[joejoker]

По поводу отображения изображений в элементе jbzoo image

http://forum.jbzoo.c...ij-jbzoo-image/

http://forum.jbzoo.c...r-kartinki-tov/

 

А вот что касается синих полос, то тут ничего сказать не могу. Возможно наложение ваших стилей на стили jbzoo. Посмотрите через отладчик, какие конкретно стили вызывают эти синие полосы.

[3d]

Для удобства работы с фото прежде всего определите соотношение сторон в Тизере и Фулле. Если фото не имеет такого соотношения сторон - кадрируйте - хоть 1:1 - тогда вопросов не будет. И еще не загружайте фото более того размера, который планируете просматривать на ПопАпе.

[Sliapy]

Очень хороший пост Станислава по этому поводу - http://forum.jbzoo.c...ori/#entry24235

 

Вашу проблему с фото им так же можно решить: задать только ширину фото, присвоить оборачивающему фото контейнеру фиксированную высоту и overflow.hidden

 

Синий фон ссылок - 100% наложение какого-то свойства CSS. Без ссылки сказать точнее сложно.

Edited by Sliapy, 16 August 2013 - 12:26.

[ripcord]

Предлагаю более другое решение
 

.jbzoo-item-full .item-image
{
    overflow: hidden;
    position: relative;
    width: 200px;
    height: 200px;
}
.jbzoo-item-full .item-image IMG.jbimage
{
    bottom: 0;
    display: table;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.jbzoo-item-full IMG
{
    width: auto;
    max-height: 100%;
}

 
На примере айтемов демо-сайта (оранжевым пометил для наглядности происходящего):
 

 
 
 
Кстати для респонзив ресурса это круче, поскольку можно менять размеры .jbzoo-item-full .item-image
через @media queries и не иметь апскейла изображений.

Edited by SmetDenis, 18 August 2013 - 18:09.

[ripcord]

Обновление:
 

.item-body .item-image {
  width: 220px;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.item-body IMG.jbimage {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.item-body IMG {
  width: auto;
  max-height: 100%;
}

 
^{(картинки родственных айтемов игнорируются)}

[Sliapy]

Ну, по сути это похожее решение. Я именно это и имел в виду