0

FAQを調べましたが、これを引き起こしている原因を理解できませんでした（jsで）。私はすぐに何かをライブにしようとしていますが、当面はより良いアニメーション、おそらくAJAXもバイパスしています。

私が行っているのは、2つの外部phpページaインクルードを現在のページに持ってくることです。1つはギャラリースライダーで、もう1つはギャラリー画像が表示される場所です。これが私が現在テストしているページへのリンクですので、あなたは見ることができます：

http://www.chrisjohndesigns.com/artwork-conventions.php

したがって、私が使用したコードは、左矢印と右矢印が次のギャラリーdivを呼び出し、そのギャラリー内のサムネイルが下に表示されるアートワークを呼び出す、単純な置換.innerHTML呼び出しです。左右の矢印は問題なく機能しますが、サムネイルのいずれかがクリックされると（そしてそれらは正しく機能します）、左右の矢印は機能しなくなり、選択したフレームにとどまります。

規約ページのコードは次のとおりです。

  <div id="field">
    <div id="gallery-callout">
      <div class="thumbs-slider-field-container" id="generic-slider">
        <div class="thumbs-slider-field" >
          <div id="prev">
            <img src="images/gallery-scroll-left.png" width="42" height="120" />
          </div>
          <div id="thumbs-slider">
            <img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
           <img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
           <img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/> 
           <img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
           <img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/> 
         </div>
         <div id="next">
           <img src="images/gallery-scroll-left.png" width="42" height="120"  onclick="callSlider('conventions2')" />
         </div>
        </div>
      </div>
    </div>
    <div class="rule">
  </div>
  <div class="entry" style="margin-bottom:0px;">
    <h4 style="color:#ffffff; margin:0px;">| <a href="artwork.php"> artwork </a> > <a href="artwork-conventions.php"> conventions</a></h4>
  </div>
  <div class="gallery-frame" id="generic">
    <h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
    <div class="artwork">
      <img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />  
    </div>
    <div class="rule">
  </div>
  <p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>

  <div style="display:none;">
    <?php include("artwork-gallery-digital.php"); ?>
    <?php include("sliders/slider-artwork-conventions.php"); ?>
  </div>
</div>

私が使用しているjs：

<script type="text/javascript">
altViews = function(next_img) {
    document.getElementById("bigPicture").src = next_img;
}

function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML; 
}

function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML; 
}

</script>

スライダーの例：

<div class="thumbs-slider-field" id="conventions1">
  <div id="prev">
    <img src="../images/gallery-scroll-left.png" width="42" height="120" />
  </div>
  <div id="thumbs-slider">
    <img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
    <img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
    <img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/> 
    <img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
    <img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/> 
  </div>
  <div id="next">
    <img src="../images/gallery-scroll-left.png" width="42" height="120"  onclick="callSlider('conventions2')" />
  </div>
</div>

一方が他方をキャンセルしている理由について何か考えはありますか？

4

0 に答える 0