Like many photographers I use Adobe Photoshop Lightroom to organize, find and export my photos. One of the many features Lightroom has is the ability to create flash photo galleries.
I can organize my photos for my galleries into collections which makes for easy additions or deletions of photos to export to my galleries. I liked the gallery it produced but it lacked a navigation system to navigate from one gallery to another or to link to this blogsite. I wanted multiple individual galleries to group my photos not just dump them all in one gallery.
I had to find a solution as this would make my workload much less than using another 3rd party application. Well I’m not a html expert and didn’t have a clue how to do this. So as usual when I need information I searched the Web for how to do it.
Most of my search results where not much help. Most said you have to have flash authoring software to make the necessary changes. I didn’t want to spend $700.00 to purchase Adobe Flash CS3 Professional to edit the flash files. The gallery is based on the free flash gallery engine called AMG Adobe Media Gallery so if you don’t have Lightroom but you want the gallery engine you can get it from Adobe AMG Main Page.
Well I found an easy solution to this problem and thought I would share it. I hope this will help you out because I wasted more time searching than doing the actual modifications to the code.
Here is a screenshot of the results. Here is a link to my flash photo gallery if you would like to see it.
After looking at the files from the creation of the gallery I saw that it had an index.html file linking everything together. I added a footer section to the bottom of the page.
To do this I only had to add the footer portion in the css section and div id for it at the bottom of the index.html page. See the red text for the new additions. Notice I had to adjust the height from 100% to 95% of the page to allow for the footer which was about 5% of the page using the button navigation. You could use less for a text only nav but I thought the buttons looked much better.
See example below:
<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Frank Mathers Photography – Main Gallery</title>
<style type=”text/css”>
body,html {
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
height: 95%;
width: 100%;
background-color:#000000;
}
#footer {
background-color:#000000;
color:#D2D2D2;
height:5%;
}
</style>
/***********************************************
* DD Tab Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<!– CSS for Tab Menu #3 –>
<link rel=”stylesheet” type=”text/css” href=”ddtabmenufiles/solidblocksmenu.css” />
<script type=”text/javascript”>
//SYNTAX: ddtabmenu.definemenu(“tab_menu_id”, integer OR “auto”)
ddtabmenu.definemenu(“ddtabs”, 0) //initialize Tab Menu with 1st tab selected
</script>
<noscript>
<!– Provide alternate content for browsers that do not support scripting
or for those that have scripting disabled. –>
<p>
Sorry, this photo gallery requires that scripting be enabled on your web browser and that the Adobe Flash Player be installed.
<a href=”http://www.adobe.com/go/getflash/”>Download the Adobe Flash Player</a>
</p>
</noscript>
<div id=”footer”>
<div id=”ddtabs” class=”solidblockmenu”>
<ul>
<li><a href=”http://www.frankmathers.com/” rel=”sb1″>Blog</a></li>
<li><a href=”http://www.frankmathers.com/gallery/main/” rel=”sb2″>Main Gallery</a></li>
<li><a href=”http://www.frankmathers.com/gallery/bird/” rel=”sb3″>Bird Gallery</a></li>
<li><a href=”http://www.frankmathers.com/gallery/boat/” rel=”sb4″>Boat Gallery</a></li>
<li><a href=”http://www.frankmathers.com/gallery/kart/” rel=”sb5″>Kart Gallery</a></li>
<li><a href=”http://www.frankmathers.com/gallery/landscape/” rel=”sb6″>Landscape Gallery</a></li>
<li><a href=”http://www.frankmathers.com/gallery/motorcycle/” rel=”sb7″>Motorcycle Gallery</a></li>
<li><a href=”http://www.frankmathers.com/gallery/wildlife/” rel=”sb8″>Wildlife Gallery</a></li>
</ul>
</div>
<div id=”sb1″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/”></a>
</div>
<div id=”sb2″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/main/”></a>
</div>
<div id=”sb3″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/bird/”></a>
</div>
<div id=”sb4″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/boat/”></a>
</div>
<div id=”sb5″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/kart/”></a>
</div>
<div id=”sb6″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/landscape/”></a>
</div>
<div id=”sb7″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/motorcycle/”></a>
</div>
<div id=”sb8″ class=”tabcontent”>
<a href=”http://www.frankmathers.com/gallery/wildlife/”></a>
</div>
</body>
</html>
