День добрый! Меня зовут Евгений. Я IT специалист и web - разработчик.
Email: evgeniy@y-ea.ru
Яловой Евгений
Россия, Краснодар
FancyBox 3 - галерея изображений, видео и всего остального
Компьютерная помощь, разработка сайтов и не только.
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, но я пользовался второй версией, теперь перехожу на третью и Вам советую
Партнеры
-
-
gama-gama.ru
Портал - gama-gama.ru посвящен компьютерным играм, цены самые низкие в интернете, большие накопительные бонусы, отсутствие комиссии платежных систем в отличие от других магазинов.Убедиться самому
-
Обмен валют онлайн
TimeWeb
Лучший хостинг для сайтов, веб - приложений, CRM
Комментарии
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().
На источнике нет описаний. Что можете подсказать?
Новый комментарий