Главная » Шпаргалка » PHP MYSQL javascript » PHP » пример pop up окна при помощи fancybox

fancybox - пример pop up окна для вывода информации в ваншопе

Долго искал готовое для вывода внешних страниц при помощи fancybox так как он встроин в ваншоп и чтоб не подключать другие фреймворки  (не хотелось разбираться в нем ) везде инфа о выводе галерей (тобиш картинок в всплывающих окнах) , но пришлось осваивать.

Пример всплывающего окна при помощи fancybox в ваншопе (можно вывести любое диалоговое окно или информацию).

Допустим хотим вывести авторизацию:

изначально в ваншопе уже подключон fancybox (строки вида в includes/header.php )

<script type="text/javascript" src="jscript/jquery/jquery-1.4.2.min.js"></script>

...
<link rel="stylesheet" type="text/css" href="jscript/jquery/plugins/fancybox/jquery.fancybox-1.2.5.css" media="screen" />
<script type="text/javascript" src="jscript/jquery/plugins/fancybox/jquery.fancybox-1.2.5.pack.js"></script>

если нет в вашей версии , качайте прикручивайте jquery и fancybox

в includes/header.php добавляем код (выделеное):

<script type="text/javascript">
jQuery.noConflict();
    jQuery(document).ready(function() {
        jQuery("a.zoom").fancybox({
        "zoomOpacity"            : true,
        "overlayShow"            : false,
        "zoomSpeedIn"            : 500,
        "zoomSpeedOut"            : 500
    });
    });
    jQuery(document).ready(function() {
        jQuery("#varLogin").fancybox({
        'frameWidth'         : 200,
        'frameHeight'         : 190,
        'hideOnContentClick': false,
        'modal'             : true,
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',
        'type'                : 'iframe'
    });
    });
</script>

 

varLogin - метка (ид фрейма запуска окна)

frameWidth,frameHeight - размер окна

hideOnContentClick - отключим закрытие окна при клике

type - тип блока

остальное читайте в АПИ

еще ети строки включаются в ваншопе только для карточки товара , чтоб они работали везде удалите

перед етим блоком и после строки

<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO)) {
?>

НАШ КОД

<?php
 }
?>

 

вызов делаете:

 <a href="max-registr.html" title="Вход" id="varLogin" class="lbtn"><img src="{$tpl_path}images/btn-registr.gif" /></a>

где max-registr.html страница в корне сайта вида

<div class="boxcontent">

<form id="loginbox" method="post" action="http://new.btmax.com.ua/login.php?action=process">
<p>
E-Mail:
</p>
<p class="loginform">
<input type="text" name="email_address">
</p>
<p>
Пароль:
</p>
<p class="loginform">
<input type="password" name="password">
</p>
<p class="LoginContentCenter">
<input type="image" src="templates/btmax/buttons/russian/button_login_small.gif" alt="Продолжить" title=" Продолжить ">
</p>
</form>
<p class="LoginContentCenter">
<a href="http://new.btmax.com.ua/create_account.php">Регистрация</a> | <a href="http://new.btmax.com.ua/password_double_opt.php">Забыли пароль?</a>
</p>

Вроде все, статья делась больше для себя как шпаргалка (тоесть быстро, сори может чо упустил и код не чистился), надеюсь поможет и вам :) .