Embedding Lightroom Flash Gallery into Exisiting HTML Page

  • Thread starter Thread starter Caprice ~ de Lorm Designs
  • Start date Start date
Status
Not open for further replies.
C

Caprice ~ de Lorm Designs

Guest
Does anyone know how to embe a Lightroom Flash Gallery into an existing HTML page? I have a client who wants to include a photo gallery onto their main page, however, simply embedding the swf that the LR Flash Gallery produces does not result in the slideshow working during testing or upload.

I believe that there is some extra coding needed in an xml file and perhaps in the html of the desired page.

Has anyone done this and have some thoughts, resources to share?

I am using LR v 1.3 and Dreamweaver CS3.

Thanks!

Caprice
 
Sort by date Sort by votes
Upvote 0 Downvote
Hi Caprice, I'm sure the web guys will drop by later.

Denis, I think Caprice means that she needs to embed the gallery into the page itself, rather than just a link to another page. Or so I understood earlier by email - I could be wrong!
 
Upvote 0 Downvote
Victoria Bampton;3'66' said:
Hi Caprice, I'm sure the web guys will drop by later.

Denis, I think Caprice means that she needs to embed the gallery into the page itself, rather than just a link to another page. Or so I understood earlier by email - I could be wrong!
Click to expand...
Rereading, I think you are right Victoria. (Embed on main page). Will let my seat to others then... :|
 
Upvote 0 Downvote
One way to embed a slideshow of your images in a website is to set-up a Slideshow in the Slideshow Module and Export it to PDF (be sure to first render adiquate previews!) and then upload the PDF file to SlideShare.com (free service like YouTube for slideshows, PDF, Powerpoint and more) and they provide you with code to copy for embedding the slideshow anywhere, just like YouTube!

Don
 
Upvote 0 Downvote
Matt! Joe! Sean! Where are you guys?

I've done it in the past with one of Matt's Monoslideshow galleries, and embedded that into a main web page I was working on, but the standard galleries seem to have gained a lot more waffle around them.
 
Upvote 0 Downvote
Caprice you may want to upgrade from 1.3 to 1.4.1 as well.
 
Upvote 0 Downvote
I embedded a Lightroom-generated Postcard Viewer gallery in our home page:
http://www.scphotographic.com

Now you want to know how I did it, don't you? It was a lot of experimenting, and it's probably going against a bunch of html rules, but it seems to work OK. Most of the fiddling was to get it to sit between the header and the footer.

I'm on LR 2.1/Dreamweaver MX2''4, reasonably dreamweaver competent, but no html genius, so I can't vouch for the acceptability of what I did in terms of protocol; it was all achieved pretty much by trial and error.

Our site, as you will see, is pretty straightforward, with a header, a footer, and simple content between. It uses local css.

Backup your entire site and work only on a second copy. This way when it doesn't work out you can revert to what was working before :-)
Generate your gallery in LR, and 'Export' (rather than 'Upload') at the bottom of the RH panel and save it somewhere convenient.

Open the index.html file from the gallery. Open the index.html from your own site.

Cut and paste the bit from the LR index.html which does the business, ie (in my case) the bit starting <div id="flashcontent"> down to its closing </div>. Paste it after the closing </div> of the header in your index.html file.

Copy the other files from the folder where LR created its index.html and paste them into the folder where your website index.html resides.

Copy the images folder from the LR folder and paste it into your site - but be careful, because you may have an existing images folder, which has all of your images for your site. If so, rename the LR Images folder to eg LRImages before you copy it. If you do this, you will have to edit the references in your gallery.xml (which you copied from LR to your site) file to point to the new folder.

Go back to your LR index.html and scroll to the top. Find the line which starts <script type= and ends with </script>. copy it and paste it into you own index.html at the same place inside the <head> tag.

You will also have to cut/paste the appropriate bit inside the <style type="text/css"> tag. I just copied the whole tag and pasted it, so I now have two of these in my index.html file - I don't know if maybe I should have amalgamated them, but it works.

I also have a div#flashcontent in the original (my site) <style type="text/css"> tag, which I think I wrote from scratch. Likewise, below @media screen I have a * html div#flashcontent statement, which again I think I wrote from scratch.

Now all you have to do is spend lots of time fiddling with margins, padding and positioning until it looks right!

By the way, the text on our site above the postcards is an extra table I added inside the <div id="content"> tag, before the <div id="flashcontent"> (which is nested inside <div id="content">).

I hope this makes sense. Depending on which flash gallery you use, there may be some differences - I've only tried this one.

I hope I haven't misssed anything!

Best of luck. In the worst case, you can always go back to your saved copy!

Patrick Cunningham
 
Upvote 0 Downvote
It's actually much easier than all that. You need to use SWFObject.js to load your Flash content, specifying a base location for your gallery.

I don't have the code handy at the moment, as I'm at school and my resources are home at the moment. But TTG Stage can be used to embed the Lightroom Flash Gallery into a page, and therefore contains all the code you'll need (and the swfobject.js file too).

TTG Stage is a free download from my site. Get it here. Read the instructions for usage on the page and set it up for the Lightroom Flash Gallery. After exporting, do the following:

1) Copy swfobject.js from the /resources/js/ folder for your own use.

2) Open index.html in a text-editor.
a) Locate the <script src="resources/js/swfobject.js"></script> line in the head of the file and copy it into your new page.

b) Locate the call for swfobject in the body of the page. It will be located with a DIV, I think called "flashcontent". The code will look like this:
​
<div id="frame">
<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
<script type="text/javascript">
var fo = new SWFObject("simpleviewer/viewer.swf", "viewer", "1''%", "1''%", "7", "#''''''");
fo.addVariable("preloaderColor", "'xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.addParam("base", "simpleviewer/");
fo.write("flashcontent");
</script>
</div>
</div>

I'm pasting in the code for SimpleViewer because it's what I have available right now for reference; the Lightroom Flash Gallery code will be similar, but setup for that gallery. Make sure you copy the <div id="flashcontent"> and </div> tags. They're important.

I've colored red the two areas you'll need to watch to make sure they make the location of your gallery.

If you have any further problems, post here and I'll check back later.

Cheers,
Matt
 
Upvote 0 Downvote
Thank you to those that have answered thus far. I will try the recommendations out and provide feedback to all. I did not know about TTG Stage - sounds like a handy resource.

I did figure out one way to to embed the gallery onto a page. The key is that the gallery and all of the associated files have to be in the same folder as the html file being created or altered for things to work. I had been trying to embed the gallery using a reference to another folder and the slideshow would not present.

It sounds like your options might provide a more efficient way for managing slideshows and embedding them into pages. Thank you for your input!

Caprice
 
Upvote 0 Downvote
Caprice,

It's not always ideal to have your resources sitting in the same location as your page. The code I provide above allows you to sit your resources anywhere and all them to the page, modifying the "base" as necessary to find them.
 
Upvote 0 Downvote
Embedding Lightroom Gallery/slideshows into html

Hi, After numerous attempts to export different configurations of slideshows (html,flash,SlideShowPro, PlugginLabs layer windows,etc.) most worked to some degree, but not exactly where I wanted them. With the page I wanted to embed the Lightroom gallery open in Dreamweaver I choose >insert>tag>html (expand) choose Page Elements>(from the right panel)choose iframe. Click insert which opens Tag Editor - iframe >browse to the souce file index.html ofthat slideshow> set the size (eg:6''px w by 4''px h)
margins> alignment> click Ok . Now my slideshows stay put regardless of page elasticity or browser vintage.
 
Upvote 0 Downvote
Request for Clarification from theturninggate

Matt,

I tried to follow your instructions in your post, but can't get it to work, so I have some questions for you about your post:

You said: Copy swfobject.js from the /resources/js/ folder for your own use.
For what use?

You said: Locate the <script src="resources/js/swfobject.js"></script> line in the head of the file and copy it into your new page."
By "new page" do you mean a regular web page in my web site that I want to embed stage and simpleviewer into?

You said: Locate the call for swfobject in the body of the page. It will be located with a DIV, I think called "flashcontent". The code will look like this:
<div id="frame">
<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
<script type="text/javascript">
var fo = new SWFObject("simpleviewer/viewer.swf", "viewer", "1''%", "1''%", "7", "#''''''");
fo.addVariable("preloaderColor", "'xffffff");
fo.addVariable("xmlDataPath", "gallery.xml");
fo.addParam("base", "simpleviewer/");
fo.write("flashcontent");
</script>
</div>
</div>

I located this area in my Stage index file, and it looked like this (I deleted most of the lorem text):
<div id="frame">
<div id="flashcontent">
<p style="text-align:justify;margin:1'px;line-height:14px;">Lorem ipsum dolor sit ...</p>
</div>
</div>
What did I do wrong? I'm lost.
Thanks for any help you can provide.
 
Upvote 0 Downvote
easy way, still some bugs, but

here is my page http://max.haoneg.com/max/galleries.html

i used "iframe" tag its web page in a web page, pint it to ur gallery's index.html
Code: 
<iframe src ="[B][url]http://max.haoneg.com/max/galleries/test/index.html"[/url][/B] 

width="1''%" height="8''" align="top" scrolling="auto" frameborder="'">
                         


Your browser does not support iframes.</p>
                         
</iframe>

scrolling not working for flash galleries, (just keep it "auto")
so if u have portrait photos add some extra 1''-15'px to height=""( if u exporting flash gallery, photo size is 64'px height need to be 74'px)
 
Upvote 0 Downvote
Status
Not open for further replies.
Back
Top