MyBB Community Forums
Integrate Fancybox for Various Places - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Integrate Fancybox for Various Places (/thread-102760.html)



Integrate Fancybox for Various Places - Wes the Bes - 2011-08-29

Hello, Fancybox, is a popup function that you may use without switching the page. If you want more information, go to http://fancybox.net

Here are the steps to integrating it:

1. Download and extract this zipped file to your forums directory.
2. Go to the Admin Control Panel and go to Themes and Templates and select "Templates". Now select the templates of the theme you want this integration is. Open up the "Ungrouped Templates" and then open "headerinclude". Above where it says
{$stylesheets}

Paste the following code.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   Examples - images
			*/

			$("a#example1").fancybox();

			$("a#example2").fancybox({
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});

			$("a#example3").fancybox({
				'transitionIn'	: 'none',
				'transitionOut'	: 'none'	
			});

			$("a#example4").fancybox({
				'opacity'		: true,
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'none'
			});

			$("a#example5").fancybox();

			$("a#example6").fancybox({
				'titlePosition'		: 'outside',
				'overlayColor'		: '#000',
				'overlayOpacity'	: 0.9
			});

			$("a#example7").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a#example8").fancybox({
				'titlePosition'	: 'over'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});

			/*
			*   Examples - various
			*/

			$("#various1").fancybox({
				'titlePosition'		: 'inside',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});

			$("#various2").fancybox();

			$("#various3").fancybox({
				'width'				: '75%',
				'height'			: '75%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe'
			});

			$("#various4").fancybox({
				'padding'			: 0,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>


3. Go back to the templates listings and locate every link you want this popup integration. I am going to use this on the menu items in the default theme.

4. Find the link and next to where is says
<a
type
 id="example4"
and save.



You should now work!
Please note: I have not figured out how to remove the heading from the box.

Screenshot:
[Image: phancybox.png]


RE: Integrate Fancybox for Various Places - Wes the Bes - 2011-08-30

Bump!


RE: Integrate Fancybox for Various Places - Omar G. - 2011-08-30

I don't like fancybox if it is not for images, but good tutorial anyways Smile

And will it not be btter to include the js in your footer?


RE: Integrate Fancybox for Various Places - Torengo - 2011-08-31

(2011-08-29, 09:26 PM)Wes the Bes Wrote: Please note: I have not figured out how to remove the heading from the box.

Wouldn't you just need to remove {$header}, {$footer}, etc from the page 's template?


RE: Integrate Fancybox for Various Places - Wes the Bes - 2011-09-04

The fancybox picks up the page (iframes) rather than using templates, so I couldn't do that.


RE: Integrate Fancybox for Various Places - caygri - 2011-09-22

often fancybox dont work with firefox or chrome...I note this