1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
|
excerpt from external css:
div.caption-container {
position: relative;
clear: left;
top:-300px;
height: 75px;
}
page code:
<?php $crumb1="interior";?>
<?php $crumb2="samples";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php include ('includes/preload.php');?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php include ('includes/default_page_title.php');?></title>
<!--css and js for photo gallery-->
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<!--eof css and js for photo gallery-->
<link href="css/main.css.php" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="wrap">
<div id="contentWrap">
<div id="pageTop"></div>
<div id="pageMiddle">
<div id="leftColumn">
<?php include('includes/logo.php');?>
<?php include('includes/sidenav.php');?>
<div class="intUnderSideNavBG">
<div class="thumbsWrap">
<div id="thumbs">
<ul class="thumbs noscript">
<li><a class="thumb" name="1" href="images/samples/1.jpg"><img src="images/samples/thumbs/1.jpg" /></a>
<div class="caption">
Any html can be placed here ...
</div>
</li>
<li><a class="thumb" name="2" href="images/samples/2.jpg"> <img src="images/samples/thumbs/2.jpg" /></a><div class="caption">
Any html can be placed here ...
</div>
</li>
<li><a class="thumb" name="3" href="images/samples/3.jpg"> <img src="images/samples/thumbs/3.jpg" /></a><div class="caption">
Any html can be placed here ...
</div>
</li>
<li><a class="thumb" name="4" href="images/samples/4.jpg"> <img src="images/samples/thumbs/4.jpg" /></a>
</li>
<li><a class="thumb" name="5" href="images/samples/5.jpg"> <img src="images/samples/thumbs/5.jpg" /></a>
</li>
<li><a class="thumb" name="6" href="images/samples/6.jpg"> <img src="images/samples/thumbs/6.jpg" /></a>
</li>
<li><a class="thumb" name="7" href="images/samples/7.jpg"> <img src="images/samples/thumbs/7.jpg" /></a>
</li>
<li><a class="thumb" name="8" href="images/samples/8.jpg"> <img src="images/samples/thumbs/8.jpg" /></a>
</li>
<li><a class="thumb" name="9" href="images/samples/9.jpg"> <img src="images/samples/thumbs/9.jpg" /></a>
</li>
<li><a class="thumb" name="10" href="images/samples/10.jpg"> <img src="images/samples/thumbs/10.jpg" /></a>
</li>
<li><a class="thumb" name="11" href="images/samples/11.jpg"> <img src="images/samples/thumbs/11.jpg" /></a>
</li>
<li><a class="thumb" name="12" href="images/samples/12.jpg"> <img src="images/samples/thumbs/12.jpg" /></a>
</li>
<li><a class="thumb" name="13" href="images/samples/13.jpg"> <img src="images/samples/thumbs/13.jpg" /></a>
</li>
</ul>
</div>
</div>
</div>
<div class="viewSamples"> </div>
</div>
<div id="rightColumn">
<?php include('includes/topnav.php');?>
<div class="calloutInt">
<div class="intHeader"><img src="images/header_samples.png" alt="the PERFECT gift for a PERFECT vacation" /></div>
<div class="intCopy">
Below are some examples of what your gift can be. Of course, these are just suggestions, and I’m happy to remove or add any items you might be interested in. The prices shown do not include tax and delivery. Delivery is $28 for the first basket and $10 for each additional basket to the same resort.
</div>
<div id="controls" class="controls"></div>
<div class="galleryEnlarged">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container" style="background:#ccc;"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!--photo gallery code end-->
</div>
</div>
</div>
</div>
<div id="pageBottom"></div>
</div>
<?php include('includes/footer.php');?>
</div>
</body>
</html>
|
