[SOLVED] fancybox effect in editorial module

waldiPL · October 11, 2013

hello

it is possible to add pictures to editorial module with fancybox effect?

vekia · October 11, 2013

yes it is possible, what ps version you use?

waldiPL · October 17, 2013

sorry for late reply

im using 1.5.4.1

vekia · October 17, 2013

no worries

i'm patient person

ok, so if you want to add fancybox to editorial module, we have to edit module .php file (modules/editorial/editorial.php)

we have to add fancybox libraries to homepage.

you've got there function:

	public function hookDisplayHeader()
	{
	    $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
	}

change it to:

public function hookDisplayHeader(){
  $this->addJqueryPlugin('fancybox');
  $this->context->controller->addCSS(($this->_path).'editorial.css', 'all');
  $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
}

open editorial.tpl file and add there this code:

{literal}
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>
{/literal}

now you can use fancybox plugin !

how? you can read here: adding fancybox to picutres and other links

you've got there full guide - step by step - how to add fancybox effect in tinymce editor.

start from:

waldiPL · October 17, 2013

works like a charm!

thank you Prestashop Legend!

vekia · October 17, 2013

you're welcome

thread marked as [solved]

with regards,

milos

viger · October 28, 2013

Another solution, with fancybox slideshow effect (for 1.5.6.0 and previous with little changes):

open /classes/Validate.php
find:

if (preg_match('/<[\s]*script/ims', $html) || preg_match('/('.$events.')[\s]*=/ims', $html) || preg_match('/.*script\:/ims', $html))
			return false;

comment in this way:

//		if (preg_match('/<[\s]*script/ims', $html) || preg_match('/('.$events.')[\s]*=/ims', $html) || preg_match('/.*script\:/ims', $html))
//			return false;

upload the attached file jquery.fancybox2.js in folder /js/jquery/plugins/fancybox/
open /js/jquery/plugins/fancybox/jquery.fancybox.css
add the following lines:

/* css for fancybox slideshow in CMS pages */

.fancybox2-wrap,
.fancybox2-skin,
.fancybox2-outer,
.fancybox2-inner,
.fancybox2-image,
.fancybox2-wrap iframe,
.fancybox2-wrap object,
.fancybox2-nav,
.fancybox2-nav span,
.fancybox2-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox2-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox2-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox2-opened {
	z-index: 8030;
}

.fancybox2-opened .fancybox2-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox2-outer, .fancybox2-inner {
	position: relative;
}

.fancybox2-inner {
	overflow: hidden;
}

.fancybox2-type-iframe .fancybox2-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox2-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox2-image, .fancybox2-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox2-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox2-loading, .fancybox2-close, .fancybox2-prev span, .fancybox2-next span {
	background-image: url('fancybox_sprite.png');
}

#fancybox2-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox2-loading div {
	width: 44px;
	height: 44px;
	background: url('fancybox_loading.gif') center center no-repeat;
}

.fancybox2-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox2-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox2-prev {
	left: 0;
}

.fancybox2-next {
	right: 0;
}

.fancybox2-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox2-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox2-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox2-nav:hover span {
	visibility: visible;
}

.fancybox2-tmp {
	position: absolute;
	top: -9999px;
	left: -9999px;
	visibility: hidden;
}

/* Overlay helper */

.fancybox2-lock {
	overflow: hidden;
}

.fancybox2-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('fancybox_overlay.png');
}

.fancybox2-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox2-lock .fancybox2-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox2-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox2-opened .fancybox2-title {
	visibility: visible;
}

.fancybox2-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox2-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox2-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox2-title-inside-wrap {
	padding-top: 10px;
}

.fancybox2-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

upload your photos in a folder /img/NAME_I_WANT/
in the CMS page (product description, too) add html code like this (write your own URL and change it as you like):

<script type="text/javascript" src="http://MY_DOMAIN.EXT/js/jquery/plugins/fancybox/jquery.fancybox2.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('.fancybox2-buttons').fancybox2({
openEffect  : 'elastic',
closeEffect : 'elastic',
prevEffect : 'elastic',
nextEffect : 'elastic',
closeBtn  : true,
afterLoad : function() {
this.title = (this.index + 1) + ' ● ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
});
// ]]></script>
<p style="text-align: center">
<a class="fancybox2-buttons" href="http://MY_DOMAIN.EXT/img/NAME_I_WANT/PICT_NAME_1.jpg" data-fancybox2-group="button"><img src=http://MY_DOMAIN.EXT/img/NAME_I_WANT/PICT_NAME_1.jpg" alt="SOMETHING" height="100" /></a>
<a class="fancybox2-buttons" style="display: none;" href="http://MY_DOMAIN.EXT/img/NAME_I_WANT/PICT_NAME_2.jpg" data-fancybox2-group="button"> </a>
<a class="fancybox2-buttons" style="display: none;" href="http://MY_DOMAIN.EXT/img/NAME_I_WANT/PICT_NAME_3.jpg" data-fancybox2-group="button"> </a>
ETC ETC ETC
</p>

You can add all photos you like.

jquery.fancybox2.js.tar.gz

vekia · October 28, 2013

thank you for your solution im going to test it

viger · October 28, 2013

Thanks vekia,

a "legend test" is the best

marcellolaforgia · July 18, 2014

You can enter fancybox for the newsletter module? I wish that every time a user subscribes to the newsletter appears a central element in the page. Apparently, you should use fancybox: you could you tell me how to add the code? I tried, but it gave me a blank page.

Thank you

Thierry Création · August 3, 2015

no worries

i'm patient person

ok, so if you want to add fancybox to editorial module, we have to edit module .php file (modules/editorial/editorial.php)

we have to add fancybox libraries to homepage.

you've got there function:
	public function hookDisplayHeader()
	{
	    $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
	}
change it to:
public function hookDisplayHeader(){
  $this->addJqueryPlugin('fancybox');
  $this->context->controller->addCSS(($this->_path).'editorial.css', 'all');
  $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
}
open editorial.tpl file and add there this code:
{literal}
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>
{/literal}
now you can use fancybox plugin !

how? you can read here: adding fancybox to picutres and other links

you've got there full guide - step by step - how to add fancybox effect in tinymce editor.

start from:

Hi Vekia,

Could give you the equivalent code for PrestaShop 1.6.0.9?

Thank you

[SOLVED] fancybox effect in editorial module

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in