Victor_winner

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

Recommended Posts

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

Нужны две доработки слайдера (тема 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 объявления всегда будут одними из первых и уж точно не выпадут из слайдера.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

Dorabotka_slaidera_Tekhnycheskye_voprosy

 

 

 

/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'});

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Я изменил выделенную строку на параметры

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

2. шаблон?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

спасибо.

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

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

 

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

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: Шамиль
      Появилась необходимость вставить с слайдер на главной в шаблоне Realia обычных картинок (баннеров), но не ясно где это можно реализовать, или есть какое то другое готовое решения для организации слайдера каусели на главной?
    • Автор: Макс
      Добрый день, удалил случайно эти кнопки " пред" " след", когда фото объявления листаешь в слайдере.
      Как вернуть подскажите? Что куда добавить чтобы они появились?
    • Автор: TopRaN
      Новый слайдер специальных предложений. Гибкий, легко настраиваемый. По вопросам приобретения обращайтесь
      http://metrocity.sitebill.ru/
    • Автор: Victor_winner
      здравствуйте. Я добавляю в шаблоне realty второй слайдер. 
      Беру файл ...\template\frontend\realty\main.tpl  и в div, где выводится слайдер добавляю второй вывод слайдера. 
       
      было
      ...............
                   <div id="zt-padding" class="clearfix"> <div id="zt-userwrap3" class="clearfix"> </div> {if $is_account==1 || $hide_advelements==1} {else} <div id="zt-userwrap4" class="clearfix"> <div id="zt-user1" class="zt-user zt-box-full" style="width: 100;"> {include file="slider.tpl.html"} </div> </div> {/if} {if $main_file_tpl == 'realty_view.tpl'} {include file="content_full.tpl.html"} {else} {include file="content.tpl.html"} {/if} ...............  
       
      стало 
      <div id="zt-padding" class="clearfix"> <div id="zt-userwrap3" class="clearfix"> </div> {if $is_account==1 || $hide_advelements==1} {else} <div id="zt-userwrap4" class="clearfix"> <div id="zt-user1" class="zt-user zt-box-full" style="width: 100;"> {include file="slider.tpl.html"} </div> </div> <!-- VICTOR 1 --> <div id="zt-userwrap4" class="clearfix"> <div id="zt-user1" class="zt-user zt-box-full" style="width: 100;"> {include file="slider.tpl.html"} </div> </div> <!-- VICTOR 1 --> {/if} {if $main_file_tpl == 'realty_view.tpl'} {include file="content_full.tpl.html"} {else} {include file="content.tpl.html"} {/if}  Сталкиваюсь вот с какой проблемой
      1. У меня слайдер пока в принципе не появляется (даже если оставлять исходный вариант, который был). Правда у меня объявления в базе только  без фотографий, может поэтому не выводит? Замечание: при загрузке страницы, слайдер выводится, но потом происходит видимо какая-то проверка, и он вылетает. 
      2. При добавлении второго слайдера (вариант стало) появляется единственный слайдер, который не работает и ничего не показывает. 
       
       
      2. 


    • Автор: Victor_winner
      Добрый день.

      В шаблоне realty необходимо сделать следующие доработки:

      1. Сделать два слайдера (один под другим)

      2. Оба слайдера должны показывать по 3 объекта за раз (вместо двух).

      3. Слайдеры должны иметь источниками две разных базы объявлений (1. база - город 2 - город M).

      Подскажите пожалуйста, какие именно файлы нужно править (в шаблоне realty, в самом скрипте).