how we can add fancy lighybox in prestashop CMS.

[sunilmkt]

I want to add fancybox light box to show product image on product page. How we can add in cms?.

[platnumcn]

I am looking for a solution also, up

[vekia]

all you have to do is to include fancybox scripts to the cms.tpl file located in your theme directory (themes/your_theme/cms.tpl)

then - in WYSIWYG editor in preferences->CMS you can add images with rel=fancybox

[platnumcn]

Hi Fanatic, if you means added below code to cms.tpl, then how to addd images with rel=fancybox

 

$(document).ready(function() {

$(".fancybox").fancybox({

openEffect : 'none',

closeEffect : 'none'

});

});

[vekia]

you have to use {literal}{/literal} tags.

then:

1. Include fancybox jquery files
   
2. include fancybox css file
   
3. include init script:
   

   $(document).ready(function() {	
   /* This is basic - uses default settings */
   
   $("a#single_image").fancybox();
   
   /* Using custom settings */
   
   $("a#inline").fancybox({
     'hideOnContentClick': true
   });	/* Apply fancybox to multiple items */
   
   $("a.group").fancybox({
     'transitionIn' : 'elastic',
     'transitionOut' : 'elastic',
     'speedIn'  : 600,
     'speedOut'  : 200,
     'overlayShow' : false
   });
   
   });
   

   
   

with this code all images will appear in fancybox after click on it

[platnumcn]

Hello, I download the fancybox form this topic http://www.prestashop.com/forums/topic/151450-custom-fancybox/ ftp the js and css file to root and mytheme/ both directory, then added code to cms.tpl, still error on cms page here http://www.dxtechinc.com/content/1-delivery

 

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2013 PrestaShop SA

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

{literal}

$(document).ready(function() {

/* This is basic - uses default settings */

 

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

 

/* Using custom settings */

 

$("a#inline").fancybox({

'hideOnContentClick': true

}); /* Apply fancybox to multiple items */

 

$("a.group").fancybox({

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'speedIn' : 600,

'speedOut' : 200,

'overlayShow' : false

});

 

});

{/literal}

{if ($content_only == 0)}

{include file="$tpl_dir./breadcrumb.tpl"}

{/if}

{if isset($cms) && !isset($cms_category)}

{if !$cms->active}

<br />

<div id="admin-action-cms">

<p>{l s='This CMS page is not visible to your customers.'}

<input type="hidden" id="admin-action-cms-id" value="{$cms->id}" />

<input type="submit" value="{l s='Publish'}" class="exclusive" onclick="submitPublishCMS('{$base_dir}{$smarty.get.ad|escape:'htmlall':'UTF-8'}', 0, '{$smarty.get.adtoken|escape:'htmlall':'UTF-8'}')"/>

<input type="submit" value="{l s='Back'}" class="exclusive" onclick="submitPublishCMS('{$base_dir}{$smarty.get.ad|escape:'htmlall':'UTF-8'}', 1, '{$smarty.get.adtoken|escape:'htmlall':'UTF-8'}')"/>

</p>

<div class="clear" ></div>

<p id="admin-action-result"></p>

</p>

</div>

{/if}

<div class="rte{if $content_only} content_only{/if}">

{$cms->content}

</div>

{elseif isset($cms_category)}

<div class="block-cms">

<h1><a href="{if $cms_category->id eq 1}{$base_dir}{else}{$link->getCMSCategoryLink($cms_category->id, $cms_category->link_rewrite)}{/if}">{$cms_category->name|escape:'htmlall':'UTF-8'}</a></h1>

{if isset($sub_category) & !empty($sub_category)}

<p class="title_block">{l s='List of sub categories in %s:' sprintf=$cms_category->name}</p>

<ul class="bullet">

{foreach from=$sub_category item=subcategory}

<li>

<a href="{$link->getCMSCategoryLink($subcategory.id_cms_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>

</li>

{/foreach}

</ul>

{/if}

{if isset($cms_pages) & !empty($cms_pages)}

<p class="title_block">{l s='List of pages in %s:' sprintf=$cms_category->name}</p>

<ul class="bullet">

{foreach from=$cms_pages item=cmspages}

<li>

<a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'htmlall':'UTF-8'}">{$cmspages.meta_title|escape:'htmlall':'UTF-8'}</a>

</li>

{/foreach}

</ul>

{/if}

</div>

{else}

<div class="error">

{l s='This page does not exist.'}

</div>

{/if}

<br />

[vekia]

you forgot about <script></script> html tags - ther are necesasry to include own javascripts to page

[platnumcn]

Hi again, thanks for your time very much, now i use this code to cms.tpl

{literal}

<script>

$(document).ready(function() {

/* This is basic - uses default settings */

 

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

 

/* Using custom settings */

 

$("a#inline").fancybox({

'hideOnContentClick': true

}); /* Apply fancybox to multiple items */

 

$("a.group").fancybox({

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'speedIn' : 600,

'speedOut' : 200,

'overlayShow' : false

});

 

});

</script>

{/literal}

 

than in cms wysiwyg, i use , but it not allow rel="fancybox" to show.

<p>{literal}<img src="http://www.dxtechinc.com/img/cms/test2.jpg" alt="" width="240" height="160" rel="fancybox"/>{/literal}</p>

[vekia]

hello, you don't have to use {literal} tags in the CMS editor. It's not necessary.

 

i checked your website, only one thing: You forgot to insert fancybox .js and css files, you must add them because without them fancybox wouldn't work

[platnumcn]

Hello, i did ftp the js and css file, i got the fancybox file from here http://www.prestashop.com/forums/topic/151450-custom-fancybox/ i don't know if this file is work

[vekia]

hello, but you must insert all fancybox files into the cms.tpl file:

 

 

2. Include necessary JS files

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Optional - Add transitions as jQuery by default supports only "swing" and "linear"

 

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

Optional - Enable "mouse-wheel" to navigate throught gallery items

 

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

 

3. Add FancyBox CSS file

Don`t forget to change background image paths if CSS file is not in the same directory.

Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more).

 

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

[l.zuccarini]

Dear Sir, someone can help me please?

Let me explain what I need.

At the moment, when a customer put some product in the cart, I modified the file CartController.php located into folder \override\controllers\front in order to make some check and give some suggestion for delivery optimization. I'd like "spoke" with customer using fancybox and not the funciont displayError because it's more elegant...

 if ($numero_pallet > 10)
	  $this->errors[] = Tools::displayError('Il numero di bancali di merce necessari per consegnare tale ordine è: '.$numero_pallet.'. Ti ricordiamo che è possibile acquistare max 10 bancali!', false);

It's clearly that at the moment I use the function displayError of file Tools.php located \\classes\

I'd like create a new function in the file Tools.php named for example "Pippo" that call a fancybox and display the string given from CartController.php

 

 

new code in the CartController.php

 if ($numero_pallet > 10)
	  $this->errors[] = Tools::Pippo('Il numero di bancali di merce necessari per consegnare tale ordine è: '.$numero_pallet.'. Ti ricordiamo che è possibile acquistare max 10 bancali!', false);

 

Now what I need to write in the Tool.php?

 

public static function Pippo($string = 'Fatal error', $htmlentities = true, Context $context = null)
{
 ????
			??????
}

 

Thank you in advance.

Edited July 9, 2013 by l.zuccarini (see edit history)

[l.zuccarini]

Nobody can help me?