I have the strangest problem. I am using colorbox a jquery plugin to open a modal window. Click Here

The plugin will work only when i put this on my code <div id="webcam"></div>. Bellow you will find the javascript code i use to call the id='webcam' i use it so the user could take a photo with his/hers camera.

Any ideas how to fix this?

/* Webcam */
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
if (canvas.toDataURL)
{
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);
saveCB = function(data)
{
var col = data.split(";");
var img = image;
for(var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos+= 4;
}
if (pos >= 4 * 320 * 240)
{
ctx.putImageData(img, 0, 0);
$.post("webcam_image_ajax.php", {type: "data", image: canvas.toDataURL("image/png")},
function(data)
{

if($.trim(data) != "false")
{
var dataString = 'webcam='+ 1;
$.ajax({
type: "POST",
url: $.base_url+"webcam_imageload_ajax.php",
data: dataString,
cache: false,
success: function(html){
var values=$("#uploadvalues").val();
$("#webcam_preview").prepend(html);
var X=$('.webcam_preview').attr('id');
var Z= X+','+values;
if(Z!='undefined,')
$("#uploadvalues").val(Z);
}
});
}
else
{
$("#webcam").html('<div id="camera_error"><b>Camera Not Found</b><br/>Please turn your camera on or make sure that it <br/>is not in use by another application</div>');
$("#webcam_status").html("<span style='color:#cc0000'>Camera not found please reload this page.</span>");
$("#webcam_takesnap").hide();
return false;
}
});
pos = 0;
}
else {
saveCB = function(data) {
image.push(data);
pos+= 4 * 320;
if (pos >= 4 * 320 * 240)
{
$.post("webcam_image_ajax.php", {type: "pixel", image: image.join('|')},
function(data)
{
var dataString = 'webcam='+ 1;
$.ajax({
type: "POST",
url: $.base_url+"webcam_imageload_ajax.php",
data: dataString,
cache: false,
success: function(html){
var values=$("#uploadvalues").val();
$("#webcam_preview").prepend(html);
var X=$('.webcam_preview').attr('id');
var Z= X+','+values;
if(Z!='undefined,')
$("#uploadvalues").val(Z);
}
});

});
pos = 0;
}
};
}
};
}

$("#webcam").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "js/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function ()
{
    webcam.save();
},
debug: function (type, string) {
$("#webcam_status").html(type + ": " + string);
}

});


});

Recommended Answers

Trying to understand the question.

You want the modal to work without having to add the id field?

Jump to Post

show your colorbox javascript code. Its happening because you are calling it on the the element with the id of webcam.

Jump to Post

All 8 Replies

Trying to understand the question.

You want the modal to work without having to add the id field?

Yes, why i have to put the <div id="webcam"></div>? I think there is a conflict on javascript

show your colorbox javascript code. Its happening because you are calling it on the the element with the id of webcam.

Sorry i am late.No i am not calling a webcam id

<script type="text/javascript">

$(document).ready(function(){
    //Examples of how to assign the ColorBox event to elements

    $(".upload-audio").colorbox({width:"50%", height:'70%', inline:true});
    $(".upload-text").colorbox({width:"50%", height:'70%', inline:true});
    $(".upload-press").colorbox({width:"50%", height:'70%', inline:true});
    $(".upload-video").colorbox({width:"50%", height:'70%', inline:true});
    $(".start-groove").colorbox({width:"50%", height:'70%', inline:true});
    $(".see-fans").colorbox({width:"50%", height:'70%', inline:true});
    $(".review-message").colorbox({width:"50%", height:'70%', inline:true});
    $(".latest-audio").colorbox({width:"75%", inline:true});
    $(".latest-text").colorbox({width:"70%", inline:true});
    $(".latest-video").colorbox({width:"80%", inline:true});
    $(".all-activity").colorbox({width:"60%", inline:true});
    $(".latest-picture").colorbox({width:"70%", inline:true});
    $(".announce-project").colorbox({width:"50%", height:'70%', inline:true});
    $(".upload-photo").colorbox({width:"50%", height:'50%', inline:true});
    $(".upload-audio-profile").colorbox({width:"50%", height:'70%', inline:true});
    $(".upload-text-profile").colorbox({width:"60%", height:'70%', inline:true});
    $(".upload-video-profile").colorbox({width:"50%", height:'70%', inline:true});
    $(".change-flow-photo").colorbox({width:"50%", height:'70%', inline:true});
    $(".change-rove-photo").colorbox({width:"50%", height:'70%', inline:true});
    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
        return false;
    });

});
</script>

i just loose the webcam javascript code i posted originally and everything works fine. I am jst trying to see if the syntax is incorrect.

altgough it shows no syntax error on dreamweaver

Okay, mark as solved. I don't see any problem in the syntax.

but why when i put it back on my .js file with the rest of my javascript code it stops to work i mean all the colorbox

ok i find it it was the brackets after the webcam syntax

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.