Integrate Imagevue into HTML
Posted: 26 Oct 2007, 01:26
(This tutorial is for Imagevue V1)
A few people have asked for directions on how to integrate Imagevue into a HTML page, so I have taken the time to create some examples and explain the basics.
The javascript embed method ...
First of all, I want to make everyone aware that Imagevue is using a javascript to embed the imagevue swf file into a web page. Why? Because some new web browsers(Internet Explorer) have restrictions on embedding ActiveX objects(like the imagevue SWF). We therefore use javascript to overcome this, and more specifically, we use the SWFobject javascript from deconcept as preferred choice. Although you can embed Imagevue SWF without using javascript(there is an example further down this page), I recommend using javascript as it is industry standard and even page creation tools like dreamweaver have their own javascript for embedding SWF. The SWFobject javascript is included with Imagevue in "javascript/swfobject_source.js"
Download examples here:
imagevue_html.zip
The javascript and 3 html examples are provided in the zip file, and they are explained below.
Example 1 - html_integrate.html
The default file that contains the Imagevue(imagevue.swf) is the index.php file. Since it is PHP, some people get a little confused by the code, so I have created a basic HTML file where the gallery is embedded:
html_integrate.html
In the default code, the gallery is set to cover 100% of the browser stage. You can see the values for width and height set to 100%.
Example 2 - html_integrate_2.html
In the next example, I have created a basic website layout, where Imagevue is embedded at a set size within the site:
html_integrate_2.html
In the code for this page, I have set the gallery dimensions to 900x550. It is contained within a <div> tag on the page. You can also create the page with tables or however you like, as long as you remember to set the height and width parameters in the SWFobject.
Example 3 - html_integrate_no_javascript.html
If you for some reason need to embed Imagevue without using javascript, you can use the example below:
html_integrate_no_javascript.html
This code is the default code for embedding SWF into html pages.
Other settings to worry about ...
If you are embedding Imagevue from a remote location, you need to use the globalpath setting to tell the Imagevue gallery where its 'home' is. For example, you want to put the gallery on your homepage www.mywebsite.com but the gallery itself is located in a folder www.mywebsite.com/gallery. Add the globalpath setting as a parameter:
The same goes for any other native Imagevue parameters you need to add. For example, you want to set the background color to be red without changing the configuration file. Add the line:
so.addVariable("bgcol", "990000");
Related links:
Download the html example files
Additional HTML examples
Using the slideshow as a pagecomponent
More about the SWFobject javascript
Did I forget anything? Any questions?
A few people have asked for directions on how to integrate Imagevue into a HTML page, so I have taken the time to create some examples and explain the basics.
The javascript embed method ...
First of all, I want to make everyone aware that Imagevue is using a javascript to embed the imagevue swf file into a web page. Why? Because some new web browsers(Internet Explorer) have restrictions on embedding ActiveX objects(like the imagevue SWF). We therefore use javascript to overcome this, and more specifically, we use the SWFobject javascript from deconcept as preferred choice. Although you can embed Imagevue SWF without using javascript(there is an example further down this page), I recommend using javascript as it is industry standard and even page creation tools like dreamweaver have their own javascript for embedding SWF. The SWFobject javascript is included with Imagevue in "javascript/swfobject_source.js"
Download examples here:
imagevue_html.zip
The javascript and 3 html examples are provided in the zip file, and they are explained below.
Example 1 - html_integrate.html
The default file that contains the Imagevue(imagevue.swf) is the index.php file. Since it is PHP, some people get a little confused by the code, so I have created a basic HTML file where the gallery is embedded:
html_integrate.html
Code
<div id="imagevue">
www.photo.gallery imagevue gallery module
</div>
<script type="text/javascript">
var so = new SWFObject("imagevue.swf", "imagevue", "100%", "100%", "6", "#FFFFFF");
so.write("imagevue");
</script>
Example 2 - html_integrate_2.html
In the next example, I have created a basic website layout, where Imagevue is embedded at a set size within the site:
html_integrate_2.html
Code
<div style="height:550px;" id="imagevue">
www.photo.gallery imagevue gallery module
</div>
<script type="text/javascript">
var so = new SWFObject("imagevue.swf", "imagevue", "900", "550", "6", "#FFFFFF");
so.addVariable("backimage", "false");
so.write("imagevue");
</script>
Example 3 - html_integrate_no_javascript.html
If you for some reason need to embed Imagevue without using javascript, you can use the example below:
html_integrate_no_javascript.html
Code
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%" title="imagevue">
<param name="movie" value="imagevue.swf" />
<param name="quality" value="high" />
<embed src="imagevue.swf" quality="high" pluginspage= "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%"></embed></object>
Other settings to worry about ...
If you are embedding Imagevue from a remote location, you need to use the globalpath setting to tell the Imagevue gallery where its 'home' is. For example, you want to put the gallery on your homepage www.mywebsite.com but the gallery itself is located in a folder www.mywebsite.com/gallery. Add the globalpath setting as a parameter:
Code
var so = new SWFObject("gallery/imagevue.swf", "imagevue", "800", "500", "6", "#FFFFFF");
so.addVariable("globalpath", "gallery/");
so.write("imagevue");
so.addVariable("bgcol", "990000");
Related links:
Download the html example files
Additional HTML examples
Using the slideshow as a pagecomponent
More about the SWFobject javascript
Did I forget anything? Any questions?