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

Дмитрий Кондин · June 7, 2016

В 04.06.2016 в 02:20, Novichok сказал:

Пожалуйста подскажите как его заюзать в шаблон реалия!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Установка тут

http://fotorama.io/set-up/

В realty_view.tpl добавьте такой код

<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

А вот так нужно поменять вывод фоток

Ищем такой код

               {if $photo|count>0}
                <div class="carousel property" id="cproperty_gal">
                    <div class="preview">
                        <a rel="prettyPhoto[gallery1]" href="{$estate_folder}/img/data/{$photo[0].normal}" class="lbgallery" title="Фото" ><img src="{$estate_folder}/img/data/{$photo[0].normal}" alt=""></a>
                    </div>
                    {if $photo|count>1}
                    <div class="content">
                        <a class="carousel-prev" href="#">Previous</a>
                        <a class="carousel-next" href="#">Next</a>
                        <ul>
                        {section name=j loop=$photo}
                        {if $smarty.section.j.index > 0}
                        <li>
                          <a rel="prettyPhoto[gallery1]" href="{$estate_folder}/img/data/{$photo[j].normal}"><img src="{$estate_folder}/img/data/{$photo[j].normal}" /></a>
                        </li>
                        {/if}
                        {/section}
                        </ul>
                    </div>
                    {/if}
                </div>
                {/if}

Меняем на такой

{if $photo|count>0}
<div class="fotorama">
<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>
{/if}

DoobBY · June 7, 2016

5 часов назад, rumantic сказал:

Установка тут

http://fotorama.io/set-up/

Доброго времени суток, подскажите, а сложно его всунуть в стандартный шаблон:?

Дмитрий Кондин · June 8, 2016

19 часов назад, DoobBY сказал:

Доброго времени суток, подскажите, а сложно его всунуть в стандартный шаблон:?

Совсем не сложно, действия такие же как и для любого шаблона.

Novichok · June 8, 2016

3 часа назад, rumantic сказал:

Совсем не сложно, действия такие же как и для любого шаблона.

А как такой вариант настроить? http://fotorama.io/customize/autoplay/ пробовал - все плывет!

Novichok · June 8, 2016

3 часа назад, rumantic сказал:

Совсем не сложно, действия такие же как и для любого шаблона.

Или вот вариант неплохой http://johnpatrickgiven.com/jquery/Image-Scale-Carousel/ как вставить?

Novichok · June 8, 2016

В 07.06.2016 в 11:07, rumantic сказал:

Установка тут

http://fotorama.io/set-up/

В realty_view.tpl добавьте такой код


<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

А вот так нужно поменять вывод фоток

Ищем такой код


               {if $photo|count>0}
                <div class="carousel property" id="cproperty_gal">
                    <div class="preview">
                        <a rel="prettyPhoto[gallery1]" href="{$estate_folder}/img/data/{$photo[0].normal}" class="lbgallery" title="Фото" ><img src="{$estate_folder}/img/data/{$photo[0].normal}" alt=""></a>
                    </div>
                    {if $photo|count>1}
                    <div class="content">
                        <a class="carousel-prev" href="#">Previous</a>
                        <a class="carousel-next" href="#">Next</a>
                        <ul>
                        {section name=j loop=$photo}
                        {if $smarty.section.j.index > 0}
                        <li>
                          <a rel="prettyPhoto[gallery1]" href="{$estate_folder}/img/data/{$photo[j].normal}"><img src="{$estate_folder}/img/data/{$photo[j].normal}" /></a>
                        </li>
                        {/if}
                        {/section}
                        </ul>
                    </div>
                    {/if}
                </div>
                {/if}

Меняем на такой


{if $photo|count>0}
<div class="fotorama">
<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>
{/if}

Вставил слайдер - пропала карта в объекте!

TopRaN · June 8, 2016

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

Вставил слайдер - пропала карта в объекте!

Скорее всего что-то удалили

Дмитрий Кондин · June 9, 2016

16 часов назад, Novichok сказал:

Вставил слайдер - пропала карта в объекте!

Если что-то пропало, смотрите какие ошибки есть https://learn.javascript.ru/debugging-chrome

Или пишите адрес сайта, чтобы люди могли зайти и посмотреть эти ошибки.

DoobBY · June 9, 2016

6 часов назад, rumantic сказал:

Если что-то пропало, смотрите какие ошибки есть https://learn.javascript.ru/debugging-chrome

Или пишите адрес сайта, чтобы люди могли зайти и посмотреть эти ошибки.

Такая же петрушка.

Ничего не трогал лишнего, от иф до иф =) + вылез опять блок (2я картинка).

Сайт doob.by

Ошибок не нашёл, подскажите, как быть?

