Дмитрий Кондин

Добавляем плагин fotorama в realia

Recommended Posts

В 16.07.2016 в 16:46, doma сказал:

и разработчикам, если можно ответить на вопрос на счет куда грамотнее ставить скрипт исполнения фотораммы в саму реалити вью и в саму tpl новостей, или все же стоит грамотно запихнуть в header ?

Лучше в realty_view.tpl

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


Ссылка на сообщение
Поделиться на других сайтах
В 16.07.2016 в 13:46, doma сказал:

Если порадуете tpl файлом новостей в личку, попробуем посмотреть что улучшили и как реализовали, 

Расскажу принцип.

1. В редакторе форм добавил два поля для NEWS - slides и slidecount. У меня slides - это подкаталог в /img/foto/, где лежат соответствующие слайды (например, "001"), а slidecount - количество слайдов. Т.е. все слайды должны быть пронумерованы по порядку 1.jpg, 2.jpg ... X.jpg

2. В news_view.tpl сначала проверяем условие наличия слайдов и при необходимости подключаем фотораму (которая лежит на моём же хостинге в папке /plugins/):

{if $news.slides.value != ''}
<link  href="/plugins/fotorama.css" rel="stylesheet">
<script src="/plugins/fotorama.js"></script>
{/if}

3. Ну а дальше заменяем в том же шаблоне место вывода картинки новости на условие:

{if $news.slides.value == ''}
<img src="{$news.normal_img}" width="80%" alt="" title="" align="center" style="float: none; margin-bottom:15px" />
{else}
<center>
<div class="fotorama" data-nav="thumbs" data-loop="true" data-keyboard="true" data-maxheight="600" data-allowfullscreen="true"   data-width="100%" data-ratio="800/600" data-minwidth="300" data-minheight="200">
<img src="{$news.normal_img}" alt="" title="">
{section name=j loop=$news.slidecount.value}
<img src="{$estate_folder}/img/foto/{$news.slides.value}/{$smarty.section.j.index+1}.jpg" alt="" title="">
{/section}
</div>
</center>
{/if}

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

Также по примерно такому принципу у меня устроены и видео-новости (но их, кстати, можно реализовать и через ту же фотораму, просто на неё я наткнулся позже, чем сделал видео).

 

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


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

это интересный конечно подход -но "самоделка" не гарантирует правильную работу как мы понимаем если файлы не называть 1.jpg 2.jpg 3.jpg и тд -сейчас у нас стоит загрузчик на фото в новости, но если в него загрузить 2-5-8 фоток -все равно выводится только 1шт. то есть по факту если в новости вставлять фото то приходится просто вставлять как в текстовом файле, а это не очень красиво и не очень хорошо. Так как к примеру в новости будет 8 фото они будут большие и идти будут сверху вниз -следовательно страницу приходится очень долго и очень часто скроллить вниз, хотя если бы ту же фотораму применить то все будет на одной странице что гороздо приятнее и удобнее
Если разработчики предложат решение-будет совсем замечательно
 

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


Ссылка на сообщение
Поделиться на других сайтах
В 04.07.2016 в 21:56, metrpro сказал:

Так. Опытном путем было выяснено еще кое-что. В случае, если первая была малой высоты (например, альбомной ориентации), а следующие фотографии высокие (т.е. портретные), то по причине того, что плагин изначально зарезервировал высоту блока под маловысотную фотографию, портретные сильно уменьшаются в своем масштабе.

Чтобы этого избежать, в обеих строчках фоторамы надобно в конце div добавить следующее:


data-width="100%" data-ratio="800/600" data-minwidth="300" data-minheight="200"

И будет зер гуд. Результаты можете у меня посмотреть.

