Develop Reference

HTML Video with Javascript

Would like to find a way to work around this.
Currently do have modal block which is formed by JavaScript, all style elements present in css file. Modal appears only after click on item, JS takes reference and files path from original HTML and places them in modal created inside JS code.
Question is, how and which way to change from image to video file, to keep it same wait that JS gets and process all the information?
JS suppose to take only path to file and form video tags, like with image.
Reference of code and issues.
HTML Code
<dt>Gourmet Yam Taohu</dt>
<dd>Thai tofu salad yam taohu</dd>
JS CODE
viewDetails = function( recipe ) {
var title = recipe.text(),
img = recipe.data( 'thumb' ),
description = recipe.parent().next().text(),
url = recipe.attr( 'href' );
var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p>See the recipe<span class="rm-close-modal">x</span></div>' );
$modal.appendTo( $container );
var h = $modal.outerHeight( true );
$modal.css( 'margin-top', -h / 2 );
setTimeout( function() {
$container.addClass( 'rm-in rm-nodelay' );
$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
$container.removeClass( 'rm-in' );
} );
}, 0 );
};

I'm not certain, but it sounds like you're trying to play a video when the user clicks an element that contains an image. If so, you could use the HTML5 video element, which has a built-in poster attribute to contain a placeholder image. (See HTML5 video for details.)
You'd just add a source element (with its own src attribute set to your video's path) inside the video element, give the video element the controls attribute, and wait for the user to click the built-in play button. (Note that some browsers require the video source to be formatted as mp4. ). To avoid compatibility problems between browsers, define multiple video types (multiple source elements)

Creative SDK Image Editor (Web) loads image, waits, then image disappears (no live preview)

late night here and at the end of my tether:
Incorporating Creative SDK to edit photos that were uploaded to the server via the previous page in the workflow -
I have tried every one of the parameters on the SDK documentation to find where is the fault in keeping the loaded image active for previewing edits, but in sequence,
Plugin Initialises (onLoad -> Ok)
Image loads (onReady -> Ok)
The Wait icon spins, then
The image disappears from the edit window
onError() does not pick this up.
Edits are functioning, onSave() fires and I can copy the image
(sending the adobe URL via AJaX) to a specified location (file output) on my
webspace, BUT, no live preview. Also the image does not update the original as is hard-coded in my script, and it gives an error as though unsaved on closing (isDirty).
My webspace is covered with an SSL certificate, but tried loading the image with relative and absoulte URLs, via http and https - nada.
I am calling version 3 as per the documentation, but people have said try version 4.3.1.29..?
I would like to presevere with this editor for live image editing, but only need it for cropping, adjusting brightness, contrast, rotation etc. and at the moment it is working, but 'blind' - anyone come across this? And how do I fix it...? :)
This is the source, pretty much as specified in the documentation, but with a working AJaX call while 'onSave()':
<script type="text/javascript" src="http://feather.aviary.com/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'my-key',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
displayImageSize: 'true',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById("image1");
img.src = newURL;
var ph = document.getElementById("new_image_placeholder_div");
ph.innerHTML = '<img src="'+img.src+'" height="100">';
var xmlhttp_c;
if (window.XMLHttpRequest){xmlhttp_c=new XMLHttpRequest();} else {
xmlhttp_c=new ActiveXObject("Microsoft.XMLHTTP");}
alert("Passing the URL "+newURL+" to the PHP page...");
xmlhttp_c.open("GET", "feather_save_handler.php?newURL="+encodeURI(newURL), true);
xmlhttp_c.onreadystatechange=function() { if (xmlhttp_c.readyState==4 && xmlhttp_c.status==200) {
alert(xmlhttp_c.responseText);
alert("Saved!");
} else {
}
}
xmlhttp_c.send();
// end save AJaX call..
},
onError: function(errorObj) {
alert(errorObj.args);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
The function is kicked off from a form button:
<form name="feather_editor" onSubmit="no_submit();">
<input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'http://mywebsitename.com/image_name.jpg');" >
</form>

