Image Rotator w/Preview Breaks in IE
I found a nifty plugin for a gallery:
http://www.sohtanaka.com/web-design/examples/image-rotator/
I implemented it on my site, however when in IE8/7 it breaks. When I click a thumb nail on the right hand side, the image and info will display on the left as it should, however the entire list of thumbs then disappears itself.
I am viewing the site in IE8 on a mac using VM ware, wondering if that has any known issues with displaying jQuery properly as well. Thanks for any help/insight
Here is the code that is used. Line 20 is where I've been able to isolate where it is being broken.
- // JavaScript Document
- $(document).ready(function() {
- //Show Banner
- $(".main_image .desc").show(); //Show Banner
- $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
- //Click and Hover events for thumbnail list
- $(".image_thumb ul li:first").addClass('active');
- $(".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 block
- var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
-
- if ($(this).is(".active")) { //If it's already active, then...
- return false; // Don't click through
- } else {
- //Animate the Teaser
- $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
- $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );//commenting out this line and it does not break, however none of the info is displayed
- $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
- });
- }
-
- $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
- $(this).addClass('active'); //add class of 'active' on this list only
- return false;
-
- }) .hover(function(){
- $(this).addClass('hover');
- }, function() {
- $(this).removeClass('hover');
- });
-
- //Toggle Teaser
- $("a.collapse").click(function(){
- $(".main_image .block").slideToggle();
- $("a.collapse").toggleClass("show");
- });
-
- });//Close Function
Here is the CSS that is used as well:
- * {
- margin: 0;
- padding: 0;
- outline: none;
- }
- img {
- border: none;
- }
- h1 {
- font: 3em normal;
- color: #fff;
- text-align: center;
- background: url(../../img/9-5/h1_bg.gif) no-repeat;
- text-indent: -99999px;
- margin: 100px 0 10px;
- }
- .container {
- overflow: hidden;
- width: 980px;
- margin: 0 auto;
- }
- #main {
- padding: 10px;
- font-family:Arial, Helvetica, sans-serif;
- }
- a {
- color: #fff;
- }
- /*--Main Image Preview--*/
- .main_image {
- width: 659px;
- height: 450px;
- float: left;
- background: #333;
- position: relative;
- overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
- color: #fff;
- }
- .main_image h2 {
- font-size: 2em;
- font-weight: normal;
- margin: 0 ;
- padding: 10px 10px 0;
- }
- .main_image p {
- font-size: 12px;
- line-height: 1.6em;
- padding: 10px;
- margin: 0;
- }
- .block small { /*--We'll be using this same style on our thumbnail list--*/
- padding: 0;
- font-size: 1em;
- /* padding: 0 0 0 20px;
- background: url(icon_calendar.gif) no-repeat 0 center;
- */}
- .main_image .block small {margin-left: 10px;}
- .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;
- border-top: 1px solid #000;
- }
- .main_image a.collapse { /*--This is our hide/show tab--*/
- background: url(../../img/9-5/example_9-5_btn_collapse.png) no-repeat left top;
- height: 27px;
- width: 93px;
- text-indent: -99999px;
- position: absolute;
- top: -27px;
- right: 20px;
- }
- .main_image a.show {background-position: left bottom;}
- /*
- image thumb
- */
- .image_thumb {
- float: left;
- width: 320px;
- background: #444;
- border-right: 1px solid #000;
- border-top: 1px solid #111;
- height:450px;
- overflow:auto;
- overflow-x:hidden;
- font-family:Arial, Helvetica, sans-serif;
- }
- .image_thumb img {
- padding: 15px 5px 5px 10px;
- float: left;
- }
- .image_thumb ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .image_thumb ul li{
- margin: 0;
- background: #444 url(../../img/9-5/example_9-5_link.gif) no-repeat;
- width: 320px;
- height:85px;
- float: left;
- color:#555
- }
- .image_thumb ul li.hover { /*--Hover State--*/
- background: #444 url(../../img/9-5/example_9-5_hover.gif) no-repeat;
- cursor: pointer;
- color:#666
- }
- .image_thumb ul li.active { /*--Active State--*/
- background: #444 url(../../img/9-5/example_9-5_active.gif) no-repeat;
- cursor: default;
- color:#000
- }
- html .image_thumb ul li h2 {
- font-size: 1.5em;
- margin: 10px 0 0;
- padding: 0;
- }
- .image_thumb ul li .block {
- float: left;
- margin-left: 10px;
- padding: 0;
- width: 235px;
- }
- .image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/
- .viewSite
- {
- font-size:9px;
- }