Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter | Личный кабинет | Карта сайта | RSS ленты
О проекте | Скачать CMS | Видеоуроки | Документация | Плагины | Форум | Идеи | Новости | Веб-мастеру | Контакты

Галерея для YaPRO

Готовые модули и методы расширения функциональности

Галерея для YaPRO

Сообщение Max » 06 окт 2010, 23:40

Попробуем реализовать быстро, а главное качественно галерею для yapro с использованием Google Picasa и загрузки фото/картинок через приложение Picasa3.

Заглянув в будущее посмотрим что получится в итоге:
Альбомы фотографий.
Untitled-1.jpg
1
Untitled-1.jpg (55.04 КБ) Просмотров: 4159

Просмотр альбома.
Untitled-2.jpg
2
Untitled-2.jpg (89.73 КБ) Просмотров: 4159

Любимые эффекты. Используется FancyBox.
Untitled-3.jpg
3
Untitled-3.jpg (64.47 КБ) Просмотров: 4159


Рабочий пример можно посмотреть здесь.
http://childrensun.ru/gallery

Что нам требуется:
1) http://plugins.jquery.com/files/jquery.EmbedPicasaGallery_0.zip стягиваем плагин с сайта jquery по выше указанной ссылке. Распаковываем содержимое к примеру в "yousite.ru/js". Если возникнут вопросы "а почему не в yousite.ru/javascript ?" Таким образом мы избежим мусора в системной папке со скриптами и разделим "котлеты от мух".

2) Открываем для редактирования файл yousite.ru/templates/header.html и подключаем плагин после подключения jquery
Код: Выделить всё
<script type="application/javascript" src="/js/jquery.EmbedPicasaGallery.js"></script>



Далее используем ява скрипт для инициализации плагина
Код: Выделить всё
<script>
jQuery(document).ready(function() {
jQuery("#mygallery").EmbedPicasaGallery('ваше-имя-пользователя-в-google-picasa',{
  matcher:    /./,  // string or regexp matching album title
  size:      '160',  // thumb size (32,48,64,72,144,160))
  msg_loading_list :  'Пожалуйста подождите, идет загрузка',
  msg_back :   '&larr; Вернутся в галерею'
});
});
</script>

Разберем самое важное, size указывает размер миниатюр при просмотре альбома. msg_loading_list текст который будет виден пользователю до полной загрузки галереи. msg_back текст сообщения для возврата к выбору альбомов.

Теперь плагин подключен. Далее есть два варианта вывода галереи на сайте.
Первый вариант:
Создаем новую страницу, с выключенным визуальным редактором пишем
Код: Выделить всё
<div id="#mygallery"></div>

сохраняем

Второй вариант:
Создать отдельный шаблон для вывода галереи. Заранее поясню, что я не стал подключать плагин в header.html, дабы не подгружать скрипт на каждой странице.
Код: Выделить всё
{~header.html~}     

<script type="text/javascript" src="/js/jquery.EmbedPicasaGallery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#pics").EmbedPicasaGallery('childrensun.ru',{
        loading_animation: '/img/ajax-loader.gif',
        matcher:    /./,  // string or regexp matching album title
  size:      '160'  // thumb size (32,48,64,72,144,160))

    })
})
</script>

<div id="sidebar" class="leftnorm">
<div class="leftmenu">
<h1 class="menutitle">Меню</h1>
      <a href="/gallery">Фото</a><br>
      <a href="/video">Видео</a>
   </div>
</div>

<div id="content">

{~breadcrumbs.html~}

<!--MetaData-->
<!--NoReplace--><h1 class="titlegallery">{~$this-> data('name')~}</h1><!--/NoReplace-->
{~$this-> data('article')~}
<div id="pics"></div><!-- Тут выводится галерея -->
<!--/MetaData-->
   
</div>
{~bottom.html~}
{~footer.html~}


Потом в админке создаем страницу "галерея" и выбираем созданный шаблон для вывода альбомов из Picasa.

3) Подключаем fancybox, удаляем slimbox.
Открываем jquery.EmbedPicasaGallery.js и в 291 строке ищем slimbox с последующей заменой на fancybox.
Получилось так:
Код: Выделить всё
function renderAlbum(data){
                $.each(data.feed.entry,appendImage);

                if ($.fn.fancybox){
                    $('a',$album).fancybox({
                        'transitionIn'        : 'elastic',
                        'transitionOut'        : 'elastic',
                        'titleShow'        : false,
                        'padding'        : 0
                    },meta_opts.link_mapper);
                }
                if (meta_opts.thumb_callback){
                    $('a',$album).each(meta_opts.thumb_callback);
                }
                Cache[album] = $album;
            }


