I using fancybox in my project
Here is code, how
$(".hotel_gallery").attr("data-fancybox", "quick-view")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow(): void {
this.title = this.src;
},
afterLoad(instance, current ){
if ( instance.group.length > 1 && current.$content ) {
current.$content.append('<a data-fancybox-next class="button-next" href="javascript:;">→</a><a data-fancybox-previous class="button-previous" href="javascript:;">←</a>');
}
current.$content.append('<a data-fancybox-close class="button-close" href="javascript:;">×</a>');
},
helpers: { title : { type : "inside" } }
});
It working great. But when I close fancybox, I have this error in console
Cannot read property 'currentHash' of undefined
But I can't understood why?
We are loading fancybox css file dynamically after page load and try to open fancybox with overlay active and custom html content.
Sometimes overlay doesn't appear. If we try to open fancybox with a delay, probability of getting no overlay is decreasing, but it is not totally gone away.
I have already created an issue for this problem: https://github.com/fancyapps/fancyBox/issues/1126
That's how we initialize fancybox:
var fancyboxParams = {
minHeight: 10,
width: params.width || 'auto',
height: params.height || 'auto',
autoSize: false,
autoWidth: params.width ? false : true,
autoHeight: params.height ? false : true,
autoHide: params.autoHide,
topRatio: params.topRatio || topRatio,
leftRatio: params.leftRatio || leftRatio,
title: title,
helpers: {
title: (title && params.windowStyle !== 'seamless') ? {
type: 'inside',
position: 'top'
} : null,
overlay: (params.overlay != "false") ? {} : null
},
content: notificationBody,
fixed: false, // HADDITION - scroll with the page 16.10.2015
wrapCSS: (params.cssClass || "") + " " + "fancybox-" + (params.windowStyle || "seamless"),
beforeShow: function () {
cssCode && $('<style />').html(params.cssCode).prependTo(this.outer);
try {
javascriptCode && eval(javascriptCode);
beforeShow.call(this); // change context
}
catch (err) {
$.fancybox.close(true);
}
},
afterClose: function () {
$(".fancybox-segmentify").remove();
}
};
if (params.isModal == 'true') {
fancyboxParams.closeBtn = false;
fancyboxParams.closeClick = false;
fancyboxParams.keys = null;
if (fancyboxParams.helpers.overlay) {
fancyboxParams.helpers.overlay.closeClick = false;
}
}
$.fancybox(fancyboxParams);
I'd like to disable onload the popup and show it only after clicking an url link (onlick="echoSec()" ).
I did the 2nd step, so after pressing the button it works good, but it shows at the page load too. I don't want that.
There is no onload function in the code.
Could you help me?
/*
* Project: jQuery echoSoc - Social Sharer init
* Description: echoSoc is light weight jQuery Plugin for Social Shares.
* Author: dvL-den
* License: Copyrights dvL-den. All rights reserved.
*/
;(function ($, window, document, undefined) {
// Create the defaults once
var pluginName = 'echoSoc';
var defaults = {
title : 'echoSoc Social Sharer',
facebook_button : true,
facebook_url : window.location.origin,
twitter_button : true,
twitter_url : window.location.origin,
twitter_message : 'echoSoc Social Sharer Tweet Message!',
google_button : true,
google_url : window.location.origin,
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
};
// The actual plugin constructor
function EchoSoc(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
EchoSoc.prototype = {
init: function () {
// Plugin HTML Structure
$('body').append( //-->
'<div class="echoSoc_wrap">' +
'<div class="echoSoc_frame">' +
'<div class="echoSoc_title" />' +
'<div class="echoSoc_content">' +
'<div class="echoSoc_description" />' +
'<div class="echoSoc_countdown" />' +
'</div>' +
'</div>' +
'<div class="echoSoc_overlay" />' +
'</div>'
// <--
);
// Title as Text or as Image
$('.echoSoc_title').html(this.options.title);
// Countdown Structure
if (this.options.timeout > 0) {
$('.echoSoc_countdown').html(this.options.message + ' or wait <span />' + ' ' + 'seconds.');
} else {
$('.echoSoc_countdown').html(this.options.message);
}
$('<div />')
.addClass('echoSoc_buttons')
.appendTo('.echoSoc_description');
this._echoTrigger();
if (this.options.timeout > 0)
this._echoTimeout();
if (this.options.close) {
$(document).on('keydown', function (e) {
if (e.keyCode == 27) {
$('.echoSoc_wrap').fadeOut();
}
});
$('.echoSoc_overlay').css('cursor', 'pointer');
$('.echoSoc_overlay').on('click', function () {
$('.echoSoc_wrap').fadeOut();
});
}
},
_echoTrigger: function () {
if (!$.cookie('echoSoc')) {
$('.echoSoc_wrap').show();
$('.echoSoc_frame').fadeIn(500);
$('.echoSoc_overlay').fadeIn(100);
this._echoCenter();
this._echoSwitcher();
this._echoAsync();
this._echoEvents();
}
},
_echoSwitcher: function () {
if (this.options.facebook_button) {
$('<div />')
.addClass('echoFacebook')
.css({ 'width': '48', 'height': '20' })
.appendTo('.echoSoc_buttons');
$('.echoFacebook').append('<fb:like href="' + this.options.facebook_url + '" send="false" layout="button_count" width="50" show_faces="false" colorscheme="light"></fb:like>');
}
if (this.options.twitter_button) {
$('<div />')
.addClass('echoTwitter')
.css('width', '58')
.appendTo('.echoSoc_buttons');
$('.echoTwitter').append('Tweet');
}
if (this.options.google_button) {
$('<div />')
.addClass('echoGoogle')
.css('width', '32')
.appendTo('.echoSoc_buttons');
$('.echoGoogle').append('<g:plusone size="medium" href="' + this.options.google_url + '" callback="googleCB"></g:plusone>');
}
var socButtons = $('.echoSoc_buttons').find('div').length,
socNumber = $.trim(socButtons).slice(0, 1),
socSort_one = $('.echoSoc_buttons > div').eq(0),
socSort_two = $('.echoSoc_buttons > div').eq(1),
socSort_three = $('.echoSoc_buttons > div').eq(2),
buttons_wrap = $('.echoSoc_buttons');
if (socNumber == 3) {
buttons_wrap.css('width', '85%');
socSort_one.add(socSort_three).css('display', 'inline-block');
socSort_one.add(socSort_three).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_two.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_three.css({ 'right': '0' });
}
else if (socNumber == 2) {
buttons_wrap.css('width', '50%');
socSort_one.add(socSort_two).css('display', 'inline-block');
socSort_one.add(socSort_two).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_two.css({ 'right': '0' });
}
else if (socNumber == 1) {
buttons_wrap.css('width', '50%');
socSort_one.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
}
else {
buttons_wrap
.css('text-align', 'center')
.text('Error! Enable at least one Social Button!');
}
},
_echoTimeout: function () {
$('.echoSoc_countdown')
.find('span')
.addClass('timer')
.text(this.options.timeout);
var countdown = $('.timer'),
seconds = $('.timer').text(),
that = this,
timer = setInterval(function () {
countdown.text(--seconds);
if (seconds === 0) {
clearInterval(timer);
that._echoClose();
}
}, 1000);
},
_echoDestroy: function () {
$('.echoSoc_wrap').fadeOut(500);
},
_echoClose: function () {
this._echoDestroy();
if (this.options.reopen_task) {
var that = this;
setTimeout(function () {
$('.echoSoc_wrap').fadeIn(500);
that._echoTimeout();
that._echoCenter();
}, this.options.reopen_time * 1000);
}
},
_echoCenter: function () {
function reposition () {
var str_wrap = $('.echoSoc_wrap'),
str_frame = $('.echoSoc_frame');
str_frame.css({
top: Math.round(
str_wrap.height() / 2 -
str_frame.outerHeight() / 2 -
parseInt(str_frame.css('margin-top'), 10)
),
left: Math.round(
str_wrap.width() / 2 -
str_frame.outerWidth() / 2 -
parseInt(str_frame.css('margin-left'), 10)
)
});
}
if ( $('.echoSoc_wrap').length ) {
reposition();
$(window).on('resize', function () {
reposition();
});
}
},
_echoAsync: function () {
if (this.options.twitter_button) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js', function () {
twttr.ready(function (twttr) {
twttr.events.bind("tweet", twitterCB);
});
});
}
}
if (this.options.facebook_button) {
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
} else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
}
if (this.options.google_button) {
if (typeof (gapi) != 'undefined') {
$(".g-plusone").each(function () {
gapi.plusone.render($(this).get(0));
});
} else {
$.getScript('https://apis.google.com/js/plusone.js');
}
}
},
_echoEvents: function () {
var cookie_sum = parseInt(this.options.cookie_expire, 10);
window.fbAsyncInit = function () {
FB.Event.subscribe('edge.create', function(response) {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
});
};
googleCB = function() {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
twitterCB = function () {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new EchoSoc(this, options));
}
});
};
})(jQuery, window, document);
my html is only :
<a href="" onclick="echoSoc()" class="box_single_ability">
And this js is also included in index.html file
<script>
$(document).echoSoc({
title : '<h3>title</h3>',
facebook_button : true,
facebook_url : 'https://www.facebook.com/',
twitter_button : true,
twitter_url : 'twitterurl/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'googleurl/',
timeout : 2,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 1,
cookie_expire : 30,
close : false
});
</script>
It has to do with when this.echoTrigger(); is being called. So, either remove that from init (not sure if that's the behaviour you want), or don't do your initialization step (the html snippet you posted) until a click happens. Currently init is being called
I am developer of this one and I know it's not built to function this way. However you can accomplish that by removing plugin call from your page(s) and move it within click event of desired button as triggerer.
HTML
<button type="button" id="echoSoc-trigger">Trigger Plugin</button>
jQuery
$('#echoSoc-trigger').on('click', function () {
$(document).echoSoc({
title : '<h3>CPA Elites - Viral Plugin</h3>',
facebook_button : true,
facebook_url : 'http://dvL-den.net/',
twitter_button : true,
twitter_url : 'http://dvL-den.net/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'http://dvL-den.net/',
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
});
});
This way it will work fine and it will call the plugin only when you click specified button, obviously.
I m using jquery fancy box popup window....for pop up....
But when i submit ...my form that redirect in same window.....in popup..
I want to redirect my page to another open window....not in same popup...
I used target blank ..but it work every..time on click...i need to redirect when i got my login is done....
I m creating my project in codeigniter.....
my controller....
public function login()
{
if ( $this->input->post('action') )
{
$this->form_validation->set_rules('user_name', 'Username','required|valid_email');
$this->form_validation->set_rules('password', 'Password', 'required|');
if ($this->form_validation->run() == TRUE)
{
$username = $this->input->post('user_name');
$password = $this->input->post('password');
$rember = ($this->input->post('remember')!="") ? TRUE : FALSE;
if( $this->input->post('remember')=="Y" )
{
set_cookie('userName',$this->input->post('user_name'), time()+60*60*24*30 );
set_cookie('pwd',$this->input->post('password'), time()+60*60*24*30 );
}
else
{
delete_cookie('userName');
delete_cookie('pwd');
}
$this->auth->verify_user($username,$password);
if( $this->auth->is_user_logged_in() )
{
if( $this->session->userdata('ref')!="" )
{
redirect($this->session->userdata('ref'),'');
}
else
{
redirect('members/myaccount','refresh');
}
}
else
{
$this->session->unset_userdata(array("ref"=>'0'));
$this->session->set_userdata(array('msg_type'=>'error'));
$this->session->set_flashdata('error',$this->config->item('login_invalid'));
redirect('users/login', '');
}
}
else
{
$data['heading_title'] = "Login";
$this->load->view('users_login',$data);
}
}
else
{
$data['heading_title'] = "Login";
$this->load->view('users_login',$data);
}
}
$(window).load(function (e) {
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
})
});
$(".login").fancybox({
'width': 367,
'height': 600,
'autoScale': false,
'type': 'iframe'
});
$(".fotget").fancybox({
'width': 425,
'height': 286,
'autoScale': false,
'type': 'iframe'
});
$(".profile").fancybox({
'width': 700,
'height': 505,
'autoScale': false,
'type': 'iframe'
});
$(".details").fancybox({
'width': 400,
'height': 200,
'autoScale': false,
'type': 'iframe'
});
$(".enquiry").fancybox({
'width': 359,
'height': 450,
'autoScale': false,
'type': 'iframe'
});
$(".contact").fancybox({
'width': 317,
'height': 353,
'autoScale': false,
'type': 'iframe'
});
$(".map").fancybox({
'width': 425,
'height': 355,
'autoScale': false,
'type': 'iframe'
});
});
the reason this is happening is because your popup content is iframed... you could send a message back to the parent window to do the redirect in the main browser window, a google on iframe communication to it's parent window should get you the info you need to do this, however this all hinges on you having control of the page being iframed!
EXAMPLE:...where ever your redirects are...replace with...
echo "<script type=\"text/javascript\">window.top.postMessage('logged_in', '*');</script>";
exit; //make sure this is here, to stop php execution!!
Then in your parent window (the one intitializing the fancyboxes...)
window.onmesage = function(e){
if(e.data == 'logged_in'){
window.location.href = 'http://pathtopage';
}
}
NOTE: 'logged_in' could also be json string
'{ "action":"something","redirect":"http://url" }'
just use
JSON.parse(e.data);
in the listener to extract the json object
EDIT: well crap... I misunderstood your question... I don't see the element you are using to submit the form... but generally you would do e.preventDefault(); on that element before letting it redirect anywhere....so for example you are using an anchor tag...
$('a.form-submit').on('click',function(e){
e.preventDefault();
var redir = $(this).attr('href');
var formData = $('#theform').serialize();
$.post('http://formhandler/route',formdata,function(){
//open a new window...
window.open(redir);
//or send data back to parent window...
window.top.postMessage(redir,'*');
});
});
Not sure what the catch is but in FF the video keeps playing. All other browsers close when you click outside of fancybox... the embeded Youtube Video will stop playing as well. Firefox seems to ignore this. What am I doing wrong?
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
});
});
$("#fancy_content").empty();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0,
opacity: 0.3,
css: {'background-color': '#cdc3b7'}
}
}
});
});
You don't have to initialize the same .fancybox selector twice. In other words, you don't have to do :
$(".fancybox").fancybox({
// options
});
... and later :
$(".fancybox").fancybox();
#fancy_content is not a valid fancybox selector (at least not for v2.x)
$("#fancy_content").empty(); is outside of the .ready() method. Anyway is useless as explained above.
callbackOnClose is not a valid API option (use afterClose instead if needed)
This script works perfectly fine cross-browser :
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
/*
// yo don't need this
,
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
*/
});
... as you can see in this JSFIDDLE. Make sure you test it with FF (works fine with my FF v17.0.1)