*Получается скрипт как-то душит карту =) и сбивает поля немного. Я всё вернул назад, потом, просто добавил скрипт и карта вылетела.

Изменено June 9, 2016 пользователем DoobBY

Дмитрий Кондин · June 10, 2016

17 часов назад, DoobBY сказал:

Такая же петрушка.

Ничего не трогал лишнего, от иф до иф =) + вылез опять блок (2я картинка).

Сайт doob.by

Ошибок не нашёл, подскажите, как быть?

*Получается скрипт как-то душит карту =) и сбивает поля немного. Я всё вернул назад, потом, просто добавил скрипт и карта вылетела.

Тогда на фриланс http://www.etown.ru/s/forum/21-фриланс/

Chernetskiy · June 10, 2016

Что-то сайт http://fotorama.io второй день недоступен, хотел посмотреть там настройки, но в ответ тишина.

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

dima · June 11, 2016

можно мне также красиво сделать у меня на сайте

TopRaN · June 11, 2016

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

DoobBY · June 29, 2016

Подскажите, может у кого-то получилось вставить?

Я как не пытался, пропадает карта гугла и всё =(

TopRaN · June 29, 2016

у меня получалось,

Chernetskiy · June 29, 2016

8 часов назад, DoobBY сказал:

Подскажите, может у кого-то получилось вставить?

Я как не пытался, пропадает карта гугла и всё =(

А смысл хрен на хрен менять - только время терять.

DoobBY · June 29, 2016

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

А смысл хрен на хрен менять - только время терять.

У меня стандартный шаблон =) Было бы лучше, со слайдером

metrpro · June 30, 2016

Плагин отменный, встает без проблем, но Дима не раскрыл топик до конца:

1. Вверх realty_view ставьте только две строчки кода:

<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

Ссылку на jquery.min.js ставить не надо во избежание конфликта между системной версией и новой! Для работы плагина нужна его версия не меньше 1.8, в sitebill уже стоит 1.10.

Более того, я бы рекомендовал скачать представленный на сайте разработчика плагина комплект файлов и разместить их на своем сервере - лично я так и сделал, ни к чему обращение на сторону, мало ли чего.

2. В месте вывода картинок в realia_view ставим код:

<center>
{if $photo|count>0}
<div class="fotorama" data-nav="thumbs" data-loop="true" data-keyboard="true" data-maxheight="600" data-allowfullscreen="true">
<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>
{/if}
</center>

Это редакция кода с фото по центру, с превьюшками, с возможностью вывода на весь экран, ограниченная по максимальной высоте до 600пкс, цикличная, с подключенным управлением стрелками влево и вправо.

3. Чистим старый код

Далее, чтобы не перегружать систему, убираем старый prettyphoto из realty_view:

<script>
$(document).ready(function(){
    if($('.carousel.property .content ul').length>0){
        $('.carousel.property .content ul').carouFredSel({
            scroll: {
                items: 1
            },
            auto: false,
            next: {
                button: '.carousel.property .content .carousel-next',
                key: 'right'
            },
            prev: {
                button: '.carousel.property .content .carousel-prev',
                key: 'left'
            }
        });
        $('.carousel.property ul li:first').addClass('active');
    }
});
</script>

И пару мест из header:

<link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/prettyPhoto.css">

и

<script src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
  social_tools: false,
  theme: 'light_square'});
});
</script>

А так за плагин спасибо, мне очень понравилось, лучше чем prettyphoto и шустрее!

Тестировал на шаблоне Realia, постараюсь на днях оттестить на Estetico

UPD: Estetico тоже встает без проблем!

DoobBY · June 30, 2016

6 часов назад, metrpro сказал:

И пару мест из header:


<link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/prettyPhoto.css">


<script src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
  social_tools: false,
  theme: 'light_square'});
});
</script>

Спасибо, получилось очень понятно и доходчиво =)) Можете подсказать, как вставить картинку если у объекта нет фото?

Пробовал дописать

{else}
<img src="{$estate_folder}/img/no_foto.png" />

