#Iframe jalbum in site download#
I don't know if and how this can be fixed.īy the way, the whole thing doesn't work in the most recent Jalbum anymore, but that's fine, as one can easily download 8.1.6 on the jalbum web site.Lists Unordered Lists Ordered Lists Other Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs. Instead, the map on the first index page does contain markers for ALL images, even those on the other index pages. By editing slide.htt I could fix this, I uploaded the new slide.htt at 2) If you have many pictures, you will notice that on all index pages except the first one the Google Map does not work.
When doing this, the slide pages get created without map. However, I discovered two things, one if which I was able to fix:ġ) If one wants to include the original images in the album, one has to choose "Link to originals via scaled images" in jalbum settings/navigation.
#Iframe jalbum in site skin#
I had a lot of fun with your skin and meanwhile managed to upload my album the way I want it. The changes made to the standard index.htt and slide.htt file can be easily identified by searching for 'GOOGLE MAPS'. There is probably some optimization possible (see also comments in the index.htt, slide.htt and googlemaps.html file), but getting this first version to work was great fun and really easy. On 1 photo template ( slide.htt) the information provided by JAlbum is used to pass the coordinates of the current image. Clicking on one of the thumbnails takes you to large version of that photo. The index pages display 1 marker for all photo's at the same location, when clicking the marker the balloon shows thumbnails of all images at that location. You can insert a fixed sizes such as 680×480 pixels (px) as in the example. Width and height is the aspect ratio of the iFrame.
#Iframe jalbum in site code#
Don’t forget to put the embedded code in the URL. The iFrame source (src) is the origin of the content from the external or internal server.
On the index template ( index.htt) this information is used to generate a KML file of which the URL is passed to the iframe. The tag is used to contain the video within the iFrame.JAlbum uses some template files to generate the webalbum pages and in these templates you have access to the details of the photo(s) being displayed. =/webalbums/googlemap.htmlīoth of the above properties could include a host name, but since I'm hosting everything on the same server that was not necessary for me. # This location is bound to the Google Maps API key. # The location of the HTML page that displays the map and # The root where the webalbum will be hosted Two properties have been added to the JAlbum project file: The iframe element (short for inline frame) is probably among the oldest HTML tags and was introduced in 1997 with HTML 4.01 by Microsoft Internet Explorer. However, for the index pages the Google Maps code needs to retrieve a KML file from the location where the webalbum is hosted and therefore needs the exact address. Reason being that the page containing the Google Maps scripts that is used in the iframe may be at a different server/location then the webalbum. For a long time I was able to keep hardcoded addresses out of the solution, but in the end it became necessary to know the location at which the generated webalbum would be hosted. By including a couple of parameters (map width/height, coordinates, url of KML file) the contents of the map can be controlled by the page including the iframe.Īnother challenge was not including hardcoded addresses in the templates. The solution to this was to display the map in an iframe, this iframe is then included on the web album pages and because it is always the same page displayed in the iframe, it is possible to use 1 Google Maps API key. Not very practical, especially when you use a automated process to organize your photo's by date of subject like me. This key is bound to 1 directory and since most photo albums are organized in some form or directory structure that would require a new API key for each directory. When you sign up for the Google Maps API you get a API key that must be included in the pages that display a map. Using the Google Maps API and by tweaking the Chameleon skin this was pretty easy to accomplish.įirst challenge I had to solve was one related to Google Maps. Another feature I wanted was to have an overview of all photo locations on the index pages. The Chamelon skin already links to Google Maps, but in a separate pop-up window and I wanted to have the map info next to the photo's themselves. I'm using JAlbum to generate a website for my photo's and using the Chameleon skin you generate a decent website easily. It is shockingly easy to create something with it and I decided to integrate it into my webalbum. Finally found some time to play with Google Maps.
0 kommentar(er)
