@charset "utf-8";
/* CSS Document */
html, body {
font-size:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
p {
font-size:12px;
}
#topTextArea{
width:270px;
}
#topImageArea{
width:270px;
}
.centerPhoto{
border:3px;
border-color:#FFFFFF;
border-style:solid;
}
.imgCaption {
margin-top:0px;
}
.footer_td{
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#E0DDCC;
padding-top:4px;
}
.footer_td a:link{
text-decoration:none;
color:#E0DDCC;
}
.footer_td a:visited{
text-decoration:none;
color:#E0DDCC;
}
.footer_td a:hover{
text-decoration:underline;
color:#E0DDCC;
}
.copyright {
margin-top:4px;
font-size:10px;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.copyright a:link{
color:#FFFFFF;
}
.copyright a:visited{
color:#FFFFFF;
}
.copyright a:hover{
color:#FF3300;
}
ul{
font:Verdana, Arial, Helvetica, sans-serif;
list-style-type:circle;
color:#000000;
font-size:12px;
}
.folio_block {
width: 683px;
height:370px;
}
.main_view {
width: 683px;
height: 370px;
float: left;
position: relative;
}
.window {
height:370px;
width: 683px;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel a {
position: relative;
float: left;
cursor: pointer;
}
.image_reel img {float: left;}
.image_reel a span {
height: 370px;
width:683px;
float: left;
background: #111 url(icon_view.gif) no-repeat center;
position: absolute;
z-index: 10;
top: 0; left: 0;
}
.paging {
position: absolute;
bottom: 20px; right: -3px;
width: 258px; height:27px;
z-index: 100;
text-align: center;
line-height: 40px;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #E0DDCC;
border: 1px solid #ffffff;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {text-decoration:underline;}
a.imageLink:link{
color:#47392C;
text-decoration:none;
font-size:12px;
}
a.imageLink:visited{
color:#47392C;
text-decoration:none;
font-size:12px;
}
a.imageLink:hover{
color:#000000;
text-decoration:underline;
font-size:12px;
}
.imageLink_sel{
color:#47392C;
font-weight:bold;
font-size:12px;
}
<!--------------- End CSS -----------------!>
<!--------------- Main HTML Table ------------>
<table id="Table_07" width="983" height="370" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="683px">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#" target="_blank"><img src="images/inside1/01.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/02.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/03.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/04.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/05.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/06.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/07.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/08.jpg" alt="Visions" width="683" height="370" border="0"/></a>
<a href="#" target="_blank"><img src="images/inside1/09.jpg" alt="Visions" width="683" height="370" border="0"/></a>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
<a href="#" rel="7">7</a>
<a href="#" rel="8">8</a>
<a href="#" rel="9">9</a>
</div>
</div>
</div>
</td>
<td background="images/visions_08.jpg" width="300" height="370" valign="top">
<!-- Main Image Table -->
<table border="0" cellpadding="0" cellspacing="0">
<tr >
<td height="20px"></td>
</tr>
<tr>
<td width="8px"></td>
<td>
<img src="images/imageTitle.jpg" width="273" height="76"> </td>
</tr>
</table>
<!-- End Main Image Table -->
<table>
<tr>
<td height="10px"></td>
</tr>
<tr>
<td width="5px"></td>
<td>
<p align="center">View a collection of images from Visions! We are adding images every day, so please check back soon!</p>
<p align="center">
<span class="imageLink_sel">Inside Images 1</span><BR/>
<BR/>
<a class="imageLink" href="photos1.html" >Inside Images 2</a><BR/>
<BR/>
<a href="photos2.html" class="imageLink">Outside Images 1</a><BR/>
<BR/>
<a href="photos3.html" class="imageLink">Outside Images 2</a><BR/>
</p>
</td>
<td width="14px"></td>
</tr>
</table> </td>
</tr>
</table>
<!---------- jQuery --------------------->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".folio_block").each(function() {
//Set Default State of each portfolio piece
$(this).find(".paging").show();
$(this).find(".paging a:first").addClass("active");
//Inject <span> for Tool tip
$(this).find(".image_reel a").append("<span></span>");
$(this).find(".image_reel span").css({"opacity" : "0"});
//Get size of images, how many there are, then determin the size of the image reel.
var windowWidth = $(this).find(".image_reel span").width();
var imageSum = $(this).find(".image_reel img").size();
var imageReelWidth = windowWidth * imageSum;
//Adjust the image reel to its new size
$(this).find(".image_reel").css({'width' : imageReelWidth});
});
//Hover Effect for Tooltip
$(".image_reel a").hover(function() {
$(this).find("span").stop().animate({ opacity: 0}, 200 ).show();
}, function() {
$(this).find("span").stop().animate({ opacity: 0}, 200 );
});
//Pagin events
$(".paging a").click(function() {
var triggerID = $(this).attr("rel") - 1;
var imgWidth = $(this).parent().parent().find("img").width();
var image_reelPosition = triggerID * imgWidth;
//Ignore if Active
if ( $(this).hasClass("active")) {
//Do Nothing
}
else {
//Set active paging
$(this).parent().parent().find(".paging a").removeClass("active");
$(this).addClass("active");
//image_reel Image
$(this).parent().parent().find(".image_reel").animate({
left: -image_reelPosition
}, 300 );
}
return false;
});
});
</script>
|
