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

[Дмитрий Кондин 690]

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

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

Лучше в realty_view.tpl

[metrpro 42]

В 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.

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

 

[doma 22]

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

[metrpro 42]

Я не настаиваю

[Александр Лубянский 5]

В 04.07.2016 в 21:56, metrpro сказал:

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

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

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

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

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

[Chernetskiy 469]

В 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>

 

[Александр Лубянский 5]

Да, да!

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

[metrpro 42]

1 час назад, Александр Лубянский сказал:

Да, да!

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

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

{if $photo|count>1}

[Александр Лубянский 5]

Только что, metrpro сказал:

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

{if $photo|count>1}

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

[Chernetskiy 469]

3 минуты назад, metrpro сказал:

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

{if $photo|count>1}

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

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

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

[metrpro 42]

9 минут назад, Chernetskiy сказал:

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

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

[abushyk 694]

В 21.10.2016 в 13:57, metrpro сказал:

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

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

[doma 22]

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
а где скрипт править?

[abushyk 694]

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

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

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

[Chernetskiy 469]

Добавил в div class="fotorama" data-autoplay="true"... пусть фотки сами прокручиваются.

[Chernetskiy 469]

В 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'
Изображение показывается как есть, вписываясь в окно (возможна обрезка вертикальных изображений, если крупнее окна).

[Pavel88 7]

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

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

[TopRaN 235]

9 минут назад, Pavel88 сказал:

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

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

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

[Pavel88 7]

1 час назад, TopRaN сказал:

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

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

 

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

[TopRaN 235]

адрес сайта пришлите

[Pavel88 7]

2 минуты назад, TopRaN сказал:

адрес сайта пришлите

Пожалуйста

[TopRaN 235]

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

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

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

[Pavel88 7]

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

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

[doma 22]

Только что, 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

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

[Realtor 47]

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