Fancybox - use on any page

[jaimeweb]

Hi,

I cannot find anywhere a solution to add a link anywhere on the site to open in a fancybox. Exactly like the terms and conditions box.

 

This should be so simple, yet every topic I have came across there hasn't been a solution.

 

Can anyone help please.

[jaimeweb]

Anyone?

[jaimeweb]

Bump?

[aneheli]

I have this same problem

[vekia]

in this case you have to change the frontcontroller, in the set media function you will have to append the fancybox js files.

$this->addjqueryPlugin('fancybox');
$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'all');

 

more info here: http://www.prestashop.com/forums/index.php?/topic/197370-fancybox-for-cms-pages-ps-152/page__view__findpost__p__1322036

[aneheli]

in this case you have to change the frontcontroller, in the set media function you will have to append the fancybox js files.

$this->addjqueryPlugin('fancybox');
$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'all');

 

more info here: http://www.prestasho...ost__p__1322036

I saw this clue this is working but when I use script with popup form from fancybox official page is not working on any product page or order summary

 

<script type="text/javascript">
$(document).ready(function() {
 $("#tip5r").fancybox({
 'scrolling' : 'no',
 'titleShow' : false,
 'onClosed' : function() {
  $("#login_errorm").hide();
 }
});

$("#login_formm").bind("submit", function() {

 if ($("#login_namem").val().length < 1 || $("#login_passm").val().length < 1) {
	 $("#login_errorm").show();
	 $.fancybox.resize();
	 return false;
 }

 $.fancybox.showActivity();
 $.ajax({
  type : "POST",
  cache : false,
  url  : "/data/login.php",
  data : $(this).serializeArray(),
  success: function(data) {
   $.fancybox(data);
  }
 });
 return false;
});


$("a.#tip5r").trigger("click");
});
</script>

[vekia]

can you show the browser console log?

moreover, try to use {literal} {/literal} tags - it's necessary especially when you use code with brackets

[aneheli]

THX Veika casching was the problem, in this moment its working fine

[BluTiGeS]

HEy Guys jsut saw this topic by googling.

 

I have already deveolped a Module for Presta 1.5 which adds a fancybox to all pages.

 

 

Please find it here attached.

 

Regards

BluTiGeS

addfancybox_1_5_x.zip

addfancybox_1_4_x.zip

Edited November 18, 2013 by BluTiGeS (see edit history)

[vekia]

nice one thank you for sharing

[ssmgopi]

Dear All,

I need to display the login popup only once and should open again only after the browser is closed and reopened. The problem I face is the pop-up is displayed each time any page is refreshed. I tried by enabling cookie with javascript. but session is not getting cleared and the popup is displaying again and have to clear the browsing history inorder to . Anyone help me to sort-out this issue...

 

1)i placed code in following path theme\footer.tpl

 

{if $page_name != 'authentication'}
{if not $logged}
{literal}
<script type="text/javascript">
$(document).ready(function(){
$('#popme').click(function(e){
e.preventDefault();
$.fancybox({
'scrolling' : 'no',
'type' : 'inline',
'autoSize' : false,
'width' : 611,
'height' : 450,
'href' : '#popupLogin'
});
return false;
});

     $.fancybox({
'scrolling' : 'no',
'type' : 'inline',
'autoSize' : false,
'width' : 611,
'height' : 450,
'href' : '#popupLogin'
});

});

{/literal}
</script>
{/if}

<div style="display:none"  >
<div id="popupLogin" >
<div id="popuplogincontainer" >
<div id="popuploginbox" >
<form action="{$link->getPageLink('authentication', true)|escape:'html'}" method="post" id="login_form" class="popuploginform">
<fieldset>
<h2 style="color:#821210">Login</h2><br />
<div class="form_content clearfix">
<p class="text">
<label for="email">{l s='Email address  :'}</label>
<span><input type="text" id="email" name="email" value="" class="account_input" style="margin-left: 31px;"/></span>
</p>
<p class="text">
<label for="passwd">{l s='Password  :'}</label>
<span><input type="password" id="passwd" name="passwd" value="" class="account_input" style="margin-left: 56px;"/></span>
</p>
<p class="lost_password"><a href="{$link->getPageLink('password')|escape:'html'}" title="{l s='Recover your forgotten password'}" rel="nofollow">{l s='Forgot your password?'}</a></p>
<p class="submit">
<input type="hidden" class="hidden" name="back" value="history" /> <input type="submit" id="SubmitLogin" name="SubmitLogin" class="button" value="{l s='Sign In'}"style="margin-left: 74px;" />
</p>
</div>
</fieldset>
<h2 style="color:#821210">Create an account</h2><br />
                        <p class="title_block">No account yet ? Please register here!</p><br />
                        <div style="display:none" id="create_account_error" class="error"></div>
                        <div class="form-group text">
                            <label for="email_create" class="col-sm-4 control-label" style="; width:113px">Email address : </label>
                            <div class="col-sm-8">
                                <input type="text" class="account_input form-control" value="" name="email_create" id="email_create" style="margin-left: 117px; margin-top: -26px; width: 154px; height: 23px; padding:0px;">
                            </div>    
                        </div><br />
                        <p class="submit">
                            <input type="hidden" value="my-account" name="back" class="hidden">                            <input type="submit" value="Sign Up" class="button" name="SubmitCreate" id="SubmitCreate" style="margin-left: 215px;">
                            <input type="hidden" value="Create an account" name="SubmitCreate" class="hidden" >
                        </p>
                  </form>
</div>
<div id="popuploginbox1" style="width:303px; height:450px;" >
<img src="img/images.jpg" width="303" height="450"   />
</div>
</div>
</div>
</div>

 

2)path--theme\css\ global.css

 

#popupLogin { padding:0;margin: 0; width: 611px; height:450px; background:url(../../../img/bg.jpg) no-repeat;}
#popuplogincontainer { width:100%; overflow: hidden;}
#popuploginbox { width:50%; float: right; background-color:transplant; }

#popuploginbox1 { width:50%; float: left; background-color: #ffffff;}

#popuploginbox hr { margin-bottom: 10px; border: 0; border-top: 1px solid #006699;border-bottom: 1px solid #ccc;}
.popuploginform { padding: 10px 0 0 10px;width:303px;height: 450px;}

.popuploginform1 { padding: 10px 0 0 10px;width:303px;height: 450px;}

 

3)path--theme\module\blockuserinfo.tpl

<a href="#" title="{l s='Login to your customer account' mod='blockuserinfo'}" id="popme" class="login">Login</a>