|
|
| Line 1: |
Line 1: |
| | <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">
| |
| - | $(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.
| + | <!-- jQuery library (served from Google) --> |
| - | var imageWidth = $(".window").width();
| + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> |
| - | var imageSum = $(".image_reel img").size();
| + | <!-- bxSlider Javascript file --> |
| - | var imageReelWidth = imageWidth * imageSum;
| + | <script src="/js/jquery.bxslider.min.js"></script> |
| - | | + | <!-- bxSlider CSS file --> |
| - | //Adjust the image reel to its new size
| + | <link href="/lib/jquery.bxslider.css" rel="stylesheet" /> |
| - | $(".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 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> |
"
