use fancybox plugin in a CMS page : prestashop 1.6.x

[vivianeFinance]

hello, 
 
i'm trying to use the fancybox plugin in a cms page via the code and without using the backoffice ( tinyMCE) 
i have modified the files :
cms.tpl

<a class="fancybox" rel="gal1" href="/img/Apple-logo.png" title="Picture"><img src="img/Apple-logo.png" alt="Thumbnail Alt" rel="fancybox" /></a>

 and created in override/controllers/front the file CmsController.php to add the JS and CSS files of fancybox :

public function setMedia()
	{
		parent::setMedia();
    if ($this->assignCase == 1)
        $this->addJS(_THEME_JS_DIR_.'cms.js');
    $this->addCSS(_THEME_CSS_DIR_.'cms.css');
        
    $this->addCSS(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.css');
        $this->addJS(array(_PS_JS_DIR_.'jquery/plugins/fancybox/jquery.fancybox.js',
_PS_JS_DIR_.'jquery/plugins/jquery.serialScroll.js',
_THEME_JS_DIR_.'product.js'));
   // $this->addJS(_PS_JS_DIR.'jquery/plugins/jquery.serialScroll.js');
    $this->addJqueryPlugin('fancybox');
        if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {
            $this->addCSS(_PS_JS_DIR_.'jquery/plugins/jqzoom/jquery.jqzoom.css');
            $this->addJS(_PS_JS_DIR_.'jquery/plugins/jqzoom/jquery.jqzoom.js');
}
	}

and i added this code in cms.js file in the part document.ready : 

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

now when i click on the image nothing happens, please tell me if i did make a mistake or if i did miss something

Edited May 15, 2015 by vivianeFinance (see edit history)

[tiendatutorial]

try this