Логотип TYPO
 

Пример интеграции с помощью плагина «fancyBox»

Необходимо всплывающее окно с конструктором визиток на сайте типографии? Используйте бесплатный сторонний скрипта «fancyBox».

Конструктор визиток(окном)

Сайт разработчика: fancyapps.com/fancybox/
Скрипт: Скачать архив fancyBox (версия 2.1.5)

Для интеграции необходимо:
скачать архив, распаковать и закачать в папку своего сайта все файлы скрипта;
на странице, где будет расположена ссылка на конструктор, вписать следующий код между <head> и </head> (в примере скрипт лежит в корневой папке сайта "fancybox"): 

<!-- Add jQuery library -->
 <script src="//code.jquery.com/jquery-latest.min.js"></script>

 <!-- Add mousewheel plugin (this is optional) -->
 <script src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

 <!-- Add fancyBox -->
 <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css"
 media="screen" />
 <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

 <!-- Optionally add helpers - button, thumbnail and/or media -->
 <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" 
 type="text/css" media="screen"/>
 <script src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
 <script src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

 <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" 
 type="text/css" media="screen"/>
 <script src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
 <script>
	$(document).ready(function() {
		$(".fancybox").fancybox({
		'width':1200,
		'height':1000,
		'autoDimensions': false,
        'autoSize':false
		});
	});
 </script>

Поставить саму ссылку на конструктор на странице (YOUR_LOGIN-ваш логин, полученный после регистрации): 

<a class="fancybox" data-fancybox-type="iframe" 
href="//www.business-card-editor.com/typo_name/">Конструктор визиток</a>