Fancybox 3 загрузка сайта во фрэйме-всплывайки

Владислав Белецкий
Владислав Белецкий .
Категория:
Комментариев: 0

Организация галерей и сложных всплываек легко осуществляется за счет плагина Fancybox 3. Но что, если нам нужно получить свой/чужой сайт во фрэйме, а именно во всплывающем окне?

Или даже усложним задачу – как получить определенный блок своего сайта во фрэйме-всплывайке? Т.е. отобразим только часть сайта, например, боковое меню или контент без шапки и подвала сайта. Все это вполне можно сделать на Fancybox 3.

О том, как его установить и с ним работать, я писал ранее. Там же вы можете его и скачать.

Напомню основы

Чтобы установить фрэйм-окно на свой сайт, используйте код: <a class=”myframe” data-fancybox data-src=”http://вашсайт.ру/” href=”javascript:;”>Сайт в Iframe окне</a>.

Если сайт полностью не влезает в окошко, то поставьте полосу прокрутки на всплывайке вот так:

<script type=”text/javascript”>
$(document).ready(function() {
$(“.myframe”).fancybox({ iframe : { scrolling : ‘yes’, }, });
});
</script>

Теперь давайте выведем только определенную часть с вашего сайта.

Для этого в data-src добавим $_GET параметр к ссылке, например так: <a class=”myframe” data-fancybox data-src=”http://вашсайт.ру/?mygalleryimg” href=”javascript:;”>Сайт в Iframe окне</a>.

А в php файле вашего сайта пропишем условие, что отображать во фрейме-всплывайке, а что скрыть. Например, если ваш сайт имеет index.php, как главную страницу, то пропишите в ней следующее:

<?php //для фрэйма во всплывайке
if(isset($_GET[‘mygalleryimg’])) { ?>
<style>header, footer { display: none;}</style>
<?php } ?>

Таким образом, когда мы откроем во всплывайке сайт, ему передастся параметр mygalleryimg, который обработается файлом вашего сайта, где вы сможете во фрейме отобразить что-угодно. Сейчас для примера, здесь просто скрываются header, footer сайта.

Но если подумать, то можно сделать все, что угодно (ведь у нас php) – парсинг, запрос в БД, вывести форму авторизации и т.д.

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии