An optional banner on top of the page
Page continues here
Pompous photos presentations and slideshows are the perfect splash screen for your website home page.
This is another example of embedding a pompous photos presentation in a web page.
In Example 1
we showed the recommended way of embedding a presentation, so that it always fits the available window width, and takes as much height as it needs (a vertical scrollbar appears as needed).
People may be viewing your web page on varieties of screen sizes. If the presentation is taller than a given screen size, there will be vertical "bands" on each side, which may not look good. Therefore, we don't recommend this for a home page.
Try to resize the browser window (on a phone, flip it's orientation). The presentation is always fully visible, right?
How to embed your presentation on your web page?
You will have to make a copy of this html file into a new web page, and host it on your web site (right-click on this web page on a desktop browser to view and copy the html source code).
Then make the following changes:
- Change the presRatio variable to your actual presentation ratio (you can find it in the PompousPhotos editor). This example uses a pres. with ratio 16:9.
- Change the bannerAbovePresentationHeight variable. If you have a banner above the presentation, enter it's height in pixels here. Otherwise, enter 0:
- Optional: change the "background-color: black;" of the div below to be same as the presentation's bg color (which is usually also black). This way the bands on each side of the presentation will blend with it.
- Change the iframe src attribute to your presentation's url. To find it, play the presentation in a new tab, and copy the URL in the browser address bar.
All pompous photos presentations are stored on the Google Cloud Storage service, and are highly available across the world.
The presentation is embedded in an IFRAME html element, which itself is in a DIV html element.
We've set the div's id attribute to "my-pompous-presentation-div", so that we can find it and manipulate it's size in the code below:
If you don't see the presentation at all (there is nothing between your "banner" div and the rest of the page), then the JS code is not running, or it's giving an error.