Add Fancybox support to Home Text Editor module

[AppleEater]

Here's a simple guide on how to add fancybox support to the editorial module, aka "Home text editor module":

 

1. in /modules/editorial/editorial.php , modify the the following:

public function hookDisplayHeader()

add the following code:

/* Adding fancybox support */
	$this->context->controller->addJquery();
	$this->context->controller->addJQueryPlugin('fancybox');
  	$this->context->controller->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
/* end fancybox support */

 so that the complete function looks like this:

	public function hookDisplayHeader()
	{
		/* Adding fancybox support */
		$this->context->controller->addJquery();
		$this->context->controller->addJQueryPlugin('fancybox');
  		$this->context->controller->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
		/* end fancybox support */
		$this->context->controller->addCSS(($this->_path).'editorial.css', 'all');
	}

2. copy the file /modules/editorial/editorial.tpl to /themes/%THEME%/modules/editorial/editorial.tpl

3. edit the file /themes/%THEME%/modules/editorial/editorial.tpl, to make it like this:

<!-- Module Editorial -->
<div id="editorial_block_center" class="editorial_block">
	{if $editorial->body_home_logo_link}<a href="{$editorial->body_home_logo_link|escape:'htmlall':'UTF-8'}" title="{$editorial->body_title|escape:'htmlall':'UTF-8'|stripslashes}">{/if}
	{if $homepage_logo}<img src="{$link->getMediaLink($image_path)|escape:'html'}" alt="{$editorial->body_title|escape:'htmlall':'UTF-8'|stripslashes}" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}" {/if}/>{/if}
	{if $editorial->body_home_logo_link}</a>{/if}
	{if $editorial->body_logo_subheading}<p id="editorial_image_legend">{$editorial->body_logo_subheading|stripslashes}</p>{/if}
	{if $editorial->body_title}<h1>{$editorial->body_title|stripslashes}</h1>{/if}
	{if $editorial->body_subheading}<h2>{$editorial->body_subheading|stripslashes}</h2>{/if}
	{if $editorial->body_paragraph}<div class="rte">{$editorial->body_paragraph|stripslashes}</div>{/if}
</div>
<script type="text/javascript">
	$(document).ready(function() {
	$("a.video").fancybox({
   	'type' : 'iframe'
     });
});
</script>

<!-- /Module Editorial -->

4. in BO->Modules-> Home Text Editor ->Configure

add the following code to any <a href...> code you want to open with fancybox:

class="video"

for example:

<div id="youtube_video_button">
 <a class="video" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1" target="_blank"> 
  <img style="vertical-align: bottom;" title="Youtube_link" src="../img/cms/Youtube_button.png" alt="Youtuve button" width="136" height="40" /> 
</a>
</div>

Enjoy.

[alsitn]

Thank you!

[onno1000]

i don't see editorial folder in theme/modules. presta 156

i tried your code and then i cannot go to bo>module positions (blank screen)

reverting to original code is all back to normal.

[vekia]

it mean that you probably made some little mistake. i checked this code in 1.5.6 and worked well