В header.html добавляем в конец подключения скриптов следующие строки.
Код: Выделить всё
<link rel="stylesheet" href="/javascript/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="/javascript/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script language="javascript" type="text/javascript" src="/javascript/jquery.mousewheel.js"></script>

Скрипта mousewheel по умолчанию нет по указанному пути. Я взял его из официального пакета http://fancybox.googlecode.com/files/jq ... -1.3.1.zip.

Скрипт подключили, далее инициализируем его для всех ссылок указывающие на картинки формата jpg,gif,png.
Так же, это то объединит их в общую группу, чтобы перелистывать картинки колесом мыши.
Код: Выделить всё
   <script type="text/javascript">
      $(document).ready(function() {
         $("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox({
            'transitionIn'      : 'elastic',
            'transitionOut'      : 'elastic',
            'titleShow'      : false,
            'padding'      : 0
         });
      });
   </script>


P.S. - Пища для размышлений. Сделать в YaPRO CMS 1 input для указания ввода логина пользователя или в tinymce кнопку добавляющую галерею на страницу.
P.S.S. - jquery picasa gallery может выводить не только все альбомы но и отдельно взятый альбом.
Говорят, что персональный компьютер - это такая жуткая черная дыра, куда сначала проваливаются деньги, потом время, а потом - сам хозяин этих денег и времени.
Аватара пользователя
Max
Знаток
 
Сообщения: 65
Зарегистрирован: 20 сен 2010, 23:34
Откуда: Киров

Re: Галерея для YaPRO

Сообщение Admin » 09 окт 2010, 19:03

Классно написано, все подробно и понятно, однако некоторые моменты можно было бы упростить, например сверху выложить архив, в котором будут:

1. все CSS и JavaScript-ы (EmbedPicasaGallery.js, fancybox.js, fancybox.css и mousewheel.js)

2. примитивный шаблон для страницы с галереей (например Picasa.html), в котором уже прописан код с примером подключения

Фактически, пользователю должно быть сказано, распаковать архив в определенной директории сайта, в админке создать страницу сайта и выбрать для нее шаблон Picasa.html, в этом шаблоне прописать "имя-пользователя-в-google-picasa", готово. Для тех, у кого нет "имя-пользователя-в-google-picasa", можно зарегистрировать тут >

Конечно, все эти действия требуют подготовки, но многие будут благодарны такому упразднению процесса.

p.s. то, что написано выше не стоит удалять, это отличный ман для обновления под новые версии Picasa.
YaPro - мы делаем мир удобнее
Аватара пользователя
Admin
Администратор
 
Сообщения: 477
Зарегистрирован: 15 фев 2008, 21:36
Откуда: Москва

Re: Галерея для YaPRO

Сообщение Max » 09 окт 2010, 19:08

Виноват. Исправлюсь. Выкладываю готовый архив.
1. все CSS и JavaScript-ы (EmbedPicasaGallery.js, fancybox.js, fancybox.css и mousewheel.js)

fancybox уже идет в комплекте с cms
2. примитивный шаблон для страницы с галереей (например Picasa.html), в котором уже прописан код с примером подключения

Шаблон сделан на основе стандартного
---
Максимальное кол-во вложений три поэтому в первое сообщение прикрепить не удалось.
pack.ZIP
(19.25 КБ) Скачиваний: 334
Говорят, что персональный компьютер - это такая жуткая черная дыра, куда сначала проваливаются деньги, потом время, а потом - сам хозяин этих денег и времени.
Аватара пользователя
Max
Знаток
 
Сообщения: 65
Зарегистрирован: 20 сен 2010, 23:34
Откуда: Киров

Re: Галерея для YaPRO

Сообщение SkarIra » 18 мар 2011, 13:51

в последнем архиве скрипт jquery.EmbedPicasaGallery.js не срабатывает в IE, нужно его заменить хотя бы на этот, что во вложении
Вложения
jquery.EmbedPicasaGallery.zip
(3.46 КБ) Скачиваний: 278
SkarIra
Интересующийся
 
Сообщения: 4
Зарегистрирован: 16 ноя 2010, 18:22


Вернуться в Плагины и расширения

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron