Only start magnific popup when body has specific class - javascript

I am working with magnific popup and want to show a video when someone is coming to the side (including not showing it everytime a user comes to the site, hence the localStorage part). This all works and here is the code:
(
function($) {
$(window).load(function () {
if(localStorage.getItem('popState') != 'shown'){
setTimeout(function(){
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=blabla'
},
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
}
}
}
});
}, 5000);
localStorage.setItem('popState','shown')}
});
})
(jQuery);
Now, I want to show the popup only on a specific page (when a specific language is selected). I noticed that the body tag changes the class when a user selects a language, example:
<body class="lang-en-EN">
or
<body class="lang-de-DE">
Is there a way to fire the popup, when the class changes from language EN to DE?
Update: Here is the Fiddle

In the if-statement you already have, just check for the class as well, adding (e.g.) $(body).hasClass("lang-en-DE"):
(function($) {
$(window).load(function () {
if($(body).hasClass("lang-en-DE") && localStorage.getItem('popState') != 'shown'){
setTimeout(function(){
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=blabla'
},
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
}
}
}
});
}, 5000);
localStorage.setItem('popState','shown')}
});
})
(jQuery);

Related

MagnificPopup not working on first click using on()

I have delegated to $(document) a click method for a dynamically-added element with a class of .popup-youtube. the only thing is, i just can't get the popup to work properly.
Here's my script:
$(this).on("click", ".popup-youtube", function(e){
// prevent default action
e.preventDefault();
$(this).magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
patterns: {
youtube: {
index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
id: 'v=', // String that splits URL in a two parts, second part should be %id%
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: '%id%&output=embed'
}
},
srcAction: 'iframe_src'
}
});
});
Anyone have any tips on this? your help would gladly be appreciated.
Try this - chaining the open method after you are initialising the popup
$(document).on("click", ".popup-youtube", function(e){
// prevent default action
e.preventDefault();
$(this).magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
patterns: {
youtube: {
index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
id: 'v=', // String that splits URL in a two parts, second part should be %id%
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: '%id%&output=embed'
}
},
srcAction: 'iframe_src'
}
}).magnificPopup('open');
});

How to make FancyBox auto start on page load and auto hide after 15 seconds?

I'm using FancyBox 2.1.5.
I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.
First task is not a problem with:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
But how to set a counter and autohide?
I'm thinking of following:
$(document).ready(function() {
$('.fancybox').fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'Title'
}
], {
padding : 0
});
$('.fancybox').fancybox({
afterShow: function(){
setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
clearTimeout( );
},
});
});
Is this correct?
Thanks in advance for your help!
I think you should rather do
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
},
afterClose: function () {
clearTimeout();
}
});
});
See JSFIDDLE
EDIT :
As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.
$(document).ready(function () {
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: 'Title'
}], {
padding: 0,
afterShow: function () {
setTimeout(function () {
$.fancybox.close();
}, 15000);
}
});
});
See updated JSFIDDLE
You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds

Magnific Popup - Scroll using the Ajax popup

I know the lightbox gallery you can scroll left and right and view picture after picture but is this possible with the ajax popup? I don't believe you can assign a delegate to allow this functionality.
Examples here.
Yep, it's possible with ajax too, you can even mix ajax with another content type.
<button class="link">Click me</button>
<script>
$('.link').magnificPopup({
items: [
{
src: 'ajax-file.html'
},
{
src: 'ajax-file-2.html'
},
{
src: 'http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg',
type: 'image'
}
],
type: 'ajax',
gallery: {
enabled: true
}
});
</script>

Pass variable in JS

First my code:
Html
<div class="product_image m2" id="m2"><a href="#" id="10" class='multi2'>test..</a></div>
JS
$(document).ready(function(){
$("#m2 a").bind("click", function() {
var value = $( this ).attr( 'id' );
alert(value);
return false;
});
if ($(".multi2").length > 0){
$(".multi2").yoxview({
cacheImagesInBackground:true,
skin: "top_menu",
lang: "hu",
images: [
{ media: { src: 'images/galeria/cella/image01'+value+'.JPG', title: 'Cella hegesztő' }},
{ media: { src: 'images/galeria/cella/image015.JPG', title: 'Cella hegesztő' }},
{ media: { src: 'images/galeria/cella/image013.JPG', title: 'Cella hegesztő' }},
]
});
}
});
So, I use Yoxview. Multi2 class define the images and when user click on link (or thumbnail). lightbox shown and slideshow start.
The slideshow start every time from the first image defined in JS. I would like to change this so i would like to pass the id of href inside in m2 div to the image list.
Unfortunately I can't do this. I try this code but with this the script crash. How can I pass VALUE to image list?
Try code below, this probably will work, but not a good solution.
EDIT
By the way as Kanishka mentioned its not legal to start ID with a number. You can store photo id as an custom attribute <a href="#"... data-photoid="2" ... /> and get it using jquery data() $(this).data('photoid').
$(document).ready(function(){
$("#m2 a").bind("click", function() {
var value = $( this ).attr( 'id' );
if(!$(this).data('yoxed')) {
$(this).yoxview({
cacheImagesInBackground:true,
skin: "top_menu",
lang: "hu",
images: [
{ media: { src: 'images/galeria/cella/image01'+value+'.JPG', title: 'Cella hegeszto' }},
{ media: { src: 'images/galeria/cella/image015.JPG', title: 'Cella hegeszto' }},
{ media: { src: 'images/galeria/cella/image013.JPG', title: 'Cella hegeszto' }}
]
});
$(this).data('yoxed', true).trigger('click');
}
}
return false;
});
});

Problem with applying jQuery to an element which has been created by jQuery

Here's my code:
$("#ticker-wrapper").rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
});
$('#js-news').ticker({
controls: false,
titleText: ''
});
Basically, a rssfeed is placed inside the wrapper, I then want .ticker to add a ticker effect to the items pulled through by the .rssfeed.
The problem seems to be that the .rssfeed creates the id #js-news (which is where I want to apply the .ticker). Then it seems the .ticker gets fired before #js-news has been created. Effectively it seems to be trying to apply .ticker to the element which hasn't yet been created which then results in nothing appearing.
I've been looking into jQuery .live() and I can get all the code working on a click command. But I need to create the rss feed and apply the ticker when the page loads. Not quite sure what to do?
------ Edit ------
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}
Call the ticker() on ajaxStop()
$("#ticker-wrapper")
.rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
})
.ajaxStop(function() {
$('#js-news').ticker({controls: false, titleText: '' });
});
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}

Categories