0

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

});


});
2
Contributors
8
Replies
21
Views
2 Years
Discussion Span
Last Post by SimonIoa
0

Trying to understand the question.

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

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

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

0

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.

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.