Вход

Если у вас возникли проблемы, пожалуйста, дайте мне знать, отправив электронное письмо на evgeniy@y-ea.ru. Спасибо!

Забыли пароль или не зарегестрированны?

FancyBox 3 - галерея изображений, видео и всего остального

Evgeniy / 27 апреля 2017 / Опубликовано в Блог
FancyBox 3 - галерея изображений, видео и всего остального

Добрый день!

В разработке сайтов для красивого отображения используются различные скрипты, такие как:

  • Lightbox;
  • FancyBox;
  • Magnific popup;
  • ColorBox;
  • и прочие lightbox скрипты

Сегодня я хочу поговорить о fancybox, а точнее о её 3ем релизе - FancyBox 3.

FancyBox 3 - это jQuery lightbox скрипт для отображения изображений, видео и другого контента. 
Адаптирован под Touch, адаптивен и может быть настроен так, как вам нравится.

Для установки используем:

 

Добавляем скрипты после jquery

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

Простая галерея:

Галерея + сортировка

Модальное окно:

Видео:

В своих проектах я часто использую FancyBox, но я пользовался второй версией, теперь перехожу на третью и Вам советуюyes

 

Скачать Скачать


Комментарии

16.02.2019 17:40
Аватар

1. Константин пишет

Добрый день, Евгений.
есть код отправки и обработки кода в fancybox:
<code lang="javascript">
function doPopupSubmit(form,yandex_id,yandex_goal){
    var required=form.find('[required="required"]');
    var error=false;
    $(required).each(function(){
        if($(this).val()==''){
            $(this).css('border-color','#e03c42');
            if(!error){
                $(this).focus();
            }
            error=true;
        }
        else{
            $(this).css('border-color','#cccccc');
        }
    });
    if(error){
        return false;
    }
    if(yandex_id!=''&&yandex_goal!=''){
        window['yaCounter'+yandex_id].reachGoal(yandex_goal);
    }
    $.ajax({
        url            :    form.attr('action'),
        type        :    form.attr('method'),
        //data        :    form.serialize(),
        processData    :    false,
        contentType    :    false,
        cache        :    false,
        data        :    new FormData(form[0]),
        beforeSend    :    function(){$.fancybox.showLoading();},
        success        :    function(r){
            $.fancybox({
                'content':r,
                beforeShow:function(){
                    $("input[name=phone]").mask("+7 (999) 999-99-99");
                }
            });
            form.find('input[type=text]').val('');
            form.find('input[type=email]').val('');
            form.find('textarea').val('');
        },
        complete    :    function(){$.fancybox.hideLoading();}
    });
    return false;
}
</code>
В fancybox-1.3.4 и jquery-1.8.2 работает. При переходе на fancybox-3 и jquery-3 ругается на fancybox().
На источнике нет описаний. Что можете подсказать?

Добавление комментариев доступно только зарегистрированным пользователям
Зарегистрироваться
TOP