но тогда бок сайта слетает в сторону =(

+ вопрос разработчикам - подскажите, какие скрипты чистить в стандартном шаблоне?

Спасибо.

metrpro · June 30, 2016

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

Можете подсказать, как вставить картинку если у объекта нет фото?

<center>
{if $photo|count>0}
<div class="fotorama" data-nav="thumbs" data-loop="true" data-keyboard="true" data-maxheight="600" data-allowfullscreen="true">
<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>

metrpro · July 4, 2016

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

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

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

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

doma · July 4, 2016

а как работает индексация картинок при дефлтном просматривальщике или при фоторамме?

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

и как обрабатывают роботы например при фоторамме-так как все картинки на странице как бы по факту сверху вниз идут

doma · July 15, 2016

В 30 июня 2016 г. в 06:27, metrpro сказал:
Плагин отменный, встает без проблем, но Дима не раскрыл топик до конца:

1. Вверх realty_view ставьте только две строчки кода:
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
Ссылку на jquery.min.js ставить не надо во избежание конфликта между системной версией и новой! Для работы плагина нужна его версия не меньше 1.8, в sitebill уже стоит 1.10.

Более того, я бы рекомендовал скачать представленный на сайте разработчика плагина комплект файлов и разместить их на своем сервере - лично я так и сделал, ни к чему обращение на сторону, мало ли чего.

2. В месте вывода картинок в realia_view ставим код:
<center>
{if $photo|count>0}
<div class="fotorama" data-nav="thumbs" data-loop="true" data-keyboard="true" data-maxheight="600" data-allowfullscreen="true">
<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>
{/if}
</center>
Это редакция кода с фото по центру, с превьюшками, с возможностью вывода на весь экран, ограниченная по максимальной высоте до 600пкс, цикличная, с подключенным управлением стрелками влево и вправо.

3. Чистим старый код

Далее, чтобы не перегружать систему, убираем старый prettyphoto из realty_view:
<script>
$(document).ready(function(){
    if($('.carousel.property .content ul').length>0){
        $('.carousel.property .content ul').carouFredSel({
            scroll: {
                items: 1
            },
            auto: false,
            next: {
                button: '.carousel.property .content .carousel-next',
                key: 'right'
            },
            prev: {
                button: '.carousel.property .content .carousel-prev',
                key: 'left'
            }
        });
        $('.carousel.property ul li:first').addClass('active');
    }
});
</script>
И пару мест из header:
<link rel="stylesheet" href="{$estate_folder}/template/frontend/{$current_theme_name}/css/prettyPhoto.css">
и
<script src="{$estate_folder}/template/frontend/{$current_theme_name}/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
  social_tools: false,
  theme: 'light_square'});
});
</script>
А так за плагин спасибо, мне очень понравилось, лучше чем prettyphoto и шустрее!

Тестировал на шаблоне Realia, постараюсь на днях оттестить на Estetico

UPD: Estetico тоже встает без проблем!

подскажите а как стали у вас индексироваться картинки с новым просматривальщиком? так как старый например как бы открывался в новом окне, а вот фоторама как бы на той же странице просто листинг,

А что на счет это скажут разработчики?

и еще вопрос вы пишите что нужно почистить код от преттифото в реалити вью а так же в хеадер - и как тогда быть и понимать следующее

к примеру в реалити вью стоит преттифото -скрипт написан в хеадер и в реалити вью,
а вот для фотораммы уже скрипт стоит только в реалити вью

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

metrpro · July 16, 2016

6 часов назад, doma сказал:

подскажите а как стали у вас индексироваться картинки с новым просматривальщиком? так как старый например как бы открывался в новом окне, а вот фоторама как бы на той же странице просто листинг,

Все картинки вставляются как стандартный img, красота их отображения - хоть фоторамой, хоть преттифотой - обеспечивается, по сути, css. Поэтому на индексацию это не повлияет, если, конечно, каждой фотографии прописать свои альты и титлы уникальные. И фоторама к тому же не портит адресную строчку своими #prettyphoto - у меня они в индексе иной раз мелькали.

Более того - почему вот мне понравилась фоторама - я на её основе сделал для раздела новостей возможность слайд-шоу (пример).

doma · July 16, 2016

4 часа назад, metrpro сказал:

Все картинки вставляются как стандартный img, красота их отображения - хоть фоторамой, хоть преттифотой - обеспечивается, по сути, css. Поэтому на индексацию это не повлияет, если, конечно, каждой фотографии прописать свои альты и титлы уникальные. И фоторама к тому же не портит адресную строчку своими #prettyphoto - у меня они в индексе иной раз мелькали.

Более того - почему вот мне понравилась фоторама - я на её основе сделал для раздела новостей возможность слайд-шоу (пример).

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

Если порадуете tpl файлом новостей в личку, попробуем посмотреть что улучшили и как реализовали,
+ как именно вставили и реализовали вставку многих фоток именно в новости, так как в стандартном решении там вроде только фото вставляется для новостей, превью, и самого текста, следовательно нужно создать в data-NEWS ПОЛЕ в котором поставить загрузчик фото? таким образом в новости появится как бы 1 массив фоток, а потом просто в tpl через css вывести их как в вашем примере -что более привлекательнее и не надо много листать вверх.

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

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

Recommended Posts

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

Ссылка на сообщение

Поделиться на других сайтах

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

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

Войти