|
JavaScript - Adding Preview To The New Swfobject
hi, i upgraded my SWF object about 3 months ago and have been trying to find a way to add the preview back in there, but dont know how with the new process since what i had originally was ancient.
the old code was like this Code:
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
the issue is that the new way is totally differnent - no longer do you have the javascript and embed on the same page, the javascript goes in the header and the view code goes in the file now. so how do i add this to the new way of coding. Code:
s1.write('preview');
here is the new way of doing it and this is in the php header Code: <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player", "9.0.0");
</script>
and then this is in the the files you want to display the video on Code:
<object classid="clsid: my class id went here" width="175" height="175" id="player" name="player" align="middle">
<param name="movie" value="player.swf" />
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
i think i can add it is a param flashvar but im not sure how on this code Just fyi i upload my vids using FFMPEG so in the dir there is a flv and associated jpg for the view for each vid. in other words there is a 1.flv and a 1.jpg i just need to figure out how to display the jpg for each vid in the code above. Similar TutorialsI'm going to guess that its something simple i'm missing.. or maybe IE just really doesnt like flash movies with transparent bg's? Code appears to work fine on chrome, ffox, and IE9- but im having trouble with older browsers. Any ideas would be extremely welcome. Using basic swfobject implementation- nothing special, but i keep getting 'movie not loaded' error when i right click where the movie is supposed to be: <div id="welcome"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" data="advanced/welcomeanim.swf" width="500" height="130" id="welcomeanim" > <param name="movie" value="welcomeanim.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="transparent" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="transparent" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="advanced/welcomeanim.swf" width="500" height="130"> <param name="movie" value="welcomeanim.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="transparent" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="transparent" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowScriptAccess" value="sameDomain" /> <!--<![endif]--> <div><img src="img/welcome.png" width="550" height="130" /></div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> I'm getting Error: Object doesn't support property or method 'addEvent' in my webpage. I'm trying to embed a flash carousel in an asp.net page and I have this, but nothing is showing on my page. Using IE9 and FF4 Code: <script type="text/javascript">
window.addEvent('load', function() {
var flashvars = {
xmlLocation: "<%=ResolveUrl("upload/data.xml")%>",
imageLocation: "<%=ResolveUrl("~/upload/")%>"
};
swfobject.embedSWF("<%=ResolveUrl("~/upload/Carousel-Test.swf")%>", "FlashContainer", "576", "242", "10.0.32", "", flashvars, null, null);
});
</script>
The xml has some settings for the images and all my images are in the upload folder in my project. I have reference to the swfobject js in the masterpage (head) and the homepage inherits from it: Code: <script src="javascript/swfobject.js" type="text/javascript"></script>. Anyone give some suggestions? Hi i just switched over from 1.5 to 2.2 swfobject. in my admin area only the first video is showing on the page, but on the user side they all show up just fine, same code.. strange. but anyway i was reading this.. http://groups.google.com/group/swfob...1e29c96933dfa0 and it confused me alittle because i have no idea how many vids are going to be display, i have them displaying from a loop. i guess what the article is saying is that you have to call javascript for every one your going to display and use a dif label name for it. but as i said i have no clue, am i suppose to list that 100 times on the page in case i have 100 videos... javascript is really not my cup of tea lol... here is my code.. in the head i have this ... Code: <!-- added for swfobject 2.2 -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player", "9.0.0");
</script
and then in the body i have this.. and like i said there might be 100 vids but it only shows the first one. Code:
begin the loop then do this
<div style="float:left;">
<table border="0" align="left"><tr>
<td align="center"><td align="center"><?=$sql_array->vid_name?><br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="175" id="player" name="player" align="middle">
<param name="movie" value="player.swf" />
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</td></tr></table>
</div>
loop again till done...
so what do i do to show multiples on a page. Hey guys I should preface this by saying that this is not for my own site, or my own code; a friend has gone on holiday and needed this project fixing while he was away. Unfortunately my experience with jQuery is almost nil and everything was coded by someone else, so I'm really tearing my hair out. This is a Wordpress installation running Thematic with two child themes, one of which uses Ajax calls to grab page content. The issue is that the Ajaxified calls stop the swfObject content from being loaded. Compa http://dev.segolondon.com/wp292/media/ <- Flash content loads versus: http://dev.segolondon.com/wp292/#wp292/media/ If you take a look at the code of the two pages, you'll see there are no swfobject.embedSWF() calls on the Ajaxified page. It seems as though the jQuery calls are pre-empting the JS/Flash detection, so the swfObject code is never even written to the page. The actual custom, handwritten code (i.e. not from a library or a plugin) on this site is minimal, so I'm grasping at straws to fix this. I read somewhere about using a script block like this: Code: <script>
$(document).ready(
function() {
// Make the swfObject call
}
);
</script>
But I'm not really sure where to put it since there are so many plugins used, all with slightly different embed methods. Any help would be very gratefully received! Hello I am trying and failing to embed a flash widget onto my website. I think I have the problem narrowed down to this. The javascript I have is not placing all the needed parameters in the swfobject call. Here is the relevant code. Code: $flashVars = array();
$flashVars["uid"] = $partnerUserID;
$flashVars["partnerId"] = KALTURA_PARTNER_ID;
$flashVars["ks"] = $ks;
$flashVars["afterAddEntry"] = "onContributionWizardAfterAddEntry";
$flashVars["close"] = "onContributionWizardClose";
$flashVars["showCloseButton"] = false;
$flashVars["Permissions"] = 1;?>
<div id="kcw"></div>
<script type="text/javascript">
var params = {
* * * * allowScriptAccess: "always",
* * * * allowNetworking: "all",
* * * * wmode: "opaque"
};
// php to js
var flashVars = <?php echo json_encode($flashVars); ?>;
*<//!--embed flash object-->
swfobject.embedSWF("http://www.kaltura.com/kcw/ui_conf_id/1000741 ", "kcw", "680", "360", "9.0.0", "expressInstall.swf", flashVars, params);
</script>
And here is what the page is outputing Code:
<script type="text/javascript">
var params = {
allowScriptAccess: "always",
allowNetworking: "all",
wmode: "opaque"
};
// php to js
var flashVars = {"uid":"ANONYMOUS","partnerId":"254892","ks":"ZDNiOTA3NGEyNDc5MzdhZTk0YWQ2NDJmYzUyZDE3ZjkwYTM3YTU3NXwyNTQ4OTI7MjU0ODkyOzEyNzM1MjI5NjU7MjsxMjczNDM2NTY1LjA0ODg7QU5PTllNT1VTOw==","afterAddEntry":"onContributionWizardAfterAddEntry","close":"onContributionWizardClose","showCloseButton":false,"Permissions":1};
<//!--embed flash object-->
swfobject.embedSWF("http://www.kaltura.com/kcw/ui_conf_id/1000741 ", "kcw", "680", "360", "9.0.0", "expressInstall.swf", flashVars, params);
</script>
From what I can tell its just placing the words flashVars and params where the values should be. I have tried the few things I know but I am not too handy with javascript. Any ideas? Thanks for your help Hi there - im new to website making . i have made my own site in adobe flash cs 4 /photoshop and now im trying to optimize with swo (swiftobject) using adobeair. I must say that im following Lydia.com tuts on video. Anyway when i try to generate and embed using adobe air, the guy on the video that im following he is setting the dimensions to 100 %. My web site is 850x600 pix centeret on the screen with grey background before i started the swo thing. I also choose to set the dimensions to 100% because he says so and when i do that and preview in the browser the site gets really , really big - what am i doing wrong? thanks in advance. jeppe
Hello I currently have a little problem with displaying an image preview on a form basically when the form is filled out, the form fills out a birth certificate for bears. Below show the layout of the form before the certificate is filled out So hopefully you get the idea from this screenshot You browse for the image and once u have selected the image it will appear in the "orangy" box called image preview. would any1 have any codes that would make this functionable? If so it would be very much appreciated I am trying to mimic the video mouseover preview which can be viewed at the website below once you put your mouse over a picture a video preview window is opened which plays back the video and stops once the mouse is moved. http://videocopilot.net/tutorials/ How can i mimic this effect... any suggestions? I am setting up a store for stationery. One cool aspect is for the online user to be able to type in what they want on the stationery, choose the font, and hit a "PREVIEW" button, showing an exact preview of what it should look like. I am having trouble on how to do this. Virtuemart and its forums are useless and helpless. Joomla suprisingly doesn't have an extension for this. Looks like I'm gonna have to hard code this baby. What would the best angle be to attack this? Should I try some interactive flash/AS3 or some good ol JS? There will be over 500 products so I am trying to pick YOUR expert brain before I tackle this beast. Thanks for any input! I would like to create a print preview window that will display only the main content of the page that a person would really want to print. I found a script that didn't do that, but that I was able to adapt, somewhat. It doesn't fully work though and I can't get it any better. Here is what I have... <html> <head> <title></title> <script LANGUAGE="JavaScript"> function displayHTML(printContent) { var inf = printContent; win = window.open("print.htm", 'popup', 'toolbar = no, status = no'); win.document.write(inf); } </script> </head> <body> <div id="printarea">Print this stuff.</div> <a href="javascript:void(0);" onclick="displayHTML(printarea.innerHTML)">Print Preview</a> </body> </html> In mozilla it opens the new window but continues to be thinking about something indefinitly. In Safari the new window opens but there is no content. In IE it seems to work fine. I haven't tested NS yet, nor have I tested any of this on a PC. Thanks for any help. Hi, I've been inherited a website from another web developer and I need to fix his code. In one part of the admin system, the user selects a template for the newsletter to use, types the subject and body text into a form, then submits it using a submit button. There is no problem with this code and the user is able to send newsletters out using the standard template (there is only one template). However, they require a preview button to check it looks how they want it to on the template. to get to the preview page (preview_mailing.php?template=1), there is a Javascript preview button, which uses the following code: Code: <script>
function get_radio_value()
{
for (var i=0; i < document.add_form.template.length; i++)
{
if (document.add_form.template[i].checked)
{
return rad_val = document.add_form.template[i].value;
}
}
}
</script>
<a href="javascript:;" title="Preview" target="_self" class="button" onclick="MM_openBrWindow('preview_mailing.php?template=' + get_radio_value(),'preview','scrollbars=yes,width=600,height=800');return false">Preview</a>
<br/>
When you click on this button, however, it does absolutely nothing and shows javascript:; as the link, but I'm sure this is what it is meant to show as the link? Hello every one never really used a board for something like this but my java is a little limited so i need some help here if possible! I have a page with 5 file inputs and 5 img tags i have everything working but preview of course changes all the img tags so no madder what browse button i choose all fixed img tags are updated with that preview. here is a code i found and messed with a little cant seem to figure out how to add a loop or something to update just the called tag if any one could help Java Script: <script type="text/javascript"> <!-- Begin /***** CUSTOMIZE THESE VARIABLES *****/ // width to resize large images to var maxWidth=115; // height to resize large images to var maxHeight=115; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="/images/evolve/badpic.jpg"; /***** DO NOT EDIT BELOW *****/ function preview(what){ var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,sou rce.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++){ if (fileTypes[i]==ext){ break; } } globalPic=new Image(); if (i<fileTypes.length){ //FireFox try{ globalPic.src=what.files[0].getAsDataURL(); }catch(err){ globalPic.src=source; } }else { globalPic.src=defaultPic; alert(fileTypes.join(", ")); } setTimeout("applyChanges()",200); } var globalPic; function applyChanges(){ var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x; x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y; } // End --> previewField is the key i think and also of course the imageout jsut dont know how to go about making the loop if this was perl no problem but like stated above i know little about java coding but minor changes. below here is the some of the form code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> </tr> </table> also ther is one include: <script type="text/javascript" src="/java/si.files.js"></script> i went through this code file and the change does not appear to be where the change should ocur im sure its in the actually script need to loop through the images[] field i would think like i would in php The only thing i could think to do is paste the script code 5 more times and change each variable to 1 2 3 4 5 but then ill have a big php code page there would be a way to make this work i would think Thanks all and im here for PHP or Perl questions so any help would be great! If there is a better approach any input would be great! when client uploads any image at that time before uploading the image i want to display that image to the client. so please provide me the snippet of javascript to achieve this thing. Code: <img id="previewField" name="previewField" width="100" height="100" /> <input type="file" id="picField" onchange="document.previewField.src=this.value;"> but i am not able to preview this image on mozilla so please provide me the solution for this or if it it possible using ajax then also please provide the solution. the altimate goal is: the local image which is suppose to be uploaded should first be previewed to the client or uploder. My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet. http://www.kristynaswebpages.com/home2a.html I have this in the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"],
["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"],
["http://www.kristynaswebpages.com/falcon_3.jpg"],
["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom). I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg" If anyone could help, that would be so awesome! area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ?? Plz suggest me something ........... Samaiya Hi guys, On the back of my image preview issue (which is now fixed) I am having another problem. I am trying to get a file upload that will allow you to preview the html page in a popup on the click of a button. Can this be done? I have the preview button that creates the popup but at the moment it only shows the name of the file that's to be uploaded. Code below Code: <html>
<head>
<title>File Uploading Form</title>
</head>
<body>
<h3>File Upload:</h3>
Select a file to upload: <br />
<form method='post' action='upload.php' enctype="multipart/form-data" class="pure-form">
<input type="file" name="files[]" multiple="multiple" id="files">
<input type="button" value="Preview" onclick="displayHTML(this.form)">
<input type='submit' value='Submit' class="pure-button pure-button-primary"/>
</form>
</body>
</html>
<script>
function displayHTML(form) {
var inf = form.files.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
</script>
Reply With Quote 01-24-2015, 04:56 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts Can you use the right-click button on your mouse and "View Source", or is this not what you are trying to do? Reply With Quote 01-24-2015, 06:58 PM #3 Foster View Profile View Forum Posts Regular Coder Join Date Nov 2011 Posts 268 Thanks 8 Thanked 4 Times in 4 Posts Not what I'm trying to do. I want to be able to click the button and the file that is waiting to be opened should pop up in a new window. Reply With Quote 01-24-2015, 09:51 PM #4 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts LOOK at your code! Code: <input type="file" name=" files[] " ...rest doesn't matter... > and var inf = form. files .value; Those are *NOT* the same name in JavaScript. Only in PHP would the be (sort of) the same (and not even quite so, there). Anyway, I don't see how you can expect an HTML file that is not yet uploaded to look the same this way as it will coming from the server. ONLY if it is restricted as follows could you get the : (a) only <img> tags that use COMPLETE URLs as their src= (that is, src="http://somesite.com/somepath/someimage.pn") (b) only href's (in any kind of tag) that use COMPLETE urls. (c) only <script> tags that use src= complete urls. (d) probably other things I didn't think of Any RELATIVE urls (e.g., <img src="/images/xxx.png"/>) will be relative TO THE CLIENT MACHINE, not to the server. And how that relative path works may vary from browser to browser. Offhand, I'd say this is not a good idea. I think you should allow the upload and then preview the uploaded file in a popup window, yes, and give the user the opportunity to delete the just-uploaded file from the server. Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html 1) The script works for Firefox, no good for IE. How to make it works for IE? 2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution? Code: <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
AMAZON has some nice future for book preview and they can display book cover/back like real book. For instance Rational Astrology: as a physical model (Chinese Edition): Julian J.-L. Ting: 9781493734559: Amazon.com: Books Presumably that is done by javascript? Is there any free code available for doing such business? Hi I hope someone can help me or direct me to the right place.... Here is the situation. I am a graphic guy and do some web design but am not really good with javascript. I am using the enlargeit.js program for the photo viewer on www.blackwoodsconcrete.com in the galleries. It has worked wonderfully up till now. I recieved new pictures from the owner to post on his page and they will not open when i view them live. I use dreamweaver cs5 and when i look in preview mode, they work great. They are standard jpg images. see http://www.blackwoodsconcrete.com/example_error.html for an example. The top pic does not work and the rest do... I have resized them, changed file formats, opened them in photoshop and edited them, and basically anything else you could think of, i tried. Even if i open one of the working photos in photoshop and place the new one over it and save it as something completely different it still does not work! everything else does. Does anyone have any clue what to do? Thanks in advance! TK |
|||||||