first of all, I know this question is already discussed in other places on this website. I've read them all but can't get my code to work.. My javascript skills are rather limited so it would be great ifsomeone could help me with this one.
I got the popup to show with animations and it works great. But I still have to click the link to show the popup. I want to load the popup when the page loads. I've seen code for this but I can't get it to work properly.
This is my code:
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
-- some content ---
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
Anyone who can tell me how I need to change this code to fire the popup on page load?
Thanks in advance!
Senne
What you're doing is you're binding a click event on #popup-with-zoom-anim that's why it's not triggering on load. You must call the magnificpopup open method to open it onload.
Try this:
$(document).ready(function() {
$.magnificPopup.open({
items:{
src: '#small-dialog',
type: 'inline'
},
fixedContentPos: true,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
If you visit the documentation
http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing-popup
you can see that you have an open option:
$.magnificPopup.open({
items: {
src: 'some-image.jpg'
},
type: 'image'
});
Since what you want is to open html that is located in your html, you should set type as inline. Example (with button):
// From an element with ID #popup
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
So finally you should have something like this:
<div>
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
-- some content ---
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$.magnificPopup.open({
src: '#small-dialog',
type: 'inline'
});
});
</script>
I have not tested it but I hope it can helps.
Cheers
Related
I am unable to close the magnify pop up on page load. When i click the subscribe link it opens the pop up and lets me close it. However on page load it does not let me.
I am using the following scripts:
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
Current JS:
$(document).ready(function () {
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true,
mainClass: 'mfp-fade'
});
});
https://codepen.io/adar123/pen/BaooLLP
To open the popup on page load try doing this way.
$.magnificPopup.open({
items: {
type: 'inline',
src: '#test-popup'
},
midClick: true,
mainClass: 'mfp-fade'
});
I am trying the tagsinput plugin to work in a textarea which is inside a div that is loaded by the jquery dialog plugin call.
Plugin used is the /xoxco/jQuery-Tags-Input.
I did an initial check if the textarea element is ready. It is while before being called.
The textarea doesn't get displayed as tags by the tagsinput plugin. However when I try the same from firebug in the browser:
$('#textarea').importTags('guava','cherry'); // this works
Code below:
jsp file:
<div id="mydialog">
<textarea name="tags" id="textareaId">
</div>
javascript file:
$(document).ready(function(){
$("#mydialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"YES": function() {
$(this).dialog("close");
}
}
});
$('#textarea').tagsInput({
'autocomplete_url': '',
'autocomplete': {
source: ['apple','banana'],
autofill:true
},
'height':'100px',
'width':'300px',
'interactive':true,
'defaultText':'add a tag',
});
$('#textarea').importTags('guava','cherry');
});
Any help why?
$('#textarea') was not yet ready in the document before the tagsinput was called. I delayed my invocation for tagsinput and it worked Ok.
I'm trying to setup a cookie to only show a popup once, here's my code so far:
jQuery(window).load(function(){
// Load pop up within parent-page section only
if (window.location.href.indexOf('parent-page') > -1) {
alert("your url contains the parent-page in the URL");
$.magnificPopup.open({
items: [
{
src: '#disclaimer', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
removalDelay: 300,
mainClass: 'mfp-fade',
closeOnContentClick: false,
modal: true
});
}
});
Currently this loads every time parent-page is in the URL, I need to only show it once. How can I do this?
You can use the jQuery cookie plugin to achieve this:
if (window.location.href.indexOf('parent-page') > -1 && !$.cookie('popup-shown')) {
$.magnificPopup.open({
items: [
{
src: '#disclaimer', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}
],
removalDelay: 300,
mainClass: 'mfp-fade',
closeOnContentClick: false,
modal: true
});
$.cookie('popup-shown', true);
}
You can use localStorage:
jQuery(window).load(function () {
if (window.location.href.indexOf('parent-page') > -1 && !localStorage.getItem('popup_show')) {
$.magnificPopup.open({
items: [{
src: '#disclaimer', // CSS selector of an element on page that should be used as a popup
type: 'inline'
}],
removalDelay: 300,
mainClass: 'mfp-fade',
closeOnContentClick: false,
modal: true
});
localStorage.setItem('popup_show', 'true'); // Set the flag in localStorage
}
});
The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends - that is when the browser is closed.
Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working.
So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.
Any ideas why this happens and how to resolve it?
Magnific Popup
https://github.com/dimsemenov/Magnific-Popup
fullPage.js https://github.com/alvarotrigo/fullPage.js/
fullpage code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['section1','section2'],
navigation: false,
scrollOverflow:false,
showActiveTooltip:true,
slidesNavigation: false,
menu:'.menu',
fixedElements: '#header, #footer',
paddingTop:'140px',
autoScrolling: false,
scrollOverflow: false
});
</script>
Magnific Popup code
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery:{enabled:true},
image:{titleSrc: 'title'},
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
});
//]]>
</script>
MagnificPopup HTML
<img src="image.png" width="100%">
Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Like this:
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['section1', 'section2'],
navigation: false,
scrollOverflow: false,
showActiveTooltip: true,
slidesNavigation: false,
menu: '.menu',
fixedElements: '#header, #footer',
paddingTop: '140px',
autoScrolling: false,
scrollOverflow: false,
afterRender: function () {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
image: {
titleSrc: 'title'
},
callbacks: {
beforeOpen: function () {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
}
});
});
Working on THIS Page:
newsite.702wedding.com/live/
Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.
Here is what I think I/YouToo should be looking at:
(function ($, window) {
var
// ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details.
defaults = {
transition: "elastic",
speed: 350,
width: false,
initialWidth: "662",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "600",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: false,
inline: false,
html: false,
iframe: false,
photo: false,
href: false,
title: false,
rel: false,
opacity: 0.6,
preloading: true,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
open: false,
loop: true,
slideshow: true,
slideshowAuto: true,
slideshowSpeed: 3000,
slideshowStart: "Play",
slideshowStop: "Pause",
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,
overlayClose: true,
escKey: true,
arrowKey: false
},
Thanks for you help
There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.
Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.
Try the following after the lightbox loads:
$("#cboxPrevious").hide();
$("#cboxNext").hide();
Or add to your CSS:
#cboxPrevious, #cboxNext{
display: none;
}
You actually can do this.
After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.
<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>
class="iframe" can trigger an external page.
class="photo" can show single photo without arrow but just close button
class="group1" will display the gallery and all controls for the gallery.
Note that only group1 contains rel:group1
Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1
Pay attention in the code and you will know
Go to page
<img src="image.jpg">
<img src="image1.jpg">
Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.
$(".target").colorbox({rel: false});
The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:
HTML:
<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">
Javascript:
$(".js-colorbox").colorbox({iframe:true});
By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.