Доработка слайдера

[Victor_winner 2]

Здравствуйте форумчане. 

Нужны две доработки слайдера (тема realty)

1. Доработка - размер

Хочу доработать свой слайдер, мне нужно, чтобы выводилось 3 фотографии.

В файле slider.tpl.html нашёл место, которое отвечает за размер

div class="zt-box-inside">                                <div class="zt_scroller">                                    <div id="zt_scroller109" class="scroller-slider"                                        style="width: 960px; height: 156px;">                                        <ul id="mycarousel" style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1;">{section name=i loop=$special_items2}             //выделенная строка            <li style="overflow: hidden; float: left; width: 425px; height: 156px;">                                                <div class="catpanel ">                                                    <div class="block">                                                        <span class="img"><a href="{$special_items2[i].href}"><img                                                            src="{if $special_items2[i].img[0].preview != ''}{$estate_folder}/img/data/{$special_items2[i].img[0].preview}{else}{$estate_folder}/template/frontend/realty/images/no_photo_thumb.png{/if}"                                                            alt="{$special_items2[i].path}"                                                            title="{$special_items2[i].path}" /></a></span> <a                                                            class="title"                                                            href="{$special_items2[i].href}">{$special_items2[i].path}</a>                                                        <p class="content">{$special_items2[i].text|strip_tags|substr:0:80}…</p>                                                        <p>                                                            <a class="readmore" title="" href="{$special_items2[i].href}">Посмотреть</a>                                                        </p>                                                    </div>                                                </div>                                            </li>

Я изменил выделенную строку на параметры

<li style="overflow: hidden; float: left; width: 230px; height: 156px;">

но теперь наблюдаю, что нет вывода текста к объявлению. То есть в слайдере появляются только фото, но нет инфы об объявлении справа от фото. Как это исправить?

 

 

2. Доработка - добавление статуса  VIP к объявлению, которые показываются в слайдере

Нужно добавить статус VIP  к объявлениям слайдера. Данный статус делает объявление невыпадаемым из слайдера. То есть уверенность, что при добавлении новых объявлений, старые VIP объявления всегда будут одними из первых и уж точно не выпадут из слайдера.

[abushyk 694]

Зачеркнутое удалить

 

 

 

 

/template/frontend/realty/css/zt_scroller.css

 

убираем часть стилей в цсс

.zt_scroller{position:relative;display:table;margin-top: 5px;margin-bottom: 5px;width: 950px;}.scroller-slider { display:block; overflow: hidden;padding:5px 0; margin: 0 50px; height: 156px;}

 

ограничиваем размер слайда 1\3 ширины слайдера

.scroller-slider div.catpanel > div {display:inline-block;margin:0 5px; height: 148px; overflow: hidden; width: 270px;}

Уменьшаем картинку в слайде

.scroller-slider div.catpanel > div > span.img a {display: block;float: left;width: 100px; /*вот тут*/height: 135px;line-height: 100px;overflow: hidden;position: relative;z-index: 1;}

/template/frontend/realty/slider.tpl.html

$('#zt_scroller109').jCarouselLite({             btnNext: "#next109",    btnPrev: "#prev109",    visible: 3, /*тут ставим видимыми 3 слайда*/    scroll: 1,    auto: 5000,    circular: mode,    wrap: 'circular'});

[abushyk 694]

Я изменил выделенную строку на параметры

 

230 пикселей на слайд. Из них еще 200 пикселей на картинку. Тексту просто не остается места и он прігает вниз под картинку, там где его уже не видно.

[Victor_winner 2]

Спасибо большое. Сделал.

А как быть со вторым пунктом?

 

2. Доработка - добавление статуса  VIP к объявлению, которые показываются в слайдере

Нужно добавить статус VIP  к объявлениям слайдера. Данный статус делает объявление невыпадаемым из слайдера. То есть уверенность, что при добавлении новых объявлений, старые VIP объявления всегда будут одними из первых и уж точно не выпадут из слайдера.

[@sms 1]

Подскажите пожалуйста еще такой нюанс.

на главной вывод слайдера - по размерам все ок, но внутри слайдера изображения с объяв не масштабны и привязаны к  верху изображения.

можно их масштабировать хотя б до ширины слайдера?

[TopRaN 235]

Подскажите пожалуйста еще такой нюанс.

на главной вывод слайдера - по размерам все ок, но внутри слайдера изображения с объяв не масштабны и привязаны к  верху изображения.

можно их масштабировать хотя б до ширины слайдера?

1. адрес сайте?

2. шаблон?

[@sms 1]

1.http://estate.sitebill.ru/?theme=freehold второй слайдер - явно видно

2. freehold  

[abushyk 694]

1.http://estate.sitebill.ru/?theme=freehold второй слайдер - явно видно

 

смотрел, смотрел, но так и не понял где второй слайдер. а если и не слайдер, а второй слайд, то, честно говоря, тоже не понял что там смасштабировать по ширине)))

[@sms 1]

не правильно выразился,

второй слайд,

хотелось бы что б масштабирование картинки №2 было внутри слайдера по ширине всей картинки №2

т.е если мы перейдем по ссылке по картинке №2 то увидим что картинка имеет нормальный полномасштабный вид, ане такой как в слайдере.

именно в этом и вопрос про масштабирование.

спасибо.

 

могу на скринах показать.

[abushyk 694]

могу на скринах показать.

 

Если не затруднит, покажите пожалуйста.

 

было внутри слайдера по ширине всей картинки №2

 

 

Может по высоте?

[@sms 1]

Да , по высоте ))

[TopRaN 235]

Это разные слайдеры, один слайдер другой это галерея

[abushyk 694]

В принципе вариант есть. Он базируется на том, что картинку передаются в этот слайдер не как теги <img>, а как свойство стиля 

style="background-image:url('/img/data/img54fda33a24925_1425908538_2.jpeg');"

После этого к элементу-слайду применяются стили

width: задается;height: задается;background-size: cover;background-position: 50% 50%;

Фиксированные размеры формируют оболочку. А свойство cover и процентное центрирование подгоняет картинку и создает максимальную заполненность.