We Keep Coding

HTML/CSS Modal Dialog With Image (Sweetalert or Other)

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

plupload - upload button works only if click is triggered programatically

I am using plupload 1.5.7. I have two buttons on page:
First one (Add new attachment) was used as browse_button in plupload configuration. When I click it, it doesn't work. Click event is executed, but file browser is not opened. But there is second button (Trigger add new attachment click), which only does this:
$('#TriggerAddNewAttachmentClickButton').click(function() {
$("#AddNewAttachmentButton").click();
})
So it only triggers click of the first button. It works fine. Clicking it opens file browser.
How is this possible? This behavior is consistent between Firefox, Chrome and Internet Explorer.
Obviously this is security related, because plupload uses tricks to hide input, but second method is not safer. I can't reproduce this issue in jsfiddle, it exists only in specific context, but maybe there is someone, who ecountered similar behaviour.

I got a similar issue with plupload. I digged into this issue for hours, and finally I find the reason. As #jbl said:
I guess I remember I had this kind of problem when the container was not visible upon plupload initialization. Could it be the same problem ?
The way of plupload working is as following:
Remember you need to set a browse_button? Actually the plupload will create an input[type="file"] for each browse_button. In normal situation, the size and position of the input[type="file"] will be the same with the browse_button exactly. So when you click the browse_button, it's not the button trigger a file chooser dialog popping up, it's the input[type="file"].
But when you set the browse_button container something like: display:none(we say, inactive), and after that even you set back the display:block(we say, active), the width and height of the input[type="file"]'s parent container would be zero some time.
My quick fix solution for this issue is as following:
I measure the position and size of the browse_button when change the state of the container from inactive to active. Then I'll manually set the position and size to the hidden input[type="file"];
Following is some sample code:
var $btn = $currPanel.find(".browse_button");
var w = $btn.outerWidth();
var h = $btn.outerHeight();
var position = $btn.position();
var $hiddenInputDiv = $currPanel.find(".moxie-shim");
$hiddenInputDiv.height(h);
$hiddenInputDiv.width(w);
$hiddenInputDiv.css(
{
top: $btn.css("margin-top"),
left: position.left
});

How to make sure ajax is fully loading content using .load

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

Lightbox that can open automatically depending on url path

There are a million lightbox type modal overlay scripts out there.. but I am looking for one that has the ability to be automatically triggered, depending on the path that leads there. So a property would have to live in the url string that triggered it. Has anyone seen or implemented any such thing? I know colorbox has the ability to automatically open the modal when you land on the page, but I do not know how I could make that functionality dependant on the path that one arrives there. Any ideas?

You could implement some JavaScript that looks at the referring page and opens the light box accordingly, therefore you shouldn't be limited to a particular implementation. You can tie in to the document ready event to open it.
There is an example of how to access the referrer on the W3Schools website linked below.
http://www.w3schools.com/jsref/prop_doc_referrer.asp

You can do this with Colorbox by varying the settings in your initialisation.
Assuming that you do this to start Colorbox:
$('div.gallery a').colorbox({
onClosed: function() { alert('Colorbox closed');},
current: 'Image {current} of {total}'
});
You could do something like this instead:
var colorBoxSettings = {
onClosed: function() { alert('Colorbox closed');},
current: 'Image {current} of {total}',
open: false
};
if (your_logic) {
colorBoxSettings.open = true;
}
$('div.gallery a').colorbox(colorBoxSettings);

I suggest that there is no need for auto triggering. You can do it this way -
First check the whether the url consists of the appropriate value you want or not.
It can be done by server side language (like PHP ) or through javascript.
If done server side pass say a hidden field as below -
<input type="hidden" name="exists" value="true" />
If done using jquery save value as -
var value = "value from javascript if proper url exists";
If done through server side then -
var value = $('input[name="exists"]').val();
Then you can trigger manual cilck (if url value is as per your expectation) to anchor which consists of overlay link -
$('#id of anchor').trigger('click');
If you want auto triggering overlay though then you can try this -
http://flowplayer.org/tools/demos/overlay/trigger.html

A few jQuery questions

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();
});