Programming the pop up examples
When I decided to do pop up examples, using the colorbox script, I needed a way to tell it where to get the content so I made a new field in CGBlog, read on to see how.
I made a text field called poppage that is filled with the page alias which is where the pop up content comes from.
These pages are set to 'not show in menu' and use a template with only the {content} tag.
When I make the page I call the JS and function calls needed to make the example work along with any needed style sheet such as {cms_style sheet name='tabs'} (used in the tabs pop up).
To get the page alias in the function call of colorbox I assign 'pop' to the popage variable. since the <head> of the page gets processed after the <body> the {$pop} variable is available for use in the head as you will see in the code below.
It is also used in the CGBlog detail template by checking if it is not empty(the !empty part) then show the Example link.
The style sheet for the colorbox is attached to the page template.
In the <head> of the page template.
{if !empty($pop)}
<script type="text/javascript" src='/uploads/jquery/jquery-1.8.3.js'></script>
<script type="text/javascript" src="/uploads/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.example").colorbox({
iframe:true,
width: "60%",
innerHeight: "50%",
title: false,
href:"{$pop}.html"
});;
});
</script>
{/if}
At the top of the detail template.
{assign var='pop' value=$entry->fields.poppage->value}
Later in the code where we want the Example link.
{if !empty($entry->fields.poppage->value)}
<div class="examp">
<a class='example'>Example</a>
</div>
{/if}