I'm making a website and have found the need to make modal dialogs. As I needed to include images and didn't like the look of the native alert() function, I settled on sweetalert. So far, sweetalert works great but I need the ability to include images in the dialog (theoretically, sweetalert should allow this as it allows for arbitrary HTML content).
However, when I try to do this, the dialog becomes off center (vertically).
The code I use to create the sweetalert with image is:
var options = {
title: 'Title',
text: '<img src="http://lorempixel.com/400/200/sports/1/">',
html: true
};
swal(options);
Brief JSFiddle demonstrating the problem: here
So how can I use sweetalert to make a modal dialog that contains a custom image in it (not for the status icon, but actually in the dialog content)? If such a task is not possible using sweetalert, then is there a library I can use that makes good looking dialogs and supports what I'm trying to do? Worst case, I suppose I could write my own alert framework but I'm trying to avoid that.
Thank you for your time and assistance.
Extra Info: I assume this is because sweetalert calculates where the dialog should be, puts the dialog there, makes it visible, and then the image loads (making it appear off-center), but I could easily be wrong. This hypothesis is furthermore substantiated by the fact that, when using a constant image, the off-center phenonmenon only happens on the first load (every subsequent load the dialog is centered). I assume this is because the image is cached after the first load and thus the centering calculation is correct when sweetalert makes it on every subsequent load.
EDIT:
Here's a screenshot of what the off-vertically-centered dialog looks like for me on first load in JSFiddle:
Note the lack of vertical centering. Screenshot taken on Chrome v45.
Have you tried adding dimensions to the image? if that is acceptable, that is working fine the first time for me.
Try this jsfiddle here
$(document).ready(function() {
$('#trigger-alert').click(function() {
var options = {
title: 'Title',
text: '<img width="250" height="200" src="http://lorempixel.com/400/200/sports/2/">',
html: true
};
swal(options);
});
});
I would also suggest looking at Jquery UI dialogs as an alternative and Toastr if you are looking to add notifications.
Adding another approach by preloading image.
$(document).ready(function() {
var myImage = new Image();
myImage.src = 'http://lorempixel.com/400/200/sports/7/';
$('#trigger-alert').click(function() {
swal({
title: 'Title',
text: "<img src='"+ myImage.src +"'/>",
html: true
});
});
});
jsfiddle here
Related
Like many others, due to the limitations of TinyMCE's Image Plugin, I've decided to take the route of creating one that ties into my site's own uploading system.
I've gotten this partially working and pulling up a individual page, designed just for the purpose. However, now I want to return content from selecting images on this page. Is that possible or am I hitting a dead end?
tinymce.PluginManager.add('imageLoader', function(editor, url) {
// Adds a menu item to the tools menu
editor.addButton('imageLoader', {
icon: 'mce-ico mce-i-link',
image: 'Photos.png',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Image Loader',
url: 'load_images',
width: 500,
height: 400,
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Image To Insert');
}
});
}
});
return {
getMetadata: function () {
return {
name: "Image Loader"
};
}
};
});
We made this a lot easier in TinyMCE 5 with a new URL dialog api:
https://www.tiny.cloud/docs/ui-components/urldialog/
In version 4, I believe the usual technique was to (inside the iframe) access the TinyMCE instance that opened the dialog via window.parent.tinymce.activeEditor, and then replicate the onsubmit function there. With the editor instance you can insert whatever content you need to and then editor.windowManager.close() will close the topmost window (i.e. the url dialog).
For more advanced use cases, editor.windowManager.getParams() can be used to pass information between the plugin and dialog, although perhaps not from the dialog to the plugin. editor.plugins is another possible technique, it's a name/value object of active plugin instances (it's a live reference to the return value from the PluginManager.add init function which can be mutated at runtime).
These are all fairly complicated, but likely more reliable than searching for the dialog iframe from your plugin.
I found an answer, although this is likely not the most elegant solution.
The image that I'm selecting is passed into a hidden text input in my custom page. From there, on Submit or Closing the TinyMCE 4 Frame, I use this snippet:
let getVal = $('[role="application"]').find('iframe')[1].contentWindow.document.getElementById("imgHolder").value;
In order:
It first finds the iFrame. Since both external pages and the editor itself use iFrames, this will generally be the 'second' iFrame - unfortunately, it isn't given an ID.
"contentWindow.document.getElementByID" fetches the hidden input, in my case named "imgHolder"
From here, you can get your content as normal with .value, and insert it into the TinyMCE Editor.
I hope this helps point others in the right direction, especially knowing that it gets asked a lot for TinyMCE 4. Further I hope this can be made a bit more elegent as well.
I tried to use a page on
http://dimsemenov.com/plugins/magnific-popup/
to start with the project. So I took the code an assumed to find out, what I need from the larger page for me. Though, cutting anything away made id not function at all.
What resources are needed (css, js, links)?
I need on several pages a light box and want to load the first picture as soon as the page loads. Tried to build a test page on
http://grillparzerhof.at/magnificversuch/index.html
though there is a light box not at all. It is a very beginners question; please help.
~ Karl
This is the code on that page in Public Methods you should use to fire the lightbox on page load, this instruction is near the bottom of the Documentation page:
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
We have a site where on the left we are displaying our products and on the right shows the product the user clicks on (on same page). When the page loads we have the first product being shown on the right by default, when the user clicks on a new product then the right columns changes to show the new product (via ajax).
Here is how I have the ajax setup:
<script>
jQuery(document).ready(function($){
var defaultValue = $("ul.products li.shop-thumb a:first").attr("href");
$(".main").load(defaultValue);
$("ul.products li.shop-thumb a").click(function(e){
e.preventDefault();
var addressValue = $(this).attr("href");
//alert(addressValue );
$(".main").load(addressValue);
//$("a.woocommerce-main-image").addClass("image-popup-no-margins");
});
});
</script>
We are using magnific popup to show the larger image of the product when the user clicks on the (right sides) main product image.
This works great for the first (default) product but when the user clicks on a new product and the content to the right changes, then the user clicks on the main image, the pop up fails to load. So in other words it works when you first load the page and the default product is shown, but fails to fire when a new product is clicked.
Here is the product-image.php filter which just adds our class of image-popup-no-margins:
apply_filters( 'woocommerce_single_product_image_html', sprintf( '%s', $image_link, $image_title, $image ), $post->ID );
And in the footer we have this:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
Im may have given too much info here but I felt better safe then sorry, so perhaps its better if I give you a link for you to see what I mean. When you visit the page, click on the big image on the right and you should see the popup functioning. Now try clicking on one of the products on the left so the main image on right changes and try to click it again, the default behavior happens instead of our pop up.
I checked classes and everything looks fine, I'm sure it has to do with the ajax but can't get it worked out.
Update:
After more tinkering with this I think the problem is that the .load is not 'reloading' the content when the anchor is clicked. Like I said it works when you first load the page and click on the first image, but when you change the image and the ajax is called I don't think it really reloads the content in the main container. How would I make sure the ajax is fully loading the content like it does when you first open the page? If you go to the site and click the big image on right, it works, change the image by clicking on a product from the left and the pop up fails to work and so does the "Tag It" pop up… Maybe this is less specific to magnific popup and more of a basic ajax
It seems your server is just quite slow and delivering the content required for the new popup. you can see the get requests by viewing the firebug console. once these have completed it works perfectly. I suggest upgrading for hosting or finding another way to deliver the higher quality images faster, such as imgur or other image hosting services.
So the problem was indeed with the magnific popup, replaced it with Fancybox and all seems to be functional correctly -- Thanks for the help guys
I have an app that I need to show images in (after clicking on a thumbnail), written in meteor.
I'm able to store the images in gridFS and pull them out fine, but am struggling to work out how to dynamically size a modal dialogue for showing the full size image.
I think I need to trap the bs-show event for the dialogue and set the .css.width property to the size required, but I have no idea how to intercept the bs-show event in meteor.
I have tried putting the following code in the app
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
Session.set("showProjModal", true);
//console.log("Image ID: "+ Session.get("selectedImageId"));
console.log($("projectImageModalID").find('modal-body'));
$("projectImageModalID").find('modal-body').css({
width: '20px'
});
$("#projectImageModalID").modal("show");
}
};
and in the chrome debugger can see the object being returned to the consol log, but the css change has no effect before the show so I guess I'm not in the right place for this.
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});