Hi i use magnific pop up for an image gallery and i want to hide a div when the image zoom in and show it again when the image zoom out. This is my code :
$('.gallery-item').magnificPopup({
type: 'image',
gallery:{
enabled:true
},
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out',
// CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
opener: function(openerElement) {
// openerElement is the element on which popup was initialized, in this case its <a> tag
// you don't need to add "opener" option if this code matches your needs, it's defailt one.
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});
Where should i put the the hide() and show() functions so they will be triggered same time with the magnific popup.
Don't use css for that, jQuery has built in functions for showing and hiding elements.
open: function(){
$(".main").hide();
},
close: function(){
$(".hidden-div").show();
}
Use this $( ".main" ).hide(); in your open function.
Related
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.
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. ;-)
I am using MooTools library. I want my fade in fade out effect on table id
<table id="myId"></table>
i have working click event
aNextCal.addEvent('click',function(){
//Click Event working here i want fade in fadeout code
this.showNextWeek();
}.bind(this));`
Please suggest
There is the default fade function to every element
document.id('myId').fade('out'); //hide
document.id('myId').fade('in'); //show
If you need something more complex to control the effect use Tween:
new Fx.Tween('myId', {
duration: 4000,
property: 'opacity',
onComplete: function(){
alert('hide');
}
}).start(0);
Mootools has a method fade, which is intended for fading elements in/out.
myElement.fade([how]);
how = ('in', 'out', 'show', 'hide', 'toggle', number)
Example of use:
// simple example
$('myId').fade('out');
// setting up element with options
$('myId').set( 'tween', {
duration: 400,
transition: 'quad:out'
});
$('myButton').addEvent('click', function(){
$('myId').fade( 'toggle' );
});
I want:
autoplay: false when is width>900 in window size and ,
autoplay: true when is width<900 & width>701 in window size and ,
autoplay: false when is width<701 in window size
with jQuery flowslideshow and when the window is resized run this code
but notworking.
$(window).resize(function () {
var width = $(window).width();
if (width > 900) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
}
else if (width < 900 & width > 701) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: true**, clickable: false });
});
}
else (width < 701)
{
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
} });
The onResize event of the window does not always fire on page load, so the slideshow wouldn't autoplay in that case. It does appear to fire on page load in ie9.
Also, this code would recreate the slideshow every time the page is resized - which is probably not what you want either.
You might be better binding the slideshow on page load, and then binding an event to resize that pauses / resumes the slide behaviour. Like this:
jQuery(function($) {
// detect window size and init slideshow here
$(window).on('resize', function () {
// detect window size and pause or resume the slideshow
});
});
Without seeing the docs for the slideshow you're using I can't point you in the direction of exactly how to modify the slideshow after it's initialised, but it should be possible if you follow the principle above.
(On a side note, to check the resize event is being triggered correctly, you could console.log($(window).width()))
If you need more help, consider posting a Fiddle with the full example in it, and link to the docs for the slideshow plugin you're using.
I'm using qtip for jQuery, and I have the following code
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip', // Give it some content, in this case a simple string
style: {
name: 'cream', // Inherit from preset style
tip: 'topLeft'
},
show: {
when: 'click', // Show it on click...
solo: true // ...and hide all others when its shown
},
hide: {
when : 'focusout',
fixed: true
}
});
The desired effect is that the tip should display when I click on the link and stay there unless if I click on some other part of the page (hence the focusout), but at the same time if I click on the tip itself, I don't want it to disappear so that I can insert interesting stuff in it, hence the fixed: true... but then even when I do this it would still disappear when I click on the tip... what am I doing wrong or is there another way to prevent the tip from disappearing when I click on it but have it disappear if I click on another part of the page?
You need to use the unfocus event:
$('#content a[href]').qtip({
content: 'Some basic content for the tooltip',
// Give it some content, in this case a simple string
style: {
name: 'cream',
// Inherit from preset style
tip: 'topLeft'
},
show: {
when: 'click',
// Show it on click...
solo: true // ...and hide all others when its shown
},
hide: {
when: { event: 'unfocus' }
}
});
Working demo: http://jsfiddle.net/andrewwhitaker/rep87/
From the documentation:
The 'unfocus' event hides the tooltip when anywhere else on the document, except the tooltip itself, is clicked.