Search jQuery

jQuery Forum

Using jQuery Plugins

i9ball

Cannot seem to replicate jQModal functionality ... any help is appreciated :)

in Using jQuery Plugins • 12 years ago

Hello all! Thanks for taking the time to read my post!

I am new to jQ but have read the .js doc and gone through a few tutorials. Experienced in AS3 & jScript.

I have been tasked to replicate functionality created by a prior employee.

Scenario:

We are creating an Augmented Reality experience where the user interacts with characters on screen...

See working code here

Functionality:

... at any point the user clicks a button and the current AR Flash movie state is "Captured" after a brief 3-2-1 countdown and the resulting image is immediately opened in a modal window.

Within the modal window the options are entering an email and sending the snapshot that way, or canceling to return to the AR Feed.

Issue:

The code breaks down right at the snapshot function . I can get an alert to open within the function... but nothing beyond that will fire...

I tried to build using DOM but I could not figure how the image data travels once it is assigned to the callresult variable inside the 'snapshot' function.

The CODE:

referenced:

jqmodal.css,

jqmodal.js,

jquery-1.3.2.min.js

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
session_start();
$str = microtime(false);
$f = __FILE__;
$filename = rand();
$_SESSION["imgFileName"] = $filename;
?>
<html>
<head>
<title>Digital Tech Frontier</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css">
<script type="text/javascript" src="js/AC_OETags.js" language="javascript"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js" language="javascript"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<script language="JavaScript" type="text/javascript">
<!-- // Globals
// Major version of Flash required
var requiredMajorVersion = 10;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// -------------------------------------
// -->
var actionsHtml = "";
$().ready(function() {
$('#preview').jqm({modal:true, onShow:loadPreview});
});
var loadPreview=function(hash){
hash.w.empty();
hash.w.load('preview.php?r='+Math.random()).show();
};
function takeSnapshot(){
var callResult = document.getElementById("FLARMulti").print()
}
function showPreview(){
$('#preview').jqmShow();
hideFlash();
}
function showFlash(){
$("#FLARMulti").css("visibility", "visible");
}
function hideFlash(){
$("#FLARMulti").css("visibility", "hidden");
}
function sendImage(){
if(actionsHtml == "")
actionsHtml = $("#actions").html();
var html = $("#prompt").html();
$("#actions").html( html );
$("#actions").show();
}
function sendEmail(){
var email = $('#email').val();
if(email != null && email != ""){
$.get("send.php?email="+escape(email));
cancelEmail();
cancel();
alert("Photo was successfully sent");
} else {
alert("Please provide your email address.");
}
}
function cancelEmail(){
$("#actions").html( actionsHtml );
}
function cancel(){
$('#preview').jqmHide();
showFlash();
}
</script>
</head>
<style type="XHTML 1.0 Transitional">
a {border: none;}
img {border: none;}
#FLARMulti {z-index: 10;}
#preview {border: 10px solid #fff; top: 0px; position: absolute; display: none; backgroundcolor: #000; padding-bottom: 10px;}
#preview .previewImage {border-bottom: 10px solid #fff; margin-bottom: 10px;}
</style>
<body bgcolor="#000000">

<div id="preview"></div>
<script language="JavaScript" type="text/javascript">
<!--
// Version check based upon the values entered above in "Globals"
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
// Check to see if the version meets the requirements for playback
if (hasRequestedVersion) { // if we've detected an acceptable version
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "FLARMulti",
"width", "640",
"height", "480",
"align", "middle",
"id", "FLARMulti",
"quality", "high",
"bgcolor", "#0000000",
"name", "FLARMulti",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ '<a href="http://www.adobe.com/go/getflash">Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>

<a href="javascript: takeSnapshot();" target="_self">
<img src="images/snapshot.gif"
width="177"
height="128"
border="0"
alt="Take a Picture!">
</a>
<div style="display: none;">
<div id="prompt">
<div style="width: 100%; color: #fff; font-size: 16px; text-align: center;">
<div style="margin-bottom: 8px;">Please provide your e-mail address:</div>
<div style="margin-bottom: 8px;"><input type="text" size="30" id="email" value=""> </div>
<input type="submit" id="btSubmitEmail" style="margin-right: 20px;" onClick="sendEmail(); return false;" value="send" >
<input type="submit" id="btCancel" style="margin-left: 20px;" onClick="cancelEmail(); return false;" value="cancel" >
</div>
</div>
</div>
</body>
</html>

EDIT:

There is also a preview.php and the code is as follows:

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
session_start();
$filename = $_SESSION["imgFileName"];
$randomNumber = rand();
?>
<div style="height: 360px;">
<div class="previewImage">
<div align="center"><img src="snapshots/<?php echo $filename.".jpg?g=".$randomNumber ?>" alt="" width="320" height="240" /></div>
</div>
<div id="actions">
<table style="width: 100%;">
<tr>
<td style="text-align: right; padding-right: 20px;"><a href="javascript:sendImage()"><img src="images/btSend.png" alt="Send E-Mail" /></a></td>
<td style="text-align: left; padding-left: 20px;"><a href="javascript:cancel()"><img src="images/btCancel.png" alt="Send E-Mail" /></a></td>
</tr>
</table>
</div>
</div>

Current state:

It runs in the link above ( The current app ) but in any other document.

Any help would be tremendous!

My dead line is Mon morning .... or I will likely end up as the previous coder. LOL

Paul Dwinell

Digital Tech Frontier, L.L.C.

www.DigitalTechFrontier.com/augmented-reality-solutions/

Attachments

FLARMulti.swf
Size : 165.73 KB Downloads : 2539 Download

Response title

Attachments

jQuery Forum

Cannot seem to replicate jQModal functionality ... any help is appreciated :)

Attachments

Statistics

Tags

Actions