What's the end result of this guide?
It will allow you to display cms pages inside popups that are non-obtrusive, by using Facebox. You can also display images.
Putting it together:
** Download jQueryand Facebox
** In your template (this is the template for the pages from which the popups will be triggered) add the following lines in the
Code: Select all
{literal}
<__script__ type="text/javascript" src="path/to/jquery1.2.6-pack.js"></__script>
<__script__ type="text/javascript" src="path/to/facebox.js"></__script>
<__script__ type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
<!---### NOTICE THIS MEANS POPUPS ARE TRIGGERED FOR <a> tags with the rel="facebox" ATTRIBUTE ### ---->
})
</__script>
{/literal}
** In the Facebox stylesheet go and change the path to the images that came with Facebox to where you actually saved them
** You will also need to edit Facebox.js and change manually the path for closelabel.gif and loading.gif files
** To make things a little easier for the user, we'll have to edit one of TinyMCE's Advanced options, manua\lly: Find this file:
modules/TinyMCE/tinymce/jscripts/tiny_mce/plugins/advlink/link.htm and go to aprox. line 200 and add this line:
Code: Select all
<option value="facebox">facebox</option>Adding a popup in CMS
**Open a page that u want to trigger a popup from, pick a word for the link and ad any CMSMS link (yeah with the orange palm tree button) then while on that same word that just became a link click on the regular chain button in the TinyMCE toolbar and you'll see the Insert/Edit link box, go to the Advanced tab and from Relationship from page to target select Facebox
** This will trigger a Facebox popup to any of your internal CMS pages (though not limited to that) but I suggest you only link to page that you explicitly will be using as popups, then you can make a Template just for popup pages
Notes:
** This method should work with Greybox too, as it uses the rel attribute to trigger the popups. I used facebox because it uses jQuery which I had already been using on my website, so adding facebox was just 12kb more, as opposed to Greybox (44kb)
** You can set the dimmensions for your popup template in your css and it will be applied to the popup
** You can even have multiple Popup templates if you want (say Small, Medium, Large) just assign the right one the the page that will pop up
** Thickbox is also jQuery based but it does not use attribs for triggering popups it instead uses a long sting of stuff right next to the href="" link that's why I didn't go for it.
Things that would be nice to figure out
** Making the whole background underneath the popup fade (like greybox does)
-> This was actually very easy: simply set the opacity in facebox.js (has to be a value between 0 and 1)
** Make pages that are using the Popup template load differently if the user comes from another site (this means the popup call won't be triggered) Kinda like the main issue Frames had a while back. But I think this is just a CSS workaround.
** It would be neat to be able to add more TinyMCE instances when adding a page (and have those blocks wrapped by the correct code) so inline popups could be triggered as well. But I haven't been able to figure it out, PageBlocks might work, but haven't really tried it.
** Haven't tried adding a multiple picture album, but I think it shouldn't be too hard, will update this post when I know more.
- I must stop working on these things when my eyes are hanging out of my head!
