Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13992
Joined: 30 Sep 2006, 03:37

Integrate Imagevue into HTML

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
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>
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
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>
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
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>
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:
Code
var so = new SWFObject("gallery/imagevue.swf", "imagevue", "800", "500", "6", "#FFFFFF");
so.addVariable("globalpath", "gallery/");
so.write("imagevue");
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?
 
Lupusk9
Posts: 6
Joined: 25 Jun 2009, 05:08

25 Jun 2009, 07:46

Hi i am having trouble implementing this onto my website. I have made a website ready for content and after finding this i was excited cause it took the work out of making a display of images. However, i cannot figure out how to get it into a certain area on my website after googling, and viewing this forum MANY times. So i may need someone to walk me through it from the beginning.

the site is www.zanderscreations.com
and the location i want it is in the big box under the welcome text.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13992
Joined: 30 Sep 2006, 03:37

25 Jun 2009, 18:29

Lupusk9 wrote:Hi i am having trouble implementing this onto my website. I have made a website ready for content and after finding this i was excited cause it took the work out of making a display of images. However, i cannot figure out how to get it into a certain area on my website after googling, and viewing this forum MANY times. So i may need someone to walk me through it from the beginning.

the site is www.zanderscreations.com
and the location i want it is in the big box under the welcome text.
You need to follow the example files, for example this one here:
https://www.photo.gallery/soda/embedDemo.html - It shows what is required to embed the gallery.

For one, you have not included the path to the SWFObject javascript:
Code
<script type="text/javascript" src="imagevue/javascript/swfaddress.js"></script>
 
Lupusk9
Posts: 6
Joined: 25 Jun 2009, 05:08

25 Jun 2009, 18:50

I meant to say click the products link. I put the code in that page

Also, like i said, i HAVE looked at every example i could find on your website as well as many google searches. None of which have worked or looked like the result i am going for. it just acts like i do not have javascript enabled when i do.
 
Lupusk9
Posts: 6
Joined: 25 Jun 2009, 05:08

26 Jun 2009, 02:36

nevermind, a simple iframe did the trick

http://www.zanderscreations.com/products.html

thats the result. now i just have to play with the settings i guess until i can get more thumbnails to show up