Туплю что то куда это пристроить(

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


Ссылка на сообщение
Поделиться на других сайтах
В 21.10.2016 в 01:12, Александр Лубянский сказал:

Туплю что то куда это пристроить(

Копируем плагин к себе на серввер (далее по тексту у меня в папке /fotorama/...), это чтобы не тянуть его со стороннего сервера, как изначально предлагает разработчик плагина в своем коде.

в realty_view.tpl, в начале кода шаблона вставляем основной код фоторамы:

<link  href="{$estate_folder}/fotorama/fotorama.css" rel="stylesheet">
<script src="{$estate_folder}/fotorama/fotorama.js"></script>

а затем, под заголовком объекта, прописываем его вторую часть:

<center>
    {if $photo|count>0}
    <div class="fotorama" data-nav="thumbs" data-loop="true" data-keyboard="true" data-maxheight="600" data-allowfullscreen="true" data-width="100%" data-ratio="800/600" data-minwidth="300" data-minheight="200">
      <img src="{$estate_folder}/img/data/{$photo[0].normal}">
      {section name=j loop=$photo}
      {if $smarty.section.j.index > 0}
      <img src="{$estate_folder}/img/data/{$photo[j].normal}">
      {/if}
      {/section}
    </div>
    {else}
    <div class="fotorama" data-maxheight="600">
      <img src="{$estate_folder}/img/no_foto.png">
    </div>
    {/if}
  </center>

 

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


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, Александр Лубянский сказал:

Да, да!

Все верно! Отлично работает! Но плагин к себе перенес

Рекомендую еще обернуть место подключения скриптов условием проверки количества фото - если фотографий меньше двух, то не надо вообще эти скрипты загружать:

{if $photo|count>1}

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


Ссылка на сообщение
Поделиться на других сайтах
Только что, metrpro сказал:

Рекомендую еще обернуть место подключения скриптов условием проверки количества фото - если фотографий меньше двух, то не надо вообще эти скрипты загружать:

{if $photo|count>1}

Бывает что фото только одно!

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


Ссылка на сообщение
Поделиться на других сайтах
3 минуты назад, metrpro сказал:

Рекомендую еще обернуть место подключения скриптов условием проверки количества фото - если фотографий меньше двух, то не надо вообще эти скрипты загружать:

{if $photo|count>1}

Так я эти скрипты сразу себе на сервер кинул, чтобы не тянуть их со стороны :

<link  href="{$estate_folder}/fotorama/fotorama.css" rel="stylesheet">
<script src="{$estate_folder}/fotorama/fotorama.js"></script>

а посему без разницы, сколько фото показывать :) В любом случае у меня на сайте одним фото дело не обходится.

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


Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, Chernetskiy сказал:

а посему без разницы, сколько фото показывать :) В любом случае у меня на сайте одним фото дело не обходится

Короче. Если фото 1шт или 0шт, то я не загружаю скрипты, не перегружаю страницу. Разметку вывода самих картинок трогать не нужно при этом.

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


Ссылка на сообщение
Поделиться на других сайтах
В 21.10.2016 в 13:57, metrpro сказал:

Короче. Если фото 1шт или 0шт, то я не загружаю скрипты, не перегружаю страницу. Разметку вывода самих картинок трогать не нужно при этом.

Настолько рациональное замечание, что я бы его даже жирным выделил. Абсолютно серьезно.

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


Ссылка на сообщение
Поделиться на других сайтах
27 минут назад, abushyk сказал:

Настолько рациональное замечание, что я бы его даже жирным выделил. Абсолютно серьезно.

то есть в реалити вью надо поставить так?

если всего 1 фотка
то сразу вывести 1 фотку 
иначе если фоток больше 1
вывести все фото
конец

в реалити вью не нашли что то запуск скрипта, или его надо править в хеадер?

сейчас так написано у  нас в реалити вью  -сокращенно

    {if $photo|count>0}
                {section name=j loop=$photo}
                    {if $smarty.section.j.index > 0}
вывод картинок
                    {/if}
                {/section}
        </div>

то есть фактически если фоток больше 1 запускается перечисление от 1доN
а где скрипт править?

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


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

логика в принципе общая

{if $photo|count==0}
тут выводим заглушку так как фото нет или ничего не выводим (смотрим по дизайну)
{elseif $photo|count==1}
тут выводим одно фото без слайдеров, может с всплывашкой-увеличашкой или без нее
либо объединяем со следующим условием
{else}
тут выводим нормальный вывод фоток, включаем нужные библиотеки (если они не используются в других местах ще!!!!), тут же можно разместить вызывающий код , который обслуживает плагин
{/if}

скрипт править не нужно. по крайней мере я пока не вижу зачем его править и какой.

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


Ссылка на сообщение
Поделиться на других сайтах
В 04.07.2016 в 21:56, metrpro сказал:

Так. Опытном путем было выяснено еще кое-что. В случае, если первая была малой высоты (например, альбомной ориентации), а следующие фотографии высокие (т.е. портретные), то по причине того, что плагин изначально зарезервировал высоту блока под маловысотную фотографию, портретные сильно уменьшаются в своем масштабе.

Чтобы этого избежать, в обеих строчках фоторамы надобно в конце div добавить следующее:


data-width="100%" data-ratio="800/600" data-minwidth="300" data-minheight="200"

И будет зер гуд. Результаты можете у меня посмотреть.

Есть еще вариант, прописать  

<div class="fotorama" data-fit="cover">

