Javascript-форум - Как заставить fancybox вспывать не по клику а по событию onload ???

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как заставить fancybox вспывать не по клику а по событию onload ??? (https://javascript.ru/forum/dom-window/40167-kak-zastavit-fancybox-vspyvat-ne-po-kliku-po-sobytiyu-onload.html)

Как заставить fancybox вспывать не по клику а по событию onload ???

Модальное окно fancybox с iframe контентом внутри (под iframe я подразумеваю что в модальном окне будет группа подписчиков вконтакте) должно всплывать через заданный промежуток времени и независимо хоть перезапустили браузер или выключили компьютер все равно должен в куках запомнить когда его первый раз запустили и отсчитывать например 15сек или 24 часа. По умолчанию это модальное окно fancybox с iframe контентом внутри (чтобы был именно iframe кон-т в модальном окне нужно давать класс iframe ссылке <a class="iframe" href="http://www.example">This goes to iframe</a>) только оно всплывает по клику и еще нужно привязывать к ссылке, а мне нужно чтобы модальное окно всплывало самостоятельно не опираясь ни на какую ссылку с каким нибуть там классом. Таким образом я хочу подталкивать посетителей ненавязчиво подписаться в группу сайта вконтакте.

var date = new Date();

if( ! $.cookie('fancybox_show')  ){
// запускаем fancybox

$.cookie('fancybox_show', date.getTime(),{ path: "/", expires: 1}); // кука будет жить 24 часа
// date.getTime() - не обязательно даже, просто на всякий знать когда был запущен последний раз
}

Смотри на сайте fancybox'а API. Там что-то вроде

$.fancybox.open(null, {url: '//vk.com'});

Цитата:

Сообщение от ОлегА (Сообщение 264294)

var date = new Date();

if( ! $.cookie('fancybox_show')  ){
// запускаем fancybox

$.cookie('fancybox_show', date.getTime(),{ path: "/", expires: 1}); // кука будет жить 24 часа
// date.getTime() - не обязательно даже, просто на всякий знать когда был запущен последний раз
}

ОлегА я создам страницу там в какой нибуть папке, если чтобы модальное окно всплывало по клику с фреймом внутри то нужно было создавать ссылку с классом iframe иии в href указывать путь к созданной странице html в которой сгенерированный скрипт виджета группы вконтакте, а теперь в вашем коде где прописывать путь к странице с контентом для вывода в модальном окне??? ведь ссылка же теперь ненужна, и еще как в вашем коде менять промежуток с 24 часов жизни куки на 15сек и чтобы после перезапуска браузера сохранялся отсчет времени после первого захода на сайт ???

1. // запускаем fancybox - пишете вместо этого ваш скрипт с запуском fancybox я писать его вместо вас не буду

2.

Цитата:

Сообщение от ilyas->

и еще как в вашем коде менять промежуток с 24 часов жизни куки на 15сек

var sec = 15;
date.setTime(date.getTime() + (sec  * 1000));

$.cookie('fancybox_show', date.getTime(),{ path: "/", expires: date});

Цитата:

Сообщение от ОлегА (Сообщение 264303)

1. // запускаем fancybox - пишете вместо этого ваш скрипт с запуском fancybox я писать его вместо вас не буду

2.

var sec = 15;
date.setTime(date.getTime() + (sec  * 1000));

$.cookie('fancybox_show', date.getTime(),{ path: "/", expires: date});

У меня такой еще вопрос если у меня уже используется одно модальное окно но оно запускается с клика по ссылке а вот это уже вторым будет, не будет ли так что оба сразу или по очереди запустятся??? тот что по клику должен запускаться только с клика

var date = new Date();

if( ! $.cookie('fancybox_show')  ){
// запускаем fancybox

var sec = 5;
date.setTime(date.getTime() + (sec  * 1000));

$.cookie('fancybox_show', date.getTime(),{ path: "/personal/carts/content.html", expires: date});

}

вставил вот такую запись в body, что то модальное окно не всплыло через 5сек

и после вставки такой записи

var date = new Date();

if( ! $.cookie('fancybox_show')  ){
// запускаем fancybox

$.cookie('fancybox_show', date.getTime(),{ path: "/personal/carts/content.html", expires: 1}); // кука будет жить 24 часа
// date.getTime() - не обязательно даже, просто на всякий знать когда был запущен последний раз
}

тоже после первого обновления страницы не всплывает модальное окно ???

модальное окно которое работает по клику у меня вот инициализируется

$(document).ready(function() {
$("a.gallery, a.iframe").fancybox();
$("a.modalbox").fancybox(
{ 
"frameWidth" : 500, 
"frameHeight" : 500 
});
$("a.gallery2").fancybox(
{ 
"padding" : 0, // отступ контента от краев окна
"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
"zoomOpacity" : false,	// изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 1000,	// скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" : 1000,	// скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : 500,	 // ширина окна, px (425px - по умолчанию)
"frameHeight" : 500, // высота окна, px(355px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
"overlayOpacity" : 0.5,	 // Прозрачность затенения 	(0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE  закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE 
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу 

}); 
$("#menu a, .anim").hover( function() {
$(this).animate({"paddingLeft" : "10px"}, 300)},
function() {$(this).animate({"paddingLeft" : "0"}, 300);
});
$("a.iframe").fancybox(
{ 
"frameWidth" : 420,	 // ширина окна, px (425px - по умолчанию)
"frameHeight" : 420 // высота окна, px(355px - по умолчанию) 
});
});

значит дублирую этот код и куда там ваш нужно вставлять???

var date = new Date();
var mSec = 5*1000;

function show_fancybox(){
  if( ! $.cookie('fancybox_show')  ){
    // запускаем fancybox
   
   date.setTime(date.getTime() +mSec);
   
   $.cookie('fancybox_show', date.getTime(),{ path: "/personal/carts/content.html", expires: date});
  }
}

$(function(){

   show_fancybox()

   setInterval(show_fancybox, mSec)

})

Ку-ку, ёпта! Открывай либо через API либо триггери клик по отфэнсибоксенному элементу через .click()

Цитата:

Сообщение от danik.js (Сообщение 264316)

Ку-ку, ёпта! Открывай либо через API либо триггери клик по отфэнсибоксенному элементу через .click()

А к какому элементу то привязывать? ведь сссылка уже не нужна, .fancybox() кому задавать?

Вообщем сделал так просто в конец вставил код Олега уже имеющегося одного модального окна и опять ничего не выскакивает (((

$(document).ready(function() {
$("a.gallery, a.iframe").fancybox();
$("a.modalbox").fancybox(
{ 
"frameWidth" : 500, 
"frameHeight" : 500 
});
$("a.gallery2").fancybox(
{ 
"padding" : 0, // отступ контента от краев окна
"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
"zoomOpacity" : false,	// изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 1000,	// скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" : 1000,	// скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : 500,	 // ширина окна, px (425px - по умолчанию)
"frameHeight" : 500, // высота окна, px(355px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
"overlayOpacity" : 0.5,	 // Прозрачность затенения 	(0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE  закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE 
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу 

}); 
$("#menu a, .anim").hover( function() {
$(this).animate({"paddingLeft" : "10px"}, 300)},
function() {$(this).animate({"paddingLeft" : "0"}, 300);
});
$("a.iframe").fancybox(
{ 
"frameWidth" : 420,	 // ширина окна, px (425px - по умолчанию)
"frameHeight" : 420 // высота окна, px(355px - по умолчанию) 
});

------------------------------------------------------
//Код Олега
var date = new Date();
var mSec = 5*1000;

function show_fancybox(){
  if( ! $.cookie('fancybox_show')  ){
    // запускаем fancybox
   
   date.setTime(date.getTime() +mSec);
   
   $.cookie('fancybox_show', date.getTime(),{ path: "/personal/carts/content.html", expires: date});
  }
}

$(function(){

   show_fancybox()

   setInterval(show_fancybox, mSec)

})
------------------------------------------------------------------

}

);

ilyas->, вылазь уже из танка. Трудно было нагуглить сайт/репозиторий fancybox?
https://github.com/fancyapps/fancyBox в конце идут примеры программного вызова.

Напишите пожалуйста этот дура-й код я уже 3 день не могу сделать это всплывающее модальное окно, тут всего то осталось правильно инициализировать fancybox, я просто в js не силен, как правильно вызвать это окно при onload и с применением механизма куков ?

Цитата:

Сообщение от ilyas->

я просто в js не силен

Дык там прям примеры кода есть. В английском чтоли тож не силен? Да даже без его знания можно догадаться че где.

покажи, да еще и напиши, вам так то тогда в раздел работа.

Ruslan_xDD не поможете ???

Да елы палы где здесь ошибка я же правильно сделал

$(document).ready(function(){


function fancybox_show()
{
 


    $(".gallery3").fancybox({
                    autoSize: false,
                    autoDimensions: false,
                    width: 416,
                    height: 416,
                    fitToView: false,
                    padding: 0,
                    
                    href: '/personal/why_we/vk.html',
                    type: 'iframe'
                });
 //$(".gallery3").trigger('click');
 $(".gallery3").click();

}


var date = new Date();
var mSec = 5*1000;

function show_fancybox(){


  if( ! $.cookie('fancybox_show')  ){
    // запускаем fancybox

       
   date.setTime(date.getTime() +mSec);
   
   $.cookie('fancybox_show', date.getTime(),{ path: "/", expires: date});
  }
}

$(function(){

   show_fancybox()

   setInterval(show_fancybox, mSec)

})
});

Да елы палы где здесь ошибка я же правильно сделал

function alert_show() {
    alert('Hello World');
}

// запускаем alert

Подсказа: функцию мало объявить. Ее ведь нужно еще и запустить, не?

alert везде и по всякому ставил, значит не запускается только из функции fancybox_show() ее вызов идет в show_fancybox

Проблема в show_fancybox(), из нее не запускается fancybox_show()

$(document).ready(function(){


// запускаем alert


function fancybox_show()
{
 
alert('Hello World');
/*
    $(".gallery3").fancybox({
                    autoSize: false,
                    autoDimensions: false,
                    width: 416,
                    height: 416,
                    fitToView: false,
                    padding: 0,
                    
                    href: '/personal/why_we/vk.html',
                    type: 'iframe'
                });*/
 //$(".gallery3").trigger('click');
 //$(".gallery3").click();

}


var date = new Date();
var mSec = 2*1000;



function show_fancybox(){


  if( ! $.cookie('fancybox_show')  ){
    // запускаем fancybox

       
   date.setTime(date.getTime() +mSec);
   
   $.cookie('fancybox_show', date.getTime(),{ path: "/", expires: date});
  }
}

$(function(){

   show_fancybox()

   setInterval(show_fancybox, mSec)

})

});

где тут проблема в show_fancybox() ???

Человек. Видишь ниже кнопочку "Запустить"? Нажми на нее.

function fancybox_show() {
    alert('Hello World');
}

Что произошло? Алерт появился? Если нет, то почему?
Пока не ответишь на этот вопрос ты не решишь свою проблему.