Wordpress и около

Тема в разделе "Компьютеры. Вопрос-ответ", создана пользователем Noiro, 2 мар 2015.

  1. Noiro

    Noiro Весьма активный

    Организовывал до сегодня отображение фотографий в школьных новостях по старинке. Мысль прикрутить что-то более прогрессивное бродила где-то на задворках. А сейчас вот как-то вышла на более значимое место, благодаря lan143
    Так вот - вопрос: а есть плагины, по типу тех же Fancybox или Fotorama, которые бы брали изображения бы непосредственно с фотохостинга?
    Ибо изображений на школьном сайте немерянно - перезаливать их на сам сайт не вариант, а хочется если уж делать, то делать не только для новых постов, а все перелопатить
     
  2. MacArt

    MacArt Angel of Death

    Проще всего пикасу запилить :D
     
  3. lan143

    lan143 Погроммист Команда форума

    Изображения перезаливать не нужно. Для Fancybox'a, если картинки имеют определенный класс, и Fancybox инициализирован на поддержку этого класса, то при клике на эту картинку она будет открываться в плагине. Например:
    Код:
    <img src="image.jpg" class="fancybox">
    Код:
    <script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
    </script>
    Соответственно в хедере всех страниц должен быть подключен Fancybox и jQuery.
    Код:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
     
  4. lan143

    lan143 Погроммист Команда форума

    Упс, ошибся маленько. Картинка должна быть обернута в ссылку, а ссылка должна иметь класс fancybox. Вот пример: http://forum-cimlyansk.ru/fancybox/
    Код:
        <a href="//images.vfl.ru/ii/1425058932/54a13eaa/7916346_s.jpg" class="fancybox"><img src="//images.vfl.ru/ii/1425058932/54a13eaa/7916346_s.jpg" style="width: 100px;"></a>
        <a href="//images.vfl.ru/ii/1425289447/ffb894f9/7942344_s.jpg" class="fancybox"><img src="//images.vfl.ru/ii/1425289447/ffb894f9/7942344_s.jpg" style="width: 100px;"></a>
    Скачать и прочее можно здесь: http://fancyapps.com/fancybox/
    ЗЫ: Если к ссылке добавить атрибут data-fancybox-group, то можно сгрупировать картинки, и тогда заработает слайдер между ними. Пример в коде:
    Код:
    <a href="image1.jpg" class="fancybox" data-fancybox-group="group1"><img src="image1.jpg"></a>
    <a href="image2.jpg" class="fancybox" data-fancybox-group="group1"><img src="image2.jpg"></a>
    <a href="image3.jpg" class="fancybox" data-fancybox-group="group1"><img src="image3.jpg"></a>
    где group1 - название группы.
     
    Последнее редактирование: 3 мар 2015
  5. lan143

    lan143 Погроммист Команда форума

    Но мне больше нравится фоторама. Позволяет сделать слайдер. Но и в плане подключения она сложней. Посмотреть как работает можно вот тут: http://riomeb.ru/catalog/spalni/modulnye_spalni/largo_modulnyy_spalnyy_garnitur/
    А как подключать и использовать подробно описал вот тут: http://lan143.ru/6-javascript/25-ispolzovanie_plagina_fotorama_chast_pervaya
     
  6. Noiro

    Noiro Весьма активный

    Ну, раз такое дело - её и поставил
    Попробовал, понравилось. Буду теперь новости под неё перепиливать - там, в принципе работы всего-ничего
    [​IMG]
     
    Lev и lan143 нравится это.
  7. Noiro

    Noiro Весьма активный

    А в чём может быть прикол - периодически один блок загружается крошечного размера - с основным изображением чуть больше превьюшки?
     
  8. lan143

    lan143 Погроммист Команда форума

    Код можно глянуть?
     
  9. Noiro

    Noiro Весьма активный

    Разобрался. Похоже плагину не очень нравится, когда изображения идут вперемешку на альбомном листе и на книжном. Проставил габариты изображений - всё стало нормально грузиться
     
  10. lan143

    lan143 Погроммист Команда форума

    Давно наткнулся на замечательную библиотеку, называется Animate CSS. Смысл в том, что она реализует анимацию любых элементов на чистом CSS3. Естественно нужны браузеры, которые поддерживают CSS3, а это где-то не старше 3х лет (в зависимости от вендора). Посмотреть в действии можно вот тут: https://daneden.github.io/animate.css/
    Использовать довольно просто: у нужного элемента нужно указать класс animated и класс нужной анимации. И потом после обновления страницы этот элемент будет анимироваться. Можно так же добавлять класс во время выполнения страницы через JS, тогда анимация соответственно будет происходить в этот определенный момент.
     
  11. lan143

    lan143 Погроммист Команда форума

    Классный слайдер, жаль только, что нет возможности указать сколько элементов одновременно отображается и листается.
    http://www.idangero.us/swiper/
     
  12. Noiro

    Noiro Весьма активный

    Решил со старого-старого сайта новости перезалить на нынешний - WWW может себя поискать, как раз его 10-11 класс. И даже lan143 где-то есть. Фотки, правда, адового качества - фотоаппарат во-первых, был очень так себе, во-вторых, сжимал их - тогда же чтоб грузилось быстрее надо было
     
  13. lan143

    lan143 Погроммист Команда форума

    Нету :-(

    Add: А лгу, нашел пол головы :D
     
    Последнее редактирование: 11 ноя 2015
  14. Noiro

    Noiro Весьма активный

    Сайтостроители, а подскажите, пожалуйста, какое–нибудь расширение для вставки в материал нескольких изображений в виде слайдера? Fotorama знаю, но что–то никак не соображу как её прикрутить к Joomla. Как и в прошлом случае - ине надо чтоб картинки с фотохостинга грузились.
     
  15. lan143

    lan143 Погроммист Команда форума

    http://extensions.joomla.org/extension/fotorama-responsive-gallery
    http://extensions.joomla.org/extension/fancybox
     
    Noiro нравится это.
  16. Noiro

    Noiro Весьма активный

    Бггг... Попробовал сделать с Fotorama всё так же как и в Wordpress - а оно и заработало. До этого статью нашел - там расписывалась работа на пол-дня:D
     
  17. lan143

    lan143 Погроммист Команда форума

    У нас тут директор такое придумывает, с новым макетом, что когда скриптуешь это (к сожалению такое распределение контента хрен сделаешь на CSS) такое чувство, что скоро оно сможет полететь в космос :D
    Скриншот 2016-03-03 11.23.33.png
     
    Noiro нравится это.
  18. Noiro

    Noiro Весьма активный

    Прикольно.
     
  19. MacArt

    MacArt Angel of Death

    А что на мобилке ссылки в каталоге не открываются?
     
  20. MacArt

    MacArt Angel of Death

    Да и недешево для ширпотреба