|
|
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <style type="text/css">
| |
| | | | |
| - | /*--Slideshow Begins Here--*/
| |
| - | #slideshow {
| |
| - | display: block;
| |
| - | vertical-align: middle;
| |
| - | position: relative;
| |
| - | }
| |
| - | /*--Main Container--*/
| |
| - | #main_view {
| |
| - | margin-left:auto;
| |
| - | margin-right:auto;
| |
| - | position: relative;
| |
| - | height:300px; width: 780px;
| |
| - | }
| |
| - | .window {
| |
| - | height:280px; width: 760px;
| |
| - | overflow: hidden; /*--Hides anything outside of the set width/height--*/
| |
| - | position: absolute;
| |
| - | display: block;
| |
| - | top:50%;
| |
| - | left:50%;
| |
| - | margin: -140px 0 0 -380px;
| |
| - | }
| |
| - | .image_reel {
| |
| - | position: absolute;
| |
| - | top: 0; left: 0;
| |
| - | }
| |
| - | .image_reel img {float: left;}
| |
| - | .paging {
| |
| - | position: absolute;
| |
| - | bottom: 10px; right: 50px;
| |
| - | width: 300px; height:47px;
| |
| - | z-index: 100; /*--Assures the paging stays on the top layer--*/
| |
| - | text-align: right;
| |
| - | line-height: 40px;
| |
| - | font-weight: bold;
| |
| - | background: url(paging_bg2.png) no-repeat;
| |
| - | display: none; /*--Hidden by default, will be later shown with jQuery--*/
| |
| - | }
| |
| - | .paging a {
| |
| - | padding: 5px;
| |
| - | text-decoration: none;
| |
| - | color: #fff; text-shadow: #333 1px 1px 1px;
| |
| - | }
| |
| - | .pause {
| |
| - | position: absolute;
| |
| - | bottom: 10px; right: 20px;
| |
| - | width: 25px; height:47px;
| |
| - | z-index: 200; /*--Assures the paging stays on the top layer--*/
| |
| - | text-align: center;
| |
| - | line-height: 40px;
| |
| - | font-weight: bold;
| |
| - | display: block; /*--Hidden by default, will be later shown with jQuery--*/
| |
| - | }
| |
| - | .pause a {
| |
| - | padding: 5px;
| |
| - | text-decoration: none;
| |
| - | letter-spacing:1px;
| |
| - | font-weight: thick;
| |
| - | color: #f0f0f0; text-shadow: #333 1px 1px 1px;
| |
| - | border: 2px solid #ccc;
| |
| - | -moz-border-radius: 3px;
| |
| - | -khtml-border-radius: 3px;
| |
| - | -webkit-border-radius: 3px;
| |
| - | }
| |
| - | .paging a.active {
| |
| - | font-weight: bold;
| |
| - | border: 2px solid #fff;
| |
| - | -moz-border-radius: 3px;
| |
| - | -khtml-border-radius: 3px;
| |
| - | -webkit-border-radius: 3px;
| |
| - | }
| |
| - | .paging a:hover {font-weight: bold;}
| |
| - | /*--Slideshow Ends Here--*/
| |
| | | | |
| - | /*--Spotlight Stuff Begins Here--*/
| |
| - | #spotlight {
| |
| - | margin-left:0px;
| |
| - | margin-right:auto;
| |
| - | width: 645px;
| |
| - | height: 350px;
| |
| - | }
| |
| - | #spotlightcontainer {
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | width: 645px;
| |
| - | }
| |
| - | .main_image {
| |
| - | width: 466px;
| |
| - | height: 282px;
| |
| - | background: #f0f0f0;
| |
| - | position: relative;
| |
| - | overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
| |
| - | color: #fff;
| |
| - | border: 0px solid #006633;
| |
| - | float: left;
| |
| - | }
| |
| - | .main_image .spottab {
| |
| - | font-size: 1.2em;
| |
| - | font-weight: normal;
| |
| - | padding: 5px;
| |
| - | color: #fff;
| |
| - | }
| |
| - | .main_image p {
| |
| - | font-size: 1em;
| |
| - | line-height:110%;
| |
| - | padding: 0px 10px 5px 10px;
| |
| - | margin-top: 0;
| |
| - | }
| |
| - | .main_image .desc{
| |
| - | position: absolute;
| |
| - | bottom: 0;
| |
| - | left: 0; /*--Stick the desc class to the bottom of our main image container--*/
| |
| - | width: 100%;
| |
| - | display: none; /*--Hide description by default, if js is enabled, we will show this--*/
| |
| - | }
| |
| - | .main_image .block{
| |
| - | width: 100%;
| |
| - | background: #111;
| |
| - | position: absolute;
| |
| - | bottom: 0;
| |
| - | }
| |
| - | .main_image a.show {background-position: left bottom;}
| |
| - | .image_thumb {
| |
| - | float: left;
| |
| - | width: 179px;
| |
| - | background: #f0f0f0;
| |
| - | }
| |
| - | .image_thumb ul {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | list-style: none;
| |
| - | }
| |
| - | .image_thumb ul li{
| |
| - | margin: 0;
| |
| - | padding: 0px 0px;
| |
| - | width: 179px;
| |
| - | height: 44px;
| |
| - | float: left;
| |
| - | background: #f0f0f0;
| |
| - | border-bottom: 3px solid #006633;
| |
| - | }
| |
| - | .image_thumb ul li.hover { /*--Hover State--*/
| |
| - | background: #fff;
| |
| - | cursor: pointer;
| |
| - | border-bottom: 3px solid #F37321;
| |
| - | }
| |
| - | .image_thumb ul li.active { /*--Active State--*/
| |
| - | background: #fff;
| |
| - | cursor: default;
| |
| - | border-bottom: 3px solid #F37321;
| |
| - | }
| |
| - | .image_thumb ul li .spottab {
| |
| - | font-size: .9em;
| |
| - | color: #333;
| |
| - | margin: 0px 0;
| |
| - | padding: 5px;
| |
| - | text-decoration:none;
| |
| - | font-weight:bold;
| |
| - | }
| |
| - | .image_thumb ul li .block {
| |
| - | float:left;
| |
| - | }
| |
| - | .image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/
| |
| - | /*--Spotlight Stuff Ends Here--*/
| |
| - |
| |
| - | /*--Twitter Stuff Begins Here--*/
| |
| - | #twidget { /*--Goes with textboxes class--*/
| |
| - | margin-left:auto;
| |
| - | margin-right:0px;
| |
| - | width: 300px;
| |
| - | height: 350px;
| |
| - | }
| |
| - | #twitterfeed { /*--Defines block area for twitter feed--*/
| |
| - | display: block;
| |
| - | border: 0px solid #000;
| |
| - | margin-left:auto;
| |
| - | margin-right:auto;
| |
| - | }
| |
| - | #twitterfeed p { font: 11px normal Verdana, Arial, Helvetica, sans-serif;}
| |
| - | /*--Twitter Stuff Ends Here--*/
| |
| - |
| |
| - | /*--TagLine Begins Here--*/
| |
| - | #sponsors { /*--Goes with textboxes class--*/
| |
| - | margin-left:0px;
| |
| - | margin-right:0px;
| |
| - | }
| |
| - | #sponsorsbox { /*--Goes with textboxes class--*/
| |
| - | margin: 10px;
| |
| - | -webkit-border-radius: 10px;
| |
| - | -moz-border-radius: 10px;
| |
| - | border-radius: 10px;
| |
| - | background: #fff;
| |
| - | text-align:center;
| |
| - | }
| |
| - | #sponsorsbox img {padding: 10px; }
| |
| - | #happeningnow {height: 284px; margin-top:15px; margin-bottom:10px; width: 975px; border: 1px solid #000;}
| |
| - | #happeningnow .widget {
| |
| - | width: 305px;
| |
| - | height: 100%;
| |
| - | display: block;
| |
| - | position: relative;
| |
| - | border: 1px solid #f0f0f0;
| |
| - | background: #f0f0f0;
| |
| - | border-bottom: 2px solid #ccc;
| |
| - | -webkit-border-radius: 10px;
| |
| - | -moz-border-radius: 10px;
| |
| - | border-radius: 10px;
| |
| - | margin-left: auto;
| |
| - | margin-right: auto;}
| |
| - | #happeningnow .widget-title {font-size: 11pt; font-weight: bold; padding: 2px; text-align: center; border-bottom: solid 1px #ccc;}
| |
| - | #happeningnow .widget img {display: block; margin-left: auto; margin-right: auto; height: 60px; margin-top: 2px;}
| |
| - | #happeningnow .happeningnowbar {font-size: 11pt; font-weight: bold; padding: 5px; height:36px; display: block;}
| |
| - | #happeningnow .innertextbox {height:118px; padding: 5px; margin-top: 0px; margin-bottom: 5px; font-size: 9pt; color: #333; display:block;}
| |
| - |
| |
| - |
| |
| - | #happeningnow li, #happeningnow ul {list-style-position: outside; margin-left: 12px;}
| |
| - | #happeningnow ul {display:block; height: 100px; overflow: hidden;}
| |
| - | #happeningnow li {margin-bottom:4px;}
| |
| - | #happeningnow .seemore {display: block; bottom: 0; position:absolute; right: 0;}
| |
| - |
| |
| - | #happeningnow .widget-url {font-size: 11pt; font-weight: bold; padding: 2px; text-align: center;}
| |
| - | </style>
| |
| - | </html>
| |
| | | | |
| | <html> | | <html> |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> |
| - | <script type="text/javascript">
| + | |
| - | $(document).ready(function() {
| + | |
| - | //Show the paging and activate its first link
| + | |
| - | $(".paging").show();
| + | |
| - | $(".paging a:first").addClass("active");
| + | |
| | | | |
| - | //Get size of the image, how many images there are, then determin the size of the image reel.
| + | $(window).load(function() { |
| - | var imageWidth = $(".window").width();
| + | $('.blueberry').blueberry(); |
| - | var imageSum = $(".image_reel img").size();
| + | }); |
| - | var imageReelWidth = imageWidth * imageSum;
| + | |
| | | | |
| - | //Adjust the image reel to its new size
| |
| - | $(".image_reel").css({'width' : imageReelWidth});
| |
| - |
| |
| - | //Paging and Slider Function
| |
| - | rotate = function(){
| |
| - | var triggerID = $active.attr("rel") - 1; //Get number of times to slide
| |
| - | var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
| |
| - | $(".paging a").removeClass('active'); //Remove all active class
| |
| - | $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
| |
| - |
| |
| - | //Slider Animation
| |
| - | $(".image_reel").animate({
| |
| - | left: -image_reelPosition
| |
| - | }, 500 );
| |
| - | };
| |
| - |
| |
| - | //Rotation and Timing Event
| |
| - | rotateSwitch = function(){
| |
| - | play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
| |
| - | $active = $('.paging a.active').next(); //Move to the next paging
| |
| - | if ( $active.length === 0) { //If paging reaches the end...
| |
| - | $active = $('.paging a:first'); //go back to first
| |
| - | }
| |
| - | rotate(); //Trigger the paging and slider function
| |
| - | }, 6000); //Timer speed in milliseconds (6 seconds)
| |
| - | };
| |
| - |
| |
| - | rotateSwitch(); //Run function on launch
| |
| - |
| |
| - | //On Hover
| |
| - | //$(".image_reel a").hover(function() {
| |
| - | //clearInterval(play); //Stop the rotation
| |
| - | //}, function() {
| |
| - | //rotateSwitch(); //Resume rotation timer
| |
| - | //});
| |
| - |
| |
| - | //On Click
| |
| - | $(".pause a").click(function() {
| |
| - | clearInterval(play); //Stop the rotation
| |
| - | });
| |
| - |
| |
| - |
| |
| - | //On Click
| |
| - | $(".paging a").click(function() {
| |
| - | $active = $(this); //Activate the clicked paging
| |
| - | //Reset Timer
| |
| - | clearInterval(play); //Stop the rotation
| |
| - | rotate(); //Trigger rotation immediately
| |
| - | rotateSwitch(); // Resume rotation timer
| |
| - | return false; //Prevent browser jump to link anchor
| |
| - | });
| |
| - | });
| |
| | </script> | | </script> |
| | | | |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function() {
| |
| - |
| |
| - | $(".main_image .desc").show(); //Show Banner
| |
| - | $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
| |
| - | $(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
| |
| - | $(".image_thumb ul li").click(function(){
| |
| - | //Set Variables
| |
| - | var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
| |
| - | var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
| |
| - | var imgDesc = $(this).find('.block').html(); //Get HTML of the "block" container
| |
| - | var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"
| |
| - |
| |
| - | if ($(this).is(".active")) { //If the list item is active/selected, then...
| |
| - | return false; // Don't click through - Prevents repetitive animations on active/selected list-item
| |
| - | } else { //If not active then...
| |
| - | //Animate the Description
| |
| - | $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
| |
| - | $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
| |
| - | $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
| |
| - | });
| |
| - | }
| |
| - | //Show active list-item
| |
| - | $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
| |
| - | $(this).addClass('active'); //Add class of 'active' on the selected list
| |
| - | return false;
| |
| - |
| |
| - | }) .hover(function(){ //Hover effects on list-item
| |
| - | $(this).addClass('hover'); //Add class "hover" on hover
| |
| - | }, function() {
| |
| - | $(this).removeClass('hover'); //Remove class "hover" on hover out
| |
| - | });
| |
| - | $("a.collapse").click(function(){
| |
| - | $(".main_banner .block").slideToggle(); //Toggle the description (slide up and down)
| |
| - | $("a.collapse").toggleClass("show"); //Toggle the class name of "show" (the hide/show tab)
| |
| - | });
| |
| - | });//Close Function
| |
| - | </script>
| |
| | </html> | | </html> |
"
