Jump to content

how we can add fancy lighybox in prestashop CMS.


sunilmkt
 Share

Recommended Posts

  • 3 months later...

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

Share this post


Link to post
Share on other sites

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'

});

});

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 />

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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" />

Share this post


Link to post
Share on other sites

  • 2 months later...

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 by l.zuccarini (see edit history)

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More