Now all we have left to do is create the HTML pages for your images. If you have already downloaded my adobe gallery, start by saving “template.html” with the name of your first photo “myfirstphoto.html”. Then, begin editing the script as outlined below. <!– You will not have to modify too many things in this [...]
Now all we have left to do is create the HTML pages for your images. If you have already downloaded my adobe gallery, start by saving “template.html” with the name of your first photo “myfirstphoto.html”. Then, begin editing the script as outlined below.
<!– You will not have to modify too many things in this script. Just remember to save a template file so that if you make a mistake, you still have a file that you can go back to –>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ >
<!– Add a description of your content –>
<meta name=”description” content=”">
<!– Add some keywords –>
<meta name=”keywords” content=”" >
<meta name=”generator” content=”Adobe Photoshop Lightroom” >
<!– Add a title –>
<title>Site Title</title>
<link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/custom.css” >
<link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/master.css” >
<script type=”text/javascript”>
window.AgMode = “publish”;
cellRolloverColor=”#A1A1A1″;
cellColor=”#949494″;
</script>
<script type=”text/javascript” src=”support-files/live_update.js”>
</script>
<!–[if lt IE 7.]> <script defer type=”text/javascript” src=”support-files/pngfix.js”></script> <![endif]–>
<!–[if gt IE 6]> <link rel=”stylesheet” href=”support-files/ie7.css”></link> <![endif]–>
<!–[if lt IE 7.]> <link rel=”stylesheet” href=”support-files/ie6.css”></link> <![endif]–>
</head>
<body>
<div id=”wrapper_large”>
<div id=”sitetitle”>
<!– Change your “Site Title” –>
<h1 onclick=”clickTarget( this, ‘metadata.siteTitle.value’ );” id=”metadata.siteTitle.value”>Site Title</h1>
</div>
<div id=”collectionHeader”>
<!– Change “My Photographs” –>
<h1 onclick=”clickTarget( this, ‘metadata.groupTitle.value’ );” id=”metadata.groupTitle.value”>My Photographs</h1>
<!– Change “Web Gallery created by Buildasuccessfulwebsite.com –>
<p onclick=”clickTarget( this, ‘metadata.groupDescription.value’ );” id=”metadata.groupDescription.value”>Web Photo Gallery created by Buildasuccessfulwebsite.com.</p>
</div>
<div id=”stage2″>
<div id=”previewFull”>
<div id=”detailTitle”>
</div>
<div>
<ul>
<!– There is no previous HTML page. For the next HTML page you will need to replace this line with <li> <a href=”yourlinkhere.html”>Previous</a> </li> –>
<li> Previous </li>
<!– Change this link.It needs to point back to the “home” page of your gallery. It should point to the page you created in the second Adobe Lightroom HMTL Gallery Tutorial –>
<li> <a href=”.html”>Index</a> </li>
<!– This link should point to the next HTML page. For the last link image in the gallery, make the link point to your “home” page. –>
<li> <a href=”.html”>Next</a> </li>
</ul>
</div>
<!– Don’t forget about this link! It needs to point back to the home page of your gallery. It should point to the page you created in the second Adobe Lightroom HMTL Gallery Tutorial –>
<a href=”.html”>
<div style=”margin-left:96px;”>
<div>
<div>
<!– This is where you place the code for your first large image in your gallery. Do not delete “image-files/”. You may have to change the height and width to “height=”450″ width=”300″ and the “margin-left” (above to :152px; –>
<img src=”image-files/compact-disc.jpg”
class=”previewFullImage preview”
id=”previewImage”
alt=”compact disc”
height=”301″ width=”450″
onclick=”var node=parentNode.parentNode.parentNode.parentNode; if( node.click ) { return node.click(); } else { return true; }”>
</div>
</div>
</div>
</a>
<div style=”clear:both; height:5px”></div>
<div id=”detailCaption”>
</div>
</div>
</div>
<div>
</div>
<!– Change the mailto:user@domain to your e-mail address, or delete this starting here –>
<div id=”contact”>
<a href=”mailto:user@domain”> <span
class=”textColor” id=”metadata.contactInfo.value”>Contact Name</span>
</a>
</div>
<!– and ending here –>
<div>
</div>
</div>
</body>
</html>
When you are done creating the first page go to the next until all your pages are edited. If you would like to add some text below the image, download this file and change it as necessary.
The final product should look something like this:
Adobe Lightroom Photography Gallery
Related posts:
Leave Your Response