2012-10-15 65 views
0

我遇到Galleriffic中選定元素的問題。選擇圖像時,不會突出顯示正確的大拇指,而是突出顯示前一個大拇指。Gallerific .selected元素

編輯刪除即將死網的鏈接。

JS:

<script type="text/javascript"> 
     jQuery(document).ready(function($) { 
      // We only want these styles applied when javascript is enabled 
      $('div.navigation').css({'width' : '100%', 'clear' : 'both'}); 
      $('div.content').css('display', 'block'); 

      // Initially set opacity on thumbs and add 
      // additional styling for hover effect on thumbs 
      var onMouseOutOpacity = .7; 
      $('#thumbs ul.thumbs li').opacityrollover({ 
       mouseOutOpacity: onMouseOutOpacity, 
       mouseOverOpacity: 1.0, 
       fadeSpeed:   'fast', 
       exemptionSelector: '.selected' 
      }); 

      // Initialize Advanced Galleriffic Gallery 
      var gallery = $('#thumbs').galleriffic({ 
       delay:      2500, 
       preloadAhead:    10, 
       enableTopPager:   true, 
       enableBottomPager:   true, 
       maxPagesToShow:   7, 
       imageContainerSel:   '#slideshow', 
       controlsContainerSel:  '#controls', 
       captionContainerSel:  '#caption', 
       loadingContainerSel:  '#loading', 
       renderSSControls:   false, 
       renderNavControls:   false, 
       playLinkText:    'Play Slideshow', 
       pauseLinkText:    'Pause Slideshow', 
       prevLinkText:    '&lsaquo; Previous Photo', 
       nextLinkText:    'Next Photo &rsaquo;', 
       nextPageLinkText:   'Next &rsaquo;', 
       prevPageLinkText:   '&lsaquo; 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> 

CSS

div.slideshow a.advance-link { 
    display: block; 
    width: 820px; 
    height: 388px; /* This should be set to be at least the height of the largest image in the slideshow */ 
    line-height: 0px; /* This should be set to be at least the height of the largest image in the slideshow */ 
    text-align: center; 
} 
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { 
    text-decoration: none; 
} 
div.download { 
    float: right; 
} 
div.image-title { 
    font-weight: bold; 
    font-size: 1.4em; 
} 
div.image-desc { 
} 
div.navigation { 
    /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ 
    text-align: left; 
} 
ul.thumbs { 
    clear: both; 
    margin: 0; 
    padding: 0; 
    background-color: #FFF; 
} 
ul.thumbs li { 
    display:inline; 
    margin-right: 10px; 
    padding: 0; 
    list-style: none; 
} 
a.thumb { 
    display:inline-block; 
    text-decoration: none; 
} 
ul.thumbs li.selected a.thumb { 
    color: #0C3 
} 
a.thumb:focus { 
    outline: none; 
    text-decoration: none; 
} 
ul.thumbs img { 
    border: none; 
    display: block; 
} 
div.pagination { 
    clear: both; 
} 
div.navigation div.top { 
    padding-top: 10px; 
    margin-top: 10px; 
    text-align: center; 
    background-color: #fff; 
} 
div.navigation div.bottom { 
    text-align: center; 
} 
div.pagination a, div.pagination span.current, div.pagination span.ellipsis { 
    display: block; 
    float: left; 
} 
div.pagination a:hover { 
    background-color: #eee; 
    text-decoration: none; 
} 
div.pagination span.current { 
    font-weight: bold; 
    background-color: #000; 
    border-color: #000; 
    color: #fff; 
} 
div.pagination span.ellipsis { 
    border: none; 
} 

回答

0

有索引問題,被認爲是像這是導致它在錯誤的地方開始的索引。

解決了! :)

相關問題