Fancy Box On Cakephp

Procedures to embed Fancy Box On Cakephp

1. Download fancybox files on http://fancybox.net/

2. Place files on “webroot\fancybox”

3. Create file “views\elements\fancybox_links.ctp”

4. Add the following codes to the previous file you created

<?php
//fancybox
echo $this->Html->script(‘/fancybox/jquery.easing-1.3.pack.js’);
echo $this->Html->script(‘/fancybox/jquery.fancybox-1.3.4.js’);
echo $this->Html->script(‘/fancybox/jquery.fancybox-1.3.4.pack.js’);
echo $this->Html->script(‘/fancybox/jquery.mousewheel-3.0.4.pack.js’);
echo $this->Html->css(‘/fancybox/jquery.fancybox-1.3.4.css’);
?>

5. Now you can add this code to your ctp

echo $this->element(‘fancybox_links’);

6. Your final Codes.  Put these codes on you cpt->views (e.g  views/adminpanel/example.ctp)

<?php
echo $this->element(‘fancybox_links’);
?>
<a id=”linkFancyBox” class=’iframe’  href=”http://google.ca”>Iframe</a>
<script type=”text/javascript”>
$(document).ready(function() {

$(“#linkFancyBox”).fancybox({
‘padding’            : 0,
‘autoScale’            : false,
‘transitionIn’        : ‘none’,
‘transitionOut’        : ‘none’
});
});
</script>

7. Enjoy!

db

Tags:

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

You must be logged in to post a comment.