Forums

I am new to Imagevue, but I am learning quickly.

How can I integrate imagevue into an existing website. For example, I would like my gallery to run within my website instead of directing me to a gallery page. I want Imagevue to run inside of my site, with normal layout.

Currently when you go to the Imagevue gallery, my website does not appear here, it looks as tho the user has been re-directed to a different page.

Thanks for your help.

Integrating Imagevue into a custom webpage is fairly straight forward, although I hope to release a specific tutorial about this soon.

Basically, take a look at the source in the provided file "embedDemo.html" in your download. Here is the code for generally embedding the imagevue2.swf in to your own custom html page. There are two main steps:

1. As in this example, you will need to add the SWFObject javascript to your document:


2. Then you need to add the code for embedding the SWF, for example:


Some further tips:

# Remember to change the PATHS according to where the files are located relative to your document.

# You can change the "width" and "height" parameters where you now see the 100% values.

# It is recommended to tweak the SETTINGS of your gallery to better fit within a compromised area when you are not using 100% of the screen like Imagevue does by default. For example, decrease thumbnail- and image margins, and perhaps remove some unimportant interface items to create a cleaner layout.

Thank you for your reply. The information was a good start, but didn't work for me. Perhaps I need a tutorial, like you mentioned. That would help tremendously.

Also, I tried to the embedDemo.html. It only loaded properly with Safari 5. It would not render properly with Firefox 3.6, IE 8, or Chrome 9.

Do you have a link to your embedDemo and your test html? embedDemo.html works fine for us in all browsers, so I am not sure what you did with it. Maybe you placed it incorrectly ...

http://imagevuex.com/demo/x2/embedDemo.html

Hello Again,

I am interested in using your product if I can get it to work right. I have tried everything that I can to embed your Gallery into my existing site.

This first link is a page where I have inserted the code provided on this forum, into my existing page, the gallery does not load but the header is properly placed and aligned.
http://www.amhphoto-amy.com/_client/embedDemo.html

This second link is the original embedDemo.html file that was provided with the download. The gallery will load, but when I insert my header syntax into the page, it shifts and becomes improperly aligned.
http://www.amhphoto-amy.com/_client/embedDemo1.html

(/_client is the folder that contains all the downloaded files from the imagevue package on my web server)

I need Imagevue to load within the first link so that my header spacing is fluid with the rest of my site. I am quite stuck and confused at this point. I can't find a way to make the gallery load into my existing page and layout.

Any advice would be most appreciated.

Thanks,
Brad

There is only one small step here to get it to work. You have wrong path to the javascript which embeds the gallery:

The file is not there!
http://www.amhphoto-amy.com/_client/iv- ... fobject.js

It should be:

I think perhaps it is better that you get that right for your custom integration before we try to solve the issue with your other link. Fixing the code above will embed the SWF correctly into your custom file.

Karl,

Thank you for your speedy reply.

I have changed the code at http://www.amhphoto-amy.com/_client/embedDemo.html as explained, yet the gallery will still not load. I am clearly missing something.

Please Advise and thank you for your patience! Thanks.

After several frustrating hours, I have de-bugged my problem. I want to share with you in case this information can help someone else.

There was this code in the provided embedDemo.html:
<style type="text/css">
* { margin: 0; padding: 0; }
body { background: #000; color: #3E75E9; font: 12px/18px Tahoma, sans-serif; }
h1 { font-size: 36px; line-height: 36px; margin: 0 0 18px 0; font-weight: normal; }
.page { padding: 18px 36px;}
.imagevueWrap {
margin: 0 0 36px 0;
height: 800px;
}
</style>

I had to strip out two usable parts (to avoid body and h1 conflicts) and add to the current .css of my site:
.imagevueWrap {
margin: 0 0 36px 0;
height: 800px;
}
.page { padding: 18px 36px;
}

The absence of these two selectors in my .css was causing the gallery not to load under my site.

http://www.amhphoto-amy.com/_client/embedDemo.html is now running perfectly, with all my header items perfectly in sync with the rest of the site. I am going to have my client review the gallery, make sure it will suit her needs, and if we use the product I will purchase a license as I feel it is a great piece of software. She will be able to update her client galleries without needing to code any html and without my assistance. Exactly what I needed.

Many thanks, and I hope that you could develop a tutorial or create an easier process for people to implement Imagevue into their existing sites. That would have greatly reduced my work and frustration!



One additional question, how can I disable the opaque vertical bars that scroll on the opening image????

That is an interesting fix - I could not imagine how CSS could get in the way of the javascript executing properly. Glad you solved it, and thanks for the other feedback!


This is in fact a filemod effect called "photoblinds". Just navigate to your start folder (where this image is), and in the dropdown list where it now says "photoblinds", change it to "randomimage".