i am using the magnific Popup Plugin (http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)
May i put my code in here first:
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
// Delay in milliseconds before popup is removed
removalDelay: 600,
// Class that is added to popup wrapper and background
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-fade',
type:'inline',
midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.,
callbacks: {
beforeOpen: function() {
if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){
if ($('.imagetitle').length > 0) {
// it exists
}else{
$(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>");
$(".image-container span.imagetitle").css({
"left": $(".image-container img").position().left+"px",
"margin-top":10+"px",
"margin-bottom":10+"px"
});
}
}
//Make it a Gallery! - Whoop Whoop
if($("div.white-popup").length > 1){
$("div.white-popup").append("<div class='popupgalleryarrowleft'> </div>");
$("div.white-popup").append("<div class='popupgalleryarrowright'> </div>");
}
},
open: function(){
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
}
}
});
});
So i want to have an inline gallery. It works everything fine, but this part doesnt:
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
I am just trying to get the next instance, when there is one. When i am running this code via firebug on runtime, it works!
Can anyone help me with this? Hopefully.
Greetings David
was looking for the same thing.
I think here what you are looking for http://codepen.io/anon/pen/kInjm
$('.open-gallery-link').click(function() {
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
});
});
I needed to create a custom navigation for galleries, so I played with using $.magnificPopup.instance.next();. It does work when put into a click handler for a gallery.
Otherwise, there is no "next instance" to find because it doesn't exist yet.
This will navigate to the next gallery image when clicking on bottom/title bar (see it on codepen):
$('.gallery').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
$('.gallery').click(function() {
$('.mfp-bottom-bar').click(function() {
$.magnificPopup.instance.next();
});
return false;
});
And here's a more complete example on Codepen, with multiple galleries.
This one also adjusts for the height of the custom navigation and padding in the popup, using callbacks. Useful because the navigation button in my project had significant height and was being cut off by the bottom of the screen. (By default, only the image height itself is used to calculate how the popup fits in the viewport.)
Hope this is useful to someone. I know the question was two years ago, but maybe others will also find it by Googling, like I did.
Related
Every time I ask a question here, no matter how dumb it is, I do always learn something.
Anyway, I'm hoping to get some more good answers to this one.
I'm calling a jquery plugin for a modal on document.ready
<script>
$(document).ready(function() {
// Initialize the plugin
$('#JPO').popup({
absolute: false,
autoopen: true
});
$.fn.popup.defaults.pagecontainer = '#page'
});
</script>
it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).
This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/
Thanks so much in advance!
use setTimeout() function.
Read More about setTimeout
Sample Code:
setTimeout(
function()
{
//do something special
}, 5000);
I used a combination of setTimeout, and onmouseleave to create my popup.
<script>
function openPopup(){
$('#JPO').popup({
autoopen: true,
detatch: true,
transition: 'all 1.0s'
});
};
function exitPopup(){
$('#JPO').popup('show');
};
function cookiePopup(){
$('#JPO').popup({
autoopen: false,
detatch: true,
transition: 'all 1.0s'
});
};
$(document).ready(function(){
$('.modal-content').hide();
var dialogShown = Cookies.get('dialogShown');
if (!dialogShown) {
setTimeout(openPopup, {{ section.settings.delay }});
$(document).mouseleave(function(){
setTimeout(exitPopup,1050)
});
Cookies.set('dialogShown', 1, { expires: 1 });
}
else {
setTimeout(cookiePopup, {{ section.settings.delay }});
}
});
</script>
I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors.
PS. this is for a shopify section, so it does contain some liquid.
Plugins used:
PopUp https://dev.vast.com/jquery-popup-overlay/
Cookies https://github.com/js-cookie/js-cookie/tree/v1.5.1
I have an application working fine on bootstrap3 that open various modals once and i want to add another modal over an open modal (i know the issues with multiples modals on bootstrap3).
I find a jsfiddle that can i use.
The problem appears when the user press the 'ESC' key the modal on bottom is closed! and i want to close the modal on top.....
Can anyone tell me a clue for open only two modals one front other?
$(document).ready(function() {
$('#openBtn').click(function() {
$('#myModal').modal({
show: true
})
});
$(document).on({
'show.bs.modal': function() {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
},
'hidden.bs.modal': function() {
if ($('.modal:visible').length > 0) {
// restore the modal-open class to the body element, so that scrolling works
// properly after de-stacking a modal.
setTimeout(function() {
$(document.body).addClass('modal-open');
}, 0);
}
}
}, '.modal');
});
this is the code that i'm working
your help will be very appreciated!
This is the JavaScript code where when the user clicks on a new tab the contents on that page have a fade out effect by setting the opacity to 0. However the flaw is that all links from other pages are still clickable because it is only the opacity that has changed. What edit can I make to this code to keep the animation but hide the page content after the animation. (The same animation is when the page loads, but the opacity changes to 1.)
Code:
jQuery(document).ready(function() {
/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
var hash = location.hash;
jQuery('a[href='+hash+']').trigger('click');
});
/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
var link = jQuery(this).attr('href').substr(1);
if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
jQuery('.main-nav ul li a').removeClass('active'); //remove active
jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
complete: function() {
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
});
}
});
});
Can you please re-paste the code with the edits as I am not the best at JS.
Can you post your css and html? It's hard to diagnosis this, but you could use .fadeOut() or .animate({"display":"none"}). I'm not sure if this is what you need, you'll have to post the rest of the code.
Simply set the display property to none in the callback (or just call hide()):
complete: function() {
jQuery(this).hide();
jQuery('a[href="#'+link+'"]').addClass('active'); // add active
jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});
}
Obviously you then have to take care to show the elements back again before animating them back in. ;-)
Here is the link to an example of my website i am working on:
https://grenada.lumc.nl/LOVD3/shared/genes
I am trying to hide a context menu that has been generated by jeegoocontext(The menu that pops up when hovering over the tabs at the top of the page, e.g. "Screenings"). When i hover over the tab, the context window appears as it should. However, when i mouseout of the tab without actually having touched the context menu(e.g. exit the top from the top) then the context menu does not hide and i can't get it to do so.
If i have mouse overed the menu before exiting, then it behaves as it should. Does anyone have a solution for this that does not involve using a different library than jeegoocontext?
EDIT :
This is the link to the jeegoocontext zip with the original .js file in the folder jeegoocontext.
http://www.planitworks.nl/uploads/afbeelding/components/downloads/jeegoocontext_1_3.zip
Cheers,
lugte098
Try put your script in footer of your page like this:
$(document).ready(function(){
var aMenuOptions = {
widthOverflowOffset: 0,
heightOverflowOffset: 1,
startLeftOffset: -20,
event: "mouseover",
openBelowContext: true,
autoHide: true,
delay: 100,
onSelect: function(e, context){
if($(this).hasClass("disabled"))
{
return false;
} else {
window.location = $(this).find("a").attr("href");
return false;
}
},
};
$('#tab_genes').jeegoocontext('menu_tab_genes', aMenuOptions);
$('#tab_transcripts').jeegoocontext('menu_tab_transcripts', aMenuOptions);
$('#tab_variants').jeegoocontext('menu_tab_variants', aMenuOptions);
$('#tab_individuals').jeegoocontext('menu_tab_individuals', aMenuOptions);
$('#tab_diseases').jeegoocontext('menu_tab_diseases', aMenuOptions);
$('#tab_screenings').jeegoocontext('menu_tab_screenings', aMenuOptions);
$('#tab_submit').jeegoocontext('menu_tab_submit', aMenuOptions);
});
The problem is that the script might be running before hmtl DOM be complete.
Try this.
I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by http://kleientertainment.com/ so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!
The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.
lets get to the code and bugs:
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});
CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.
Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.
The bugs:
Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine http://kleientertainment.com/ 's slider?
Just discovered jQuery cycle plugin http://malsup.com/jquery/cycle/ from another post.
I remade my slider with that and it preforms exactly as needed. Good stuff!