1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Highslide image attachments (pop-up вместо нового окна)

Тема в разделе "Модификации шаблонов", создана пользователем Romchik®, 29 ноя 2010.

Загрузка
  1. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Данная модификация заменяет открытие картинок с LightBox на Highslide.

    За справкой для работы с Highslide обращаться сюда.

    Тема на оф. форуме:
    Код:
    http://xenforo.com/community/threads/5192/
    Автор: calorie

    100% работает на XenForo 1.1.0 beta 2.
    Обновлено 09.10.2011 для XF 1.1.0 beta 2.
    1. Идем на официальный сайт Highslide и качаем последнюю версию скрипта (на данный момент это 4.1.13).
    2. Распаковываем архив на компьютере и находим там папку highslide.
    3. На сервере в папке /ваш_форум/js/ создаем папку highslide и заливаем туда, из только что распакованной папки highslideна компьютере, следующие файлы:
      • /graphics and its contents
      • highslide-ie6.css
      • highslide-with-gallery.js
      • highslide.css
      Если вы сделали все верно, то папка будет выглядеть примерно как на скриншоте.
      ftp_highslide.gif
      Если вы зальете все файлы, ничего страшного. Но они не нужны.
    4. Открываем шаблон page_container_js_head и добавляем в самый конец следующий код:
      Код:
      <script src="js/highslide/highslide-with-gallery.js"></script>
      <link rel="stylesheet" type="text/css" href="js/highslide/highslide.css" />
      <!--[if lt IE 7]>
      <link rel="stylesheet" type="text/css" href="js/highslide/highslide-ie6.css" />
      <![endif]-->
      <script>
          hs.graphicsDir = 'js/highslide/graphics/';
          hs.align = 'center';
          hs.transitions = ['expand', 'crossfade'];
          hs.fadeInOut = true;
          hs.dimmingOpacity = 0.8;
          hs.outlineType = 'rounded-white';
          hs.captionEval = 'this.thumb.alt';
          hs.marginBottom = 105; // make room for the thumbstrip and the controls
          hs.numberPosition = 'caption';
          // Add the slideshow providing the controlbar and the thumbstrip
          hs.addSlideshow({
              //slideshowGroup: 'group1',
              interval: 5000,
              repeat: false,
              useControls: true,
              overlayOptions: {
                  className: 'text-controls',
                  position: 'bottom center',
                  relativeTo: 'viewport',
                  offsetY: -60
              },
              thumbstrip: {
                  position: 'bottom center',
                  mode: 'horizontal',
                  relativeTo: 'viewport'
              }
          });
      </script>
    5. В шаблоне attached_files ищем сначала:
      Код:
          <ul class="attachmentList SquareThumbs"
      и заменяем на:
      Код:
          <ul class="attachmentList highslide-gallery SquareThumbs"
      затем находим:
      Код:
                                  <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"
      и заменяем на:
      Код:
                                  <a href="{xen:link attachments, $attachment}" class="highslide" onclick="return hs.expand(this)"
    6. Чтобы скрипт работал также и в миниатюрах, в шаблоне bb_code_tag_attach находим:
      Код:
          <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"
               data-href="{xen:link misc/lightbox}"><img
               src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}"
               class="bbCodeImage LbImage" /></a>
      и меняем на этот код:
      Код:
          <span class="highslide-gallery">
           <a href="{xen:link attachments, $attachment}" class="highslide"
               data-href="{xen:link misc/lightbox}" onclick="return hs.expand(this)"><img
               src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}"
               class="bbCodeImage LbImage" /></a>
           </span>
    На этом все. Можете проверить результат :)

    pchel.jpg
     
    sanmitsu, SkyNet, GAM и 7 другим нравится это.
  2. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    А здесь это стоит?
     
  3. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Теперь стоит.
    Результат в первом сообщении (жмите на картинку внизу) :)
     
    CyberAP нравится это.
  4. SuXX

    SuXX Местный

    Регистрация:
    19.10.10
    Сообщения:
    14
    Симпатии:
    5
    Версия XF:
    1.1.5
    Работает! (XenForo Beta 3)
    Сенкс!!!
     
  5. Yoskaldyr

    Yoskaldyr Пользователь

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    С Highslide все хорошо, только вот одна проблема - это просто JS-монстр :)
    Лично я считаю что такой тяжелый скрипт надо использовать только когда есть крайняя необходимость.
     
    AleX, r4mZeS и CyberAP нравится это.
  6. SuXX

    SuXX Местный

    Регистрация:
    19.10.10
    Сообщения:
    14
    Симпатии:
    5
    Версия XF:
    1.1.5
    Поэтому и - была просьба
     
  7. Ice

    Ice Местный

    Регистрация:
    13.10.10
    Сообщения:
    205
    Симпатии:
    103
    Версия XF:
    1.1.2
    для беты5 обновите инфу по установке!
     
    CyberAP нравится это.
  8. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Да, нужно обновить для 5 беты. Тоже захотел себе поставить.
     
  9. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Работает и так по идее. В чем именно обновление требуется?
     
  10. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Ну конечно если все повключать, то монстр. Но оно то вам нужно? (мини превью при просмотре картинок, слайдшоу, подписи...). Вот здесь конфигуратор опций, выбирите что считаете нужным.
    А есть еще HS редактор визуальный, тоже очень удобный, выбрать опции и оформление. Так что вперед =)

    Через конфигуратор уменьшил скрипт до 25 кб, хотя можно и до 20 уменьшить без рюшек и теней. на 11 кб уже меньше =) А в prety js - 21 кб. Так что сопоставимо.
     
    SuXX нравится это.
  11. Ice

    Ice Местный

    Регистрация:
    13.10.10
    Сообщения:
    205
    Симпатии:
    103
    Версия XF:
    1.1.2
    какой кусок кода на какой менять )
    ибо куски уже слегка не те, что были раньше )
     
  12. Yoskaldyr

    Yoskaldyr Пользователь

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    Для jquery есть colorbox который вообще 9К, думаю его прикрутить, а слайдер миниатюр взять от того же prettyjs или еще какой.
     
  13. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    Да зачем он нужен этот слайдер... стрелочек вправо влево и счетчика фото 1 из н-цати вполне достаточно.
     
  14. Yoskaldyr

    Yoskaldyr Пользователь

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    Это для того чтобы получить полный аналог highslide на jquery :) А так для обычного лайтбокса colorbox-а с головой хватит :)
     
  15. Yoskaldyr

    Yoskaldyr Пользователь

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    посмотрел стандартный js код xf - интересно что у XF есть LightBox только вот не до конца доделанный и он закоментирован в коде. Так что можно ожидать в самых ближайших версиях нормальный код LightBox-а в XF из коробки
     
    Pepelac нравится это.
  16. Pepelac

    Pepelac Продам луц в бутылках Команда форума

    Регистрация:
    28.09.10
    Сообщения:
    1.794
    Симпатии:
    1.349
    А я все диву даюсь, как же это так, форум напичкан вебдванольными плюшками, а лайтбокса нету... А вот оно как, Семёныч...
     
  17. Nolik

    Nolik Местный

    Регистрация:
    13.10.10
    Сообщения:
    169
    Симпатии:
    56
    Версия XF:
    1.1.3
    и точна есть такое XenForo.LightBox =) тода будем ждать, а то я уж хотел coolbox прикручивать.
     
  18. Yoskaldyr

    Yoskaldyr Пользователь

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    Ну я прикрутил Colorbox - получилось все довольно быстро и без правки шаблонов. Правда перевод пришлось в js запихнуть - просто лень было городить дополнительные фразы для такого минихака (пример в подписи).

    P.S. Из протестированных лайтбоксов (на днях перебрал пару десятков) colorbox один из самых быстрых
     
    vitalik нравится это.
  19. makdeniss

    makdeniss Местный

    Регистрация:
    06.10.10
    Сообщения:
    62
    Симпатии:
    20
    нда интересно... я загрузил все файлы, как и надо было. Выполнил инструкцию до 5ого пункта - и всё работает :) Бета 5.
     
  20. ZFR

    ZFR Местный

    Регистрация:
    27.12.10
    Сообщения:
    30
    Симпатии:
    41
    Версия XF:
    1.1.4
    В очередной раз пробовал сделать все как написано но результата не получил. :(
     

Поделиться этой страницей