Многие из нас зарегистрированы в самой большой русскоязычной социальной сети — Вконтакте , особенно это касается молодого поколения пользователей. У нас, эта соцсеть является самой распространенной, она добавлена в закладки браузера на компьютере и установлена на каждом смартфоне и планшете, многие даже начинают свое утро с чтения ленты новостей друзей и групп, а другие и вовсе круглосуточно онлайн.
С недавнего времени, в официальном приложении Вконтакте для Android и iOS начала отображаться реклама, ее называют "Рекомендации для пользователей". Я думаю практически каждый это наблюдал, она отображается при просмотре Ленты новостей в виде рекламного сообщения какого-нибудь приложения с кнопкой Установить. Честно, это начинает раздражать, так как куда не глянь, везде реклама — реклама на ТВ (через каждые 5-10 минут), радио, газетах, в Интернете, уже даже наши любимые приложения становятся набитые различной рекламной продукцией — она слишком плотно прописалась в нашей жизни.
Но к счастью, обладателям смартфонов и планшетов на операционной системе Android вопрос с рекламой в Вконтакте можно решить, чего не скажешь о владельцах iPhone и iPad – хотя... можно установить версию приложения 2.0 и не обновлять ее.
Как убрать рекламу в приложении VK для AndroidШаг 1 Откройте установленное приложение VK на вашем устройстве
Шаг 2
Перейдите в меню приложения и выберите пункт Настройки
.
В старых версиях приложения иконка находится в левом верхнем углу
В новых — откройте страницу пользователя и нажмите иконку шестеренки в правом верхнем углу
Шаг 3 Опуститесь вниз и нажмите на пункт меню О программе . Перед вами появиться окно с указанием версии программы. Нажмите на иконку 3 раза, каких либо изменений Вы не увидите
Шаг 4 Переместитесь на рабочий стол или меню со всеми установленными приложениями и откройте программу Телефон . Если Вы используете планшет, в котором нет такого приложения, тогда скачайте из магазина Google Play любое приложение для совершения звонков. После чего в поле набора номера введите секретный код: *#*#856682583#*#*
Шаг 5 После ввода кода, Вы будете переброшены на страницу для разработчиков. Переместитесь в конец страницы и поставьте галочку для пункта Отключить рекомендации для старых версий приложения или Отключить рекламу для новых
Теперь можете возвращаться в приложение и наслаждаться чтением ленты новостей без надоедливой рекламы. Данная брешь пока доступна для активации любому пользователю, но кто его знает, что будет при следующих обновлениях приложения, возможно разработчики уберут такую возможность.
Расскажите о статье своим друзьями, а также вступайте в наши группы в социальных сетях, где собранно еще больше полезной информации
26.07.15 4.7KFancybox for WordPress – интересный плагин для фреймворка jQuery , позволяющий быстро создавать красивые и удобные проекты. Он позволяет увеличивать картинку на сайте без перехода на пустую страницу, а также «связывать » изображения в единую галерею. Также имеется возможность прокрутки галереи с помощью колесика мыши. Кроме того Fancybox открывает модальное окно, в котором можно удобно просмотреть текст, swf -анимацию и прочее:
Что такое Fancybox?Fancybox на базе JavaScript JQuery является инструментом, позволяющим производить масштабирование и повышать функциональность изображений, мультимедиа-элементов и HTML -контента на веб-страницах. Плагин имеет простую настройку и удобное подключение:
Скачайте плагин Fancybox и распакуйте его. Далее скопируйте файлы, включающие сценарий и стили. Обязательно убедитесь в наличии JS, CSS файлов на сервере и настройте пути в скриптах. Проверьте, загружена ли библиотека JQuery.
Примеры установки Fancybox-1.3.4
Скачиваем jquery.fancybox-1.3.4.zip распаковываем архив и устанавливаем себе в папку jquery.fancybox-1.3.4 . Внутри находим папку Fancybox и заливаем ее на сервер. К примеру, в /wp-content/plugins/ . Ее содержимое должно попасть сюда — ваш сайт.ru/wp-content/plugins/fancybox/ .
function my_css() { echo ""."n"; } add_action("wp_head", "my_css", 5); if (!is_admin()) { wp_enqueue_script("fancybox", "/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.js", "jquery", "1.3.4"); }
$(document).ready(function(){$("a:has(img)").fancybox({"hideOnCotentClick":true,"titleFromAlt": true,"titlePosition":"outside","padding":"5","margin":"25"});});
Очищаем кэш и перезагружаем страницу с картинками. Галерея Fancybox выводит на страницу все картинки, что очень удобно. Можно видеть сразу несколько изображений, перемещаясь по ним стрелками вперед-назад или прокручивая колесико мыши. Если нужно закрыть изображение, достаточно нажать на крестик.
Скачать последнюю версию плагина можно найти тут .
Зачем нужен FancyboxСегодня существуют разные «zoom» для изображений, но у каждого из них имеются свои недостатки. К примеру, Thickbox и Lightbox затемняют фон, слишком большие и не очень привлекательные, да и как такового «эффекта зума » они не дают. Не так давно Cabel из Panic создал довольно интересный плагин FancyZoom , однако весит он более 150 Кб и к тому же платный.
Появление FancyBox в этой ситуации стало настоящим чудом. Во-первых, плагин использует jQuery , который включается в стандартную поставку WordPress , во-вторых, весит всего 27 Кб:
К неоспоримым преимуществам плагина относят:
Параметры Fancybox позволяют без труда провести точную настройку и получить должный эффект.
Основные разновидности и версии FancyboxНекоторые веб-мастера по-прежнему отдают предпочтение версии Fancybox 1.3.4 . Без сомнения версия 2 круче, быстрее и легче, но в ней отсутствуют те функции, благодаря которым можно интегрировать скрипт без внесения изменения во все посты блога. Для тех, кто между старым, надежным и новым, функциональным выбирает второе, хочется отметить несколько наиболее заметных изменений.
В Fancybox 2 вас ждет:
Причин возникновения проблем в работе плагина может быть несколько.
Самыми распространенными из них считаются:
Не работает Fancybox и по причине блокировки плагина брандмауэром, антивирусом или блокировщиком рекламы.
Основные параметры FancyboxПараметры Fancybox или, как их еще называют, ключи влияют на выполнение тех или иных задач. Они позволяют работать с такими типами контента как Ajax , ролики Youtube , Google maps , флеш-ролики swf , открывать контент в iframe . Изменить их значения можно непосредственно в FancyBox JS :
Самые важные настройки Fancybox for WordPress находятся во вкладках Appearance , Animation и Behavior . С их помощью можно обеспечить соответствие визуального оформления картинок с общим дизайном сайта.
На вкладке Appearance можно произвести настройку цвета и включение рамки изображений (Border ). Настройка кнопки закрытия окна с картинкой, выбор положения и цвета внутреннего отступа производится в Button . Цвет, прозрачность и затемнение заднего фона можно отрегулировать в Overlay Options . Выбрать цвет и место выведения заголовка можно в Title . Navigation Arrows — стрелки навигации, перелистывания.
Скорость анимации и прозрачность картинок можно настроить в Zoom Options во вкладке Animation . Эффект растягивания или затухания выбираем в Transition Type . Подбор шаблона для эффектов осуществляется в Easing .
Во вкладке Behavior можно установить автоматическое растягивание картинки согласно размеру экрана (Auto Resize to Fit ), а также выбрать способ закрытия изображений (Close with «Esc», Close on OverlayClick, Close on ContentClick ) и зацикливание их показа (Cyclic Galleries ).
Fancybox имеет несколько настроек режимов вывода картинок, видов надписи над картинками, скорости перелистывания и т.д.
Рассмотрим, как производится настройка Fancybox :
Чтобы настроить отображение картинки, необходимо прописать следующий код:
$(document).ready(function() { $(".single_image").fancybox(); });
В href
следует указать путь к изображению, а в прописать превью.
В данном случае следует добавить в атрибут , в котором будет отражено то или иное значение для отдельной группы изображений:
a rel= "group" href="images/111.jpg">
Нужно указать параметры отображения:
$(document).ready(function() { $("a").fancybox({ "transitionIn" : "none", "transitionOut" : "none", "titlePosition" : "over", "titleFormat" : function(title, currentArray, currentIndex, currentOpts) { return "Image " + (currentIndex + 1) + " / " + currentArray.length + (title.length ? " " + title: "") + ""; } }); });
Если необходимо вести подсчет картинок в определенной группе или показывать заголовок изображения и номер, пропишите эту информацию в title .
Плагин Fancybox можно использовать для того, чтобы выводить контент в модальное окно.
Например:
Отображение контента текст
По умолчанию контент скрыт — display:none . Но как только пользователь кликнет по ссылке, начинает отображаться контент div с ID , указанным в href :
$(document).ready(function() { $("#content").fancybox({ "titlePosition" : "inside", "transitionIn" : "none", "transitionOut" : "none" }); });
Как настроить фон и окно?Настроить анимацию при открытии/закрытии можно в разделе «Поведение ». Чтобы перелистывать изображения с использованием мышки поставьте галочку «Включить скрипт для Mousewheel jQuery ».
Как настроить PDF?Данная настройка Fancybox будет отображаться только, если он активирован для PDF :
Все, что теперь требуется, – разместить на сайте ссылку на PDF -файл.
Как настроить видео с YouTube?Вы настроили плагин и внесли все изменения, а результата нет? Это не означает, что не работает Fancybox for WordPress . Все, что от вас требуется — очистить кэш или и вовсе выключить его на время правок.
В случае возникновения ошибки «TypeError:$ is not a function », решить проблему поможет замена $ на jQuery .
Секреты работы с Fancybox:
Установив и корректно настроив Fancybox , вы сможете быстро и легко создавать красивые галереи и успешные проекты.
Хорошо Плохо
В этом материале разберём один из способов установить скрипт «FancyBox » на ваш WordPress. Этот вариант отличается своей лёгкостью, так как через пару минут картинки на вашем сайте будут открываться в модальных окнах.
Fancybox 1.3.4 вызов через CDN ЯндексаFancyBox
является популярным скриптом, позволяющим открывать графические объекты в модальном окне поверх контента. Это упрощает навигацию по сайту, и позволяет пользователю масштабировать изображение для просмотра.
Для подключения мы воспользуемся файлами Яндекса, размещёнными на
CDN
сервере. Это, как минимум, оптимизирует загрузку страниц
WordPress,
и исключит копирование файлов на хостинг.
Для подключения внешнего скрипта открываем файл «header.php» вашей активной темы, где вставляем следующий код до закрывающегося тега « »:
$(document)..fancybox({"titleFromAlt":true,"titlePosition":"outside","padding":"5","margin":"25"});});Здесь мы ограничили вывод скрипта только на страницах «single.php». Подключили файлы стилей CSS и самого скрипта fancybox. А в конце указали путь до конечных файлов изображений «/wp-content/uploads/», чтобы на клик мышкой раскрывались только загруженные на сайт картинки.
Сохраняем файл «заголовка», и отправляемся проверять работу скрипта «FancyBox». Напомним, что в модальном окне откроются только изображения для которых в поле ссылка указан «Медиафайл» То есть, миниатюра в теле публикации должна ссылаться на свой оригинал.
Fancybox 3.0.47 вызов через cdnjs.cloudflare.comЕщё вариант внешнего подключения, но более свежей версии fancybox 3.0.47. Из отличительных особенностей переработанная логика, анимация и функция полноэкранного просмотра. Аналогично предыдущему вызов происходит через сторонний CDN сервер.
Для вызова добавьте следующий код перед закрывающимся тегом «»:
$(document)..fancybox({});});
В первой строке мы подключаем файл стилей CSS, далее сам скрипт fancybox. В конце не забываем окружить картинки в записях, как и в первом варианте.
Сохраняем изменения в шаблоне нажатием кнопки «Обновить», и отправляемся проверять работу скрипта. Если у Вас установлено активное кэширование, то предварительно полностью очистите кеш.
Примечание! В ряде случаев, новый скрипт может не отрабатываться должным образом. Для исправления можно поэкспериментировать с версией установленной библиотеки Jquery (для проверки запуска fancybox 3.0.47 мы применили jquery 3.2.1).
Где скачать оригинальные файлы FancyBox?Если пожелаете разместить файлы скрипта у себя на сайте, и подгружать их со своего хостинг-сервера, то ниже предоставляем ссылки с сайта разработчика.
Приветствую друзья. На каждом сайте есть медиафайлы для лучшей подачи информации посетителям. уже рассматривали на страницах блога. При помощи плагинов вордпресс можно увеличить картинку не совершая переход на отдельную страницу. Есть возможность связать изображения в единую галерею или выводить по одной. Познакомимся с одним из таких плагинов, одним из лучших в своём роде. занимает немного времени, стоит потратить его для реализации поставленной задачи.
Размещая изображения на веб-сайте скорее обращали внимание, что «габаритные» картинки установленный шаблон сжимает, что влечёт за собой потерю качества. Мелкие шрифт и детали не всегда можно разобрать. В настройках отображения можно указать вывод картинки в отдельной вкладке, или на этой же странице сайта. Это может привести к появлению дублей, да и пользователю не совсем удобно. Fancybox for wordpress открывает изображение на этой странице поверх остального контента.
Установить и активировать Fancybox for wordpress надо стандартным способом. Если забыли как, прочитайте статью . Чтобы работа Fancybox применялась к картинке надо во время загрузки или к уже загруженному файлу в Настройках отображения файла в пункте Ссылка указать ⇒ Медиафайл .
После активации появится раздел — Fancybox for wordpress.
После перехода в раздел откроется окно с вкладками для редактирования различных параметров.
Плагин не русифицирован, на английском языке, но практически всё понятно и так. Сейчас предоставлю перевод всех настроек.
Обязательно сохраняйте выбранные изменения.
Следующие два раздела для продвинутых пользователей.
Надеюсь, после подробного разбора Fancybox for wordpress настройка плагина не вызовет затруднений. Желающие успешно внедрят его и сделают вывод изображений во всплывающем окне эффектным, и сайт будет радовать глаз автору и посетителям.
Всем привет! Сегодня мы поговорим с вами о таком мощном и полезном инструменте, как библиотека FancyBox. Этот jQuery-плагин предоставляет возможность добавлять на страницы сайта систему всплывающих окон, известных еще как лайтбоксы (от англ. «lightbox»), модальные окна, попапы (от англ. «pop-up»). Формат всплывающих окон весьма востребован в веб-разработке и применяется для достижения различных целей. Библиотека позволяет: открывать в попапах html-код и txt-файлы, формы и информационные сообщения, контент из других источников с помощью Ajax-запросов, исполнять скрипты, воспроизводить видео с сервисов YouTube, vimeo и флеш-ролики.
А самый распространенный способ использования FancyBox на WordPress-блоге – увеличение изображений, как одинарных, так и объединенных в галерею. Примеры реализации всех вышеперечисленных вариантов можно найти на официальном сайте плагина — fancybox.net. А в данной статье мы рассмотрим, как легко интегрировать библиотеку в наш блог с помощью плагинов FancyBox For WordPress и Easy FancyBox и произвести их основные настройки. А также узнаем, как подключить FancyBox к WordPress без плагина.
FancyBox For WordPress: выводим картинки и галереи красивоЕсли вы уже работали с изображениями в Вордпресс и размещали их в записях и на страницах, то замечали, что картинки с большим расширением шаблон ужимает. И иногда это влияет на корректность отображения информации, которую вы хотели передать, из-за того, что не все можно разобрать. Бороться с этим можно, повесив на медиафайл ссылку на самого себя. Но в таком случае при клике на картинку она, в зависимости от настроек, откроется либо в этом же окне как полноценная страница, либо в новой вкладке. Согласитесь, оба варианта не самые удобные и требуют от пользователя дополнительных действий и времени совершенно необоснованно.
Для устранения такого неудобства и усовершенствования процесса отображения картинок на Вордпресс-блоге был разработан специальный плагин FancyBox For WordPress. Он служит тому, чтобы посетитель мог активировать кликом изображение, открывая его поверх остальных окон. Вот так:
Давайте установим плагин для нашего сайта из репозитория Вордпресс.
Активируем FancyBox for WP и он сразу же приступает к работе, применяя к картинкам свои базовые настройки. В этом мы можем убедиться, перейдя на наш блог, обновив его и кликнув по любому из имеющихся изображений.
При этом картинка масштабируется до больших размеров и размещается во всплывающем окне над остальным контентом, который слегка затемняется. Чтобы закрыть модальное окно, можно кликнуть либо по крестику в правом верхнем углу, либо в любом месте страницы вне изображения.
Если FancyBox For WordPress не работает, а точнее картинки не кликабельны, проверьте, правильно ли выставлены настройки отображения файла при выборе картинки для загрузки в редакторе. Необходимо, чтобы в поле «Ссылка» было установлено «Медиафайл».
Кроме предустановленных опций, предполагаются и более гибкие настройки FancyBox For WordPress. Их мы можем найти в консоли ВП, в пункте меню «Настройки» — «FancyBox for WP». Перейдя по ссылке, мы видим большое количество вкладок, отвечающих за редактирование тех или иных параметров. Они связаны в основном с изменением внешнего вида отображения картинок. К сожалению, плагин полностью англоязычный. Но сейчас мы рассмотрим все самые интересные моменты, которые могут вам понадобиться, если дефолтные установки не соответствуют вашим потребностям.
Стартовая вкладка – «Info». Здесь размещены ссылки на информацию о разработчиках и продукте в целом. Создатели плагина говорят о том, что если вы не хотите вникать во все предложенные настройки, то и без этого базовый вариант установок дает достаточно привлекательный результат. Также они просят обратить внимание на то, что если после редактирования вы не заметили изменений моментально, это зачастую вовсе не значит, что FancyBox For WordPress не работает. Если у вас установлен плагин кэширования, например , то необходимо очистить кэш после сохранения изменений или деактивировать плагин на время работы с настройками.
Следующий таб – «Appearance». Это страница, где мы можем настроить под себя базовые опции, отвечающие за внешний вид всплывающих окон. Если чекбокс отмечен галочкой – функция включена, если же нет – отключена:
Переходим ко вкладке «Animations». Здесь мы настроим функции, отвечающие за контроль анимации всплывающих окон:
Обратите внимание, что данные установки могут быть применимы только для тех открывающихся/закрывающихся модальных окон, у которых в параметре «Transition Type» выбрано значение elastic.
После непосредственно полей с настройками плавности авторы FancyBox For WP предлагают нам перейти по ссылкам и посмотреть, как работают предложенные ими варианты функции easing. (Первая ссылка на текущий момент не доступна.)
Следующая вкладка – «Behavior Settings». Она отвечает за настройки поведения всплывающего окна и идет со статусом «medium». В связи с этим, разработчики FancyBox For WordPress предупреждают нас, что лучше оставить на этой странице все как есть, если только мы действительно не знаем, как работать с расположенными здесь параметрами. Поэтому мы не будем детально останавливаться на всех опциях. За что отвечает каждая из них, понятно из скриншота:
Пятый таб – «Galleries». Это продвинутый уровень настроек, касающихся галерей изображений:
Допустим, что у вас на странице размещен материал, который условно разделен на несколько смысловых блоков. Например: в одном из них вы размещаете картинки для иллюстрирования , а в следующем — примеры наиболее удачных продающих страниц. И вы хотите, чтобы две эти группы изображений не смешивались в одном модальном окне, а выводились в разных лайтбоксах. Чтобы осуществить задуманное, для начала выберите опцию плагина «Do not group images in gallery automatically».
Теперь откройте нужную публикацию в редакторе и перейдите в режим «Текст», то есть тот, где отображается html-код. Найдите первую группу картинок и всем ссылкам (тег a) , в которые обернуто каждое из изображений (тег img ), присвойте атрибут с каким-то одинаковым для всех значением. Например: rel = «gal1».
Для второй группы медиафайлов повторите те же действия, но с другим значением rel, например: rel = «gal2»;
Также лучше не редактировать и следующие вкладки, они будут понятны и полезны только продвинутым пользователям.
Уверенна, что всех приведенных выше инструкций вам будет достаточно для успешного интегрирования FancyBox For WordPress в ваш блог для эффектного отображения изображений в сплывающем окне.
Но нельзя не обратить внимание на то, что в интернете периодически появляются жалобы пользователей на уязвимость плагина, которая ведет к заражению сайтов вирусами даже без доступа к админке Вордпресс и хостингу. Если вы столкнулись с проблемой взлома вашего веб-ресурса, важно как можно быстрее . Я же хочу предложить вам альтернативный вариант для выведения картинок в лайтбоксах. И далее мы познакомимся с плагином, составляющим основную конкуренцию FancyBox для ВП. Именно он используется на страницах моего блога.
Easy FancyBox: основные особенности плагинаКак и предыдущий плагин, Easy FancyBox для WordPress начинает работать сразу после стандартной установки на CMS по отношению ко всем изображениям. Если вы захотите настроить параметры «под себя», то на странице по адресу в консоли «Настройки» — «Медиафайлы» обнаружите опции, практически идентичные опциям FancyBox для Вордпресс.
Характерными же его отличиями являются:
Или же в настройках плагина в блоке «Gallery» в поле «Autogallery» выбрать пункт «Все в одной галерее»;
Каких-либо существенных недостатков в работе плагина не выявлено. Но если в ваш шаблон ВП встроен «родной» лайтбокс, велика вероятность конфликта и может оказаться, что Easy FancyBox для WordPress не работает. В таком случае имеет смысл обратиться в службу поддержки.
Интеграция библиотеки FancyBox в Вордпресс без плагиновЕсли вы трепетно относитесь к вопросу , то наверняка вас волнует скорость работы вашего блога. А мы знаем, что большое количество плагинов может замедлять процесс загрузки страниц. Поэтому далее мы рассмотрим вариант внедрения jQuery скрипта FancyBox на WordPress без плагина. Данный способ рекомендуется применять в том случае, если вы хорошо знакомы со и имеете опыт работы с кодом. В процессе могут возникать конфликты с другими скриптами темы, вызванные включением тех или иных опций. Решение этой проблемы в каждом отдельном случае будет индивидуальным, поэтому заранее предусмотреть все варианты сложно.
Для установки библиотеки файлы FancyBox можно найти и скачать по адресу — fancyapps.com/fancybox/. В разархивированном каталоге открываем папку source и копируем jquery.fancybox.css и jquery.fancybox. js , помещаем их в папку , которую необходимо предварительно создать в корне темы.
Открываем в текстовом редакторе файл functions. php , находим функцию подключения скриптов и вставляем следующий код:
1 2 3 4 5 | // Fancybox stylesheet. wp_enqueue_style( "fancybox-style" , get_template_directory_uri() . "/fancybox/jquery.fancybox.css" , array () , " " ) ; // Fancybox script. wp_enqueue_script( "fancybox-script" , get_template_directory_uri() . "/fancybox/jquery.fancybox.js" , array ("jquery" ) , " " ) ; |
// Fancybox stylesheet. wp_enqueue_style("fancybox-style", get_template_directory_uri() . "/fancybox/jquery.fancybox.css", array(), " "); // Fancybox script. wp_enqueue_script("fancybox-script", get_template_directory_uri() . "/fancybox/jquery.fancybox.js", array("jquery"), " ");
Затем открываем для редактирование файл темы header.php и в head помещаем вызов функции FancyBox:
1 2 3 4 5 |
$(document).ready(function(){ $(".fancybox").fancybox(); });
А вот видео о настройке и использовании Fancybox:
Сегодня мы с вами познакомились с широко используемым на сайтах скриптом для красивого отображения картинок в лайтбоксах. Для простоты его интеграции в блог было разработано множество специальных плагинов. Мы рассмотрели одни из самых востребованных: Easy FancyBox и FancyBox For WordPress, узнали, как они работают и в чем их различия. Они проверены опытным путем и работают стабильно. Чтобы понять, какой из инструментов больше подходит вам по функционалу, определите основные задачи, которые он должен выполнять. Нет смысла выбирать тяжелый плагин, чтобы в дальнейшем задействовать только одну или две его опции.