Настройка Colorbox iframe

1) Создаем страничку пустую html страничку main.html со следующим содержимым

<html>
    <head>
         <meta charset='utf-8'/>
         <title>ColorBox пример iframe</title>
    </head>
    <body>
    </body>
</html>

2) Создаем папку js в нее загружаем библиотеки jquery и colorbox
3) Подключаем библиотеки для этого в секцию <head> после </title> нужно добавить строки

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.colorbox.js"></script>

4) Для использования iframe с colorbox необходимо после </script> добавить еще один скрипт отвечающий за настройки и вывод информации.

<script>
    $(document).ready(function(){
        $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
                                                    });
</script>

В данном случае будет идти обработка для каждого элемента класса «iframe»

Промежуточный код:

<html>
    <head>
         <meta charset='utf-8'/>
         <title>ColorBox пример iframe</title>
         <script src="./js/jquery.min.js"></script>
         <script src="./js/jquery.colorbox.js"></script>
         <script>
         $(document).ready(function(){
             $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
                                                         });
         </script>
    </head>
    <body>
    </body>
</html>

5) Осталось добавить код в <body> для отображения нужного элемента

<p><a class='iframe' href="http://wd5.ru">Outside Webpage (Iframe)</a></p>

WD5 - разработка сайтов

Настройка Colorbox iframe