JavaScript - Image Preview

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.

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!

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 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.

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!

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 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.

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!

Hi EveryBody,

I want to add a preview of html page feature in my project.
I had created registration form and I need when user click submit button,user should get a
preview of registration form after that further operation will b performed.

Guys just tell me how can i achieved this.
Any clue or sample code so i can learn it and implement in my project.

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

Hi,

I've got a form, and it contains a JS function to validate input (e.g. check for empty fields / valid email etc).

I currently only have one submit button, which takes a user to a preview screen for the data they entered.

I'd like to add a 2nd button to allow them to send the data right away, skipping the preview bit.

However, I can't see how to have one form, with 2 buttons, and for each button to have a different destination, AND for each button to call the form validation JS.

In fact, what I'm trying to do is much the same as this newthread page on this form, as it has the "Submit New Thread" and "Preview Post" buttons, each taking the user to a different page, each firing the form validation JS.

I'd be grateful for any advice about how to do this.

Thanks!

Hello codingforums,

There are various widgets and plugins that show link preview via tooltip or iframe,
So as I am trying to continuously improve web sites experience with new trends and web

functionalities - thus it come the task for uniform link preview via div and iframe.
This is the script that use attribute id's but for the complete solution it would be required to

display link within event 'this' or something -any suggestions and help are very appreciated.

Thanks
Code:

        <script type="text/javascript">
        function toggleDiv(divid){
            var div = document.getElementById(divid);
            div.style.display = div.style.display == 'block' ? 'none' : 'block';
            }
    </script>

    <div class="toggle"><a href="javascript:toggleDiv('panel1');" >Toggle 
Panel 1</a></div>
    <div id="panel1" class="panel">
        <h2>Panel 1</h2>
        This panel contains text
    </div>
    <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle 
Panel 2</a></div>
    <div id="panel2" class="panel" style="display:block;">
        <h2>Panel 2</h2>
        This panel contains external url content
<iframe src="http://" width="100%" heigth="500"></iframe>
    </div>

<div id="panel1" class="panel">
<h2>Panel 1</h2>
This panel starts closed because style='display:none' is defined in
the style section of the head
</div>
<div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle
Panel 2</a></div>
<div id="panel2" class="panel" style="display:block;">
<h2>Panel 1</h2>
This panel starts open because of style='display:block'
</div>
<a href="javascript:toggleDiv('panel1');" >Another Link to Toggle Panel

1</a>
[/CODE]

Hi All,

I am trying to make changes to our navigation bar. I first open in Contribute my homepage and then I go to edit the page in Dreamweaver. I make changes to the navigation bar but then when I go back to Contribute and preview or publish it removes my changes and goes back to the old navigation bar. Please help! My programming friend said it might be a permission problem because someone else did the original structure and build for the website, but this is for a company that he only does contracted work for so I am not sure this is the case. See code below:

Original nav bar code:

Code:

<script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script>

<table id="m1mainSXMenu2" cellspacing="1" cellpadding="10"  style=";width:790px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='About Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">About Us</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Programs</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Getting Started';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Getting Started</a></td>

</tr>
</table>

New Code:

Code:

<script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script>

<table id="m1mainSXMenu2" cellspacing="1" cellpadding="10"  style=";width:790px">
<tr style="text-align:center">
<td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td>
<td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='Our Culture';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">Our Culture</a></td>
<td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >What We Offer</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Our Knowledge Base';return true" onmouseout="window.status='';return true" class="m1CL0" href="ourknowledgebase.php" target="_parent">Our Knowledge Base</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Customer Service';return true" onmouseout="window.status='';return true" class="m1CL0" href="customerservice.php" target="_parent">Customer Service</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Testimonials';return true" onmouseout="window.status='';return true" class="m1CL0" href="hrtestimonials.php" target="_parent">Testimonials</a></td>
<td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Contact Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Contact Us</a></td>

</tr>
</table>

Hi,

Since my knowledge of coding and certainly javascript is quite poor, I hoped anybody could help me out with my problem. Thanks in advance!

Well, for a typeface I am designing, I wanted to build a website where visitors can simply test the font. Many websites that offer fonts, have the ability for the visitor to test the font. They have to type the desired text into a 'textbox' and the website processes a preview for the user of how their text will look in the selected font.

That is what I want to achieve, but with a little twist.

The font consists of an animated .gif per character (glyph). So, is it possible in any way to assign a .gif to a letter? When the user types 'A', the animated .gif for the letter A should appear as 'font preview'.

I know it sound complicated, but I would be very thankful to those who, at least read this post and those who can help me finding a solution.

This post doesn't contain any code as advised in the Sticky on how to post a Javascript question. But I was hoping someone could give me some hints or tips on resolving this problem.

Thanks again!

Kind Regards.