и тогда вертикальные фото будут верху и снизу будут обрезаться до пропорций горизонтальной и заполнять собой размер окна фоторамы. Там по этому поводу есть следующие настройки:

'contain' Default
Изображение растягивается на ширину окна

'cover'
Изображение растягивается и обрезается в размер окна

'scaledown'
Большое изображение сжимается в размер окна без изменения пропорций

'none'
Изображение показывается как есть, вписываясь в окно (возможна обрезка вертикальных изображений, если крупнее окна).

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


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

Господа столкнулся с проблемой, фоторама "режет" мобильную версию(респонсив).

Пытались победить проблему с Константином, но не вышло, может кому то удалось.

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


Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, Pavel88 сказал:

Господа столкнулся с проблемой, фоторама "режет" мобильную версию(респонсив).

Пытались победить проблему с Константином, но не вышло, может кому то удалось.

Каким образом режет? когда открывается в полноэкранном размере? 

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


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, TopRaN сказал:

Каким образом режет? когда открывается в полноэкранном размере? 

Открываю мобильную версию, вся страница остается ровно как и с prettyPhoto, но сама Фоторама расползается направо:

7326d68ed62d48909ca271feb957d749.png

 

Потом раздвигаю пальцами до максимальных размеров и получаю вот это:

a7bcae6953a44c8399d4da01aa697c31.png

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


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

Попробуйте добавить это 

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">

Я отказался от использования фоторамы и перешел на этот плагин https://github.com/bqworks/slider-pro

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


Ссылка на сообщение
Поделиться на других сайтах
15 минут назад, TopRaN сказал:

Попробуйте добавить это 


<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">

Я отказался от использования фоторамы и перешел на этот плагин https://github.com/bqworks/slider-pro

Скажите пожалуйста в какую часть кода добавлять?

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


Ссылка на сообщение
Поделиться на других сайтах
Только что, TopRaN сказал:

Попробуйте добавить это 


<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">

Я отказался от использования фоторамы и перешел на этот плагин https://github.com/bqworks/slider-pro

а покажите на каком сайте используете  посмотрим в чем преимущество и чем лучше и интереснее, можно сайт в личку. спасибо

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

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

    • Автор: axilec
      Добрый день! Не подскажете, как можно добавить ссылку или кнопку в описании к объекту недвижимости? Спасибо!
    • Автор: Opossum_Shultz
      Добрый день! подскажите, в шаблоне реалиа не реализовано каким - нибудь css или чем - нибудь развертывание и свертывание текста (например, для описаний ЖК)?
      Ну типа спойлер.
       
    • Автор: metrpro
      Добрый день! Шаблон realia, стоит необходимость изменить оформление добавления/убавления из списка "Избранное".
      Нынешнее решение выглядит следующим образом:
      {if isset($smarty.session.favorites)} {if in_array($data.id.value, $smarty.session.favorites)}<a class="fav-rem" alt="{$data.id.value}" title="{$L_DELETEFROMFAVORITES}" href="#remove_from_favorites"></a> {else}<a class="fav-add" alt="{$data.id.value}" title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if} {else}<a class="fav-add" alt="{$data.id.value}" title="{$L_ADDTOFAVORITES}" href="#add_to_favorites"></a> {/if} А мне бы хотелось уйти от картинок, предусмотренных стилем, чтобы выглядеть это стало как обычная кнопка, типа тех, что вызывают в шаблоне модальные окна.
      Буду рад, если кто сможет поделиться подобными наработками (у меня не вышло)
       
    • Автор: IgorGavr
      В списках объектах есть строчка:
      <div class="property span9{if $grid_items.bold_status==1} grid_list_bold{/if}{if $grid_items.premium_status==1} grid_list_premium{/if}{if $grid_items.vip_status==1} grid_list_vip{/if}">
      Но в независимости выбрано выделение или премиум объявление, проверка не проходит. Как мы можем брать деньги если никаких выделений не происходит после оплаты?
    • Автор: metrpro
      В таблицу STREET, содержащую список улиц и по умолчанию имеющую поля STREET_ID, CITY_ID и NAME, добавлено поле DISTRICT_ID (типа select_by_query), которое позволяет четко каждой улице определить район, к которому она относится, из таблицы DISTRICT_ID.
      Внимание, вопрос №1: как передать текстовое значение поля district_id в шаблоны realty_view и realty_grid (realia)?

      В таблице DISTRICT добавлено поле OKRUG типа safe_string. Вопрос №2 - как его значение тоже передать в те же шаблоны?

      И, наконец, вопрос №3 - как организовать поиск всех объявлений определенного типа в рамках улиц, расположенных в определенном районе или определенном округе?