It turns out that this is an issue in your CSS, and should be a fairly simple fix.
The issue
In daFooz_main.css, you have a canvas selector that includes:
z-index: -1;
That's causing the image in the Image Editor to effectively disappear from view since it is a canvas element.
The fix
The fix could be as simple as removing the line above from your CSS.
If you need that line for other areas of your site, try finding a way to be more specific with your selector, perhaps by using classes to target canvas elements that you do want to alter the z-index of.

checking image existance from client side

I am developing one image gallery website, which may have thousands of photos in future. All the images comes from other Website / API or user uploads.
User uploaded images
<img src="../images/example.jpg" alt="" />
External Images
<img src="http://example.com/xyz.jpg" alt="" />
Let say, image deleted from external website. Is there a way to check photo exists from client side using jQuery / JavaScript etc?
What I think is
i) I hotlink the image from external website
ii) Image deleted from external website, when website first load, jquery will send me the dead link info to server using ajax etc
iii) I will fix the link.
Thanks in advance...

You could use the "onerror" event on your external images and create a server side script to handle the error and return a generic "image not found" image while you fix the issue.
Something like ...
onerror="this.src='/fiximage.php?q='+this.src;"

You could do something like this...
$(function() {
$(document).on("error", "img", function() {
// do something with $(this) here
});
});
That would detect broken images and allow you to do something about it.

You can use onerror event in this case.
var imgs = document.getElementsByTagName("img"),
img, i = 0;
while (img = imgs[i++]) {
img.onerror = function() {
// just an example for error reporting
Ajax.send("POST /image_error.php", {src:img.src});
// change img src
img.src = "images/error.jpg";
};
}

Replace image in javascript rather than add to list

I have a script that allows the user to upload images and preview them. It's a very basic script and although I have managed to get it to do more or less everything I need I am stuck on one last thing.
As it stands once the user has uploaded an image it is displayed but if they upload another one it displays both, I would like the new image to replace the old image so only one is visible.
I don't have issues with the php side of things, the problem lies in the part where the script appends the new image to list and displays the list rather than just the new image and unfortunately my javascript knowledge is quite limited at the moment.
This is the script:
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="upload/'+file+'" alt="" /><br />'+file);
} else{
$('<li></li>').appendTo('#files').text(file);
}
}
});
});
And the images are displayed here:
<ul id="files" ></ul>
Any help will be gratefully received

Instead of:
$('<li></li>').appendTo('#files')
Try:
$('<li></li>').appendTo($('#files').empty())
This will empty the #files element before appending new content.

Pre Load images to display later on click event jQuery

I have a web page where lots of images called from server using image
scr attribute.
I have created a function like which is triggered by td click.
function GoToStep(stepNo) {
var imgSrc = $("#h1" + stepNo).val();
$(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}
Now the problem is this. For slower connections the images come after some
moment.
Can I pre load images to avoid waiting time when user clicks
td?
I have seen some jquery function to pre load images.
Kindly give some idea how can I achieve it.

Pre-loading an image is equivalent to loading an image but never displaying it. So, you can easily do it like this:
<img src="image.png" alt="" style="display:none;"/>
Now this image will be loaded as soon as the html starts rendering. Whenever you need to use this image as a display or background, just set the address to image.png and it will automatically be fetched from browser's cache.

This can be done using some javascript functions. Quoting from another question.
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Explanation of how javascript preloaders work (different question)
[...] The way it works is simply by creating a new Image object and setting
the src of it, the browser is going to go grab the image. We're not
adding this particular image to the browser, but when the time comes
to show the image in the page via whatever method we have setup, the
browser will already have it in its cache and will not go fetch it
again. [...]
So in your case, you should use something like
$(function() {
// Do stuff when DOM is ready
preload([
'img/bg1.jpg',
'img/bg2.jpg',
'img/bg3.jpg'
]);
});