Организация галерей и сложных всплываек легко осуществляется за счет плагина 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) – парсинг, запрос в БД, вывести форму авторизации и т.д.
(Пока оценок нет)
Загрузка...