MooToolsスライドショーとSpryタブ

Question

私はこのフォーラムを初めて利用しています。私は自分のクライアント用に構築しているウェブサイトに固執する問題があります。私はMooToolsのスライドショーに問題があります。 4つのSpryタブがあるページがあり、そのうち3つにスライドショーがあります。複数のスライドショーのページを設定しましたが、最初のタブだけが正しく動作します。これらは私がいる2つの問題です：

1. サムネイルが最初のタブのために正常に動作しますが、他のタブのために、彼らはお互い、あなたがマウスオーバーフラッタ時に積み重ねるように見えます。

2. 別のタブに切り替えると、スライドショー画面の右隅に数秒間小さな写真のアーティファクトが表示されます（これは、＃1が解決されると消えていく気がします）。

   私は別のフォーラムからこのヘルプを与えられた

： 問題は、それが隠されているときにスライドショーが適切な寸法を計算することができないと考えられます。これは本当にjavascript/DOM操作に関する一般的な問題です。要素がdisplay：noneに設定されている場合 - 非表示のタブと同様に、内部のノードには高さ/幅がありません。回避策は、タブが表示されたら各スライドショーを初期化することです。

コーデックではなくjs実装者であるため、これを達成する方法や実際に動作するかどうかはわかりません。各スライドショーをタブの可視性でどのように初期化すればよいですか？ここで

は、ウェブサイトを閲覧することができる場所です。 http://www.interimdesigngroup.com/threesprings/area.shtml

任意の助けをいただければ幸いです！

おかげで、ネクター72

Answer 1

は、以下に3つのすべてのタブのスライドショーの初期化を置き換えます

<script> 
    var activeSlideShow = false; 
    var activateSlideShow = function(el) { 
     if(activeSlideShow) { 
      activeSlideShow.destroy(); 
     } 
     switch(el.getProperty('tabindex')){ 
      case '0': 
       activeSlideShow = new Slideshow('balch', 
        { 
         '1.jpg': { caption: '' }, 
         '2.jpg': { caption: '' }, 
         '3.jpg': { caption: '' }, 
         '4.jpg': { caption: '' }, 
         '5.jpg': { caption: '' }, 
         '6.jpg': { caption: '' }, 
         '7.jpg': { caption: '' }, 
         '8.jpg': { caption: '' }, 
         '9.jpg': { caption: '' }, 
         '10.jpg': { caption: '' }, 
         '11.jpg': { caption: '' } 
        }, 
        { 
         captions: { delay: 1000 }, 
         delay: 3000, 
         height: 467, 
         hu: 'images/balch/', 
         width: 350 
        } 
       ); 
      break; 
      case '3': 
       activeSlideShow = new Slideshow('poi', 
        { 
         '1.jpg': { caption: 'Blue Ridge' }, 
         '2.jpg': { caption: 'Blue Ridge' }, 
         '3.jpg': { caption: 'Blue Ridge' }, 
         '4.jpg': { caption: 'Blue Ridge' }, 
         '5.jpg': { caption: 'Blue Ridge' }, 
         '6.jpg': { caption: 'Blue Ridge' }, 
         '7.jpg': { caption: 'Grouse Valley' }, 
         '8.jpg': { caption: 'Grouse Valley' }, 
         '9.jpg': { caption: 'Grouse Lake' }, 
         '10.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
         '11.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
         '12.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
         '13.jpg': { caption: 'Wildflowers in Yokohl Valley' }, 
         '14.jpg': { caption: 'Tule River' }, 
         '15.jpg': { caption: 'Tule River' }, 
         '16.jpg': { caption: 'Tule River' }, 
         '17.jpg': { caption: 'Tule River' }, 
         '18.jpg': { caption: 'Tule River' }, 
         '19.jpg': { caption: 'Tule River' }, 
         '20.jpg': { caption: 'Tule River' }, 
         '21.jpg': { caption: 'Tule River' }, 
         '22.jpg': { caption: 'Tule River' }, 
         '23.jpg': { caption: 'Dome Rock' } 
        }, 
        { 
         captions: { delay: 1000 }, 
         delay: 3000, 
         height: 300, 
         hu: 'images/poi/', 
         width: 400 
        } 
       ); 
      break; 
      case '1': 
      default: 
       activeSlideShow = new Slideshow('springville', 
        { 
         '1.jpg': { caption: '' }, 
         '2.jpg': { caption: '' }, 
         '3.jpg': { caption: '' }, 
         '4.jpg': { caption: '' }, 
         '5.jpg': { caption: '' }, 
         '6.jpg': { caption: '' }, 
         '7.jpg': { caption: '' }, 
         '8.jpg': { caption: '' }, 
         '9.jpg': { caption: '' }, 
         '10.jpg': { caption: '' }, 
         '11.jpg': { caption: '' }, 
         '12.jpg': { caption: '' }, 
         '13.jpg': { caption: '' } 
        }, 
        { 
         captions: { delay: 1000 }, 
         delay: 3000, 
         height: 300, 
         hu: 'images/springville/', 
         width: 400 
        } 
       ); 
      break; 
     } 
    } 
    window.addEvent('domready', function(){ 
     var tabs = $$('#TabbedPanels1 ul li'); 
     tabs.addEvent('click', function(e){ 
      activateSlideShow(this); 
     }); 
     activateSlideShow(tabs[0]); 
    }); 
</script>