Сообщений в теме: 10

[An1hony]

Объявления о продаже квартир. Пользователю необходимо дать возможность при подаче объявления загружать по одной фотке. Подошел JbZoo Image. А вот как теперь в шаблоне full вывести все загруженные юзером фотки в виде слайдера или хотя бы одну большую и остальные миниатюры (как здесь)?

 

Потому что JbZoo Image на фронте выводит все фотки в одинаковом размере, а это не подходит.

[Kess]

Для создания слайдера можно использовать какой-нибудь плагин. Например, такой - http://sorgalla.com/...ects/jcarousel/ . Потребуется в шаблоне full завернуть позицию с изображением в нужный ul, а вывод jbimage - в соответствующие li. Потом подключить скрипт и css. Чтобы выглядело хорошо, набо будет довольно много корректировать css.

 

Второй вариант - одна большая фотография и миниатюры - легко делается с помощью css. Если дадите ссылку на сайт, смогу дать вам пример кода.

[An1hony]

отправил ссылку в ЛС. На этой странице 4 фотки. Тут важна такая штука: ведь фоток может быть теоретически и 5, и 10, и 20. Зависит от того, сколько захочет загрузить юзверь. Поэтому надо либо размер миниатюр делать меньше при большем кол-во фоток, чтобы все было видно. Либо насильно показывать только несколько первых, а остальные будут открываться в поп-апе. Что из этого возможно?

[Kess]

.full-gallery {
    width: 414px;
}
.full-gallery a {
    display: block;
    float: left;
    width: 124px;
    height: 93px;
    margin-right: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}
.full-gallery a:first-child {
    width: 400px;
    height: auto;
    margin-right: 0;
}
.full-gallery a img {
    max-width: 100%;
    height: auto;
}

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

Сообщение отредактировал Kess: 03 November 2013 - 14:28

[dearsashechka]

Куда вставлять этот код? У меня фотки выводятся через jbgallery, тоже хочу, чтобы первая была во всю ширину страницы, что-нибудь типа этого http://gyazo.com/bdf...8a0fd9e64e3.png

[Kess]

Вставлять такой код лучше всего в CSS файл вашего шаблона - /templates/protostar/css/template.css. Но этот код вам не подойдет, так как рассчитан не на галерею, а на JBImage и для другого сайта.

 

Вам подойдет что-то такое:

#gallery-1 a {
    display: block;
    float: left;
    width: 283px;
    height: 189px;
    margin: 0 5px 10px 5px;
    overflow: hidden;
    line-height: 187px;
}
#gallery-1 a:first-child {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#gallery-1 a img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

Но перед этим поменяйте настройки галереи в шаблоне full, увеличив ширину миниатюр до 909px. Без этого нет смысла делать первую фотографию во всю ширину, так как будет очень плохое качество изображения.

[dearsashechka]

в шаблоне фулл все приемлимо, но в таблице первая запчасть, имеющая картинки, отображается неправильно

http://gyazo.com/a71...44583670417.png

[Sliapy]

Добавьте ко всем селекторам класс полной страницы jbzoo-item-full, чтобы было

.jbzoo-item-full #gallery-1 a {
    display: block;
    float: left;
    width: 283px;
    height: 189px;
    margin: 0 5px 10px 5px;
    overflow: hidden;
    line-height: 187px;
}

и т.д.

 

[dearsashechka]

добавил .jbzoo-item-full перед всеми блоками из сообщения Kess, в таблице все адекватно, но и в фулле отображается по-старому, все картинки одинаковые маленькие 

[Kess]

.jbzoo-view-item #gallery-1 a {
    display: block;
    float: left;
    width: 283px;
    height: 189px;
    margin: 0 5px 10px 5px;
    overflow: hidden;
    line-height: 187px;
}
.jbzoo-view-item #gallery-1 a:first-child {
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jbzoo-view-item #gallery-1 a img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}