aerialphoto
Mar-08-2008, 06:45 AM
Here's an idea... I had "purchase terms" in very small print as the description for a couple of of my galleries, but it really didn't fit very well. Rather than reposition the description I made a private (unlisted) html-only page and hid it with my other "support" galleries. Instead of opening the "terms" in another window/tab, I made a fake breadcrumb trail that brings the viewer back to the gallery. Now I can have a link to the "purchase terms" from any gallery.
Sample gallery with the "terms page" called at the top:click here (http://pix.aerog.com/gallery/3455575_o7rny)
Direct link to the terms page:click here (http://aerialphoto.smugmug.com/gallery/4463116_eLCf9).
Here's what I did:
Created an unlisted html-only page
Created a fake bread-crumb trail using javascript to go back to the last page
Created a new <div id called "termsBox" to hold the content
Added the styling for "termsBox" in my CSS customization
This is the html code in the description box (edited):
<html>
<a href="http://pix.aerog.com">aerialphoto</a> >
<a href="javascript:history.go(-1)" onMouseOver="self.status=document.referrer;return true">
Last Page</a>
<br><br>
<div id="termsBox">
<font size=3><b><u>Purchase Terms:</u></b></font>
<!--Add the rest of the html code after this line -->
</div>
</html>
In the customization CSS I added this:
/* Code for html-only TERMS page */
.gallery_4463116.nophotos { display: none; }
.gallery_4463116 #feeds{ display: none; }
.gallery_4463116 #breadcrumb {visibility:hidden;}
.gallery_4463116 .nophotos {display:none;}
.loggedIn .gallery_4463116 .nophotos {display:block;}
.gallery_4463116 #termsBox { display:block;
margin-left:50px;
margin-right:50px;
padding:10px;
border:solid 1px;
background-image:url('/img/gradients/medium.gif');
background-repeat:repeat-x;}
Sample gallery with the "terms page" called at the top:click here (http://pix.aerog.com/gallery/3455575_o7rny)
Direct link to the terms page:click here (http://aerialphoto.smugmug.com/gallery/4463116_eLCf9).
Here's what I did:
Created an unlisted html-only page
Created a fake bread-crumb trail using javascript to go back to the last page
Created a new <div id called "termsBox" to hold the content
Added the styling for "termsBox" in my CSS customization
This is the html code in the description box (edited):
<html>
<a href="http://pix.aerog.com">aerialphoto</a> >
<a href="javascript:history.go(-1)" onMouseOver="self.status=document.referrer;return true">
Last Page</a>
<br><br>
<div id="termsBox">
<font size=3><b><u>Purchase Terms:</u></b></font>
<!--Add the rest of the html code after this line -->
</div>
</html>
In the customization CSS I added this:
/* Code for html-only TERMS page */
.gallery_4463116.nophotos { display: none; }
.gallery_4463116 #feeds{ display: none; }
.gallery_4463116 #breadcrumb {visibility:hidden;}
.gallery_4463116 .nophotos {display:none;}
.loggedIn .gallery_4463116 .nophotos {display:block;}
.gallery_4463116 #termsBox { display:block;
margin-left:50px;
margin-right:50px;
padding:10px;
border:solid 1px;
background-image:url('/img/gradients/medium.gif');
background-repeat:repeat-x;}