ckroon
Posts: 869
|
Posted: 06/03/2013, 8:21 PM |
|
Easy peazy folks.
Once you install fancybox to your js directory and make sure all the files are on your server...
Set your link to have a class of "extLink"
HEADER:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../../js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/fancybox/jquery.fancybox-1.3.4.css" media="screen">
After the BODY tag
////////////////////////////UPDATE on CLOSE
<script>
$(document).ready(function(){
$(".extLink").fancybox({
'width' : '60%',
'height' : '80%',
'autoScale' : 'false',
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'type' : 'iframe',
'onClosed': function() {
parent.location.reload(true);
}
});
$(".inline").fancybox({
'width' : '350',
'height' : '45%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'inline'
});
});
</script>
OR
//////////////////////NO UPDATE on Close
<script>
$(document).ready(function(){
$(".extLink").fancybox({
'width' : '90%',
'height' : '99%',
'autoScale' : 'true',
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
$(".inline").fancybox({
'width' : '350',
'height' : '45%',
'autoScale' : 'true',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'inline'
});
});
</script>
If you need to redirect to some close code.. create a page called _close.php and put this in the Before Initialize View event.
echo "<script language = 'javascript'>parent.location.reload(); parent.$.fancybox.close();</script>";
exit;
Then just redirect your Form or a custom CLOSE link to go to close.php
_________________
Walter Kempees...you are dearly missed. |