冲突的jQuery手风琴与GallerificPlus

我想官方的jQuery插件，手风琴与另一个叫“GallerificPlus”（Gallerific &灯箱1）JQ插件相结合的完美组合。不幸的是，它不适合我。 GallerificPlus是不起作用的，手风琴工作正常。 Firebug报告没有错误，所以这可能是任何事情。这真是令人沮丧。冲突的jQuery手风琴与GallerificPlus

<!-- these are the includes for Gallerific PLus --> 
    <link href="{$workspace}/css/gallerificPlus.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="{$workspace}/js/functions.js"></script> 
    <script type="text/javascript" src="{$workspace}/js/gallerificPlus.js"></script> 
    <script type="text/javascript"> 
    document.write("<style type='text/css'>div.navigation{width:300px;float: left;}div.content{display:block;}</style>"); 
    </script> 

    <!-- These are the includes for accordion --> 
    <link href="{$workspace}/css/screen.css" type="text/css" rel="stylesheet" media="screen,projection" /> 
    <!--[if lt IE 7]> 
    <link href="{$workspace}/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" /> 
    <![endif]--> 
    <script type="text/javascript" src="{$workspace}/js/jquery-scrollTo.js"></script> 
    <script type="text/javascript" src="{$workspace}/js/accordion.js"></script> 

    <xsl:choose> 
     <xsl:when test="data/resort-view/entry/rooms/item"> 
      <ul id="accordion"> 
       <xsl:for-each select="data/resort-view/entry/rooms/item"> 
        <li> 
          <!-- this is the clickable part of the accordion --> 
          <a href="?section=recent" class="heading">Click me to open the image gallery</a> 

          <!-- here begins the accordion part that is hidden --> 
          <ul id="view-the-room"> 
           <div id="resort-view"> 
           <div id="resort-view-details"> 
            <!-- this is the gallerificPlus part which doesnt work --> 
            <div id="resort-view-img"> 
             <div id="wrapper-for-img"> 
              <div id="gallery" class="content"> 
               <div id="loading" class="loader"></div> 
               <div id="slideshow" class="slideshow"></div> 
              </div> 
             </div> 
             <div id="resort-view-thumbs"> 
              <div id="thumbs" class="navigation"> 
               <div id="navigation" class="navigation"> 
                <ul class="thumbs noscript"> 
                 <!-- lightbox image thumbs --> 
                 <xsl:if test="room-img-01/filename/text()"> 
                    <li> 
                     <a class="thumb" href="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-001}" 
                     original="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-001}" 
                     title="" description=""> 
                     <img src="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-001}" class="img resort-view-thumbnail" alt="" /> 
                     </a> 
                    </li> 
                 </xsl:if> 
                 <xsl:if test="room-img-02/filename/text()"> 
                    <li> 
                     <a class="thumb" href="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-002}" 
                     original="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-002}" 
                     title="" description=""> 
                     <img src="{$workspace}/images/img-uploads/kohlipe-images/{$image-path-002}" class="img resort-view-thumbnail" alt="" /> 
                     </a> 
                    </li> 
                 </xsl:if> 
                </ul> 
               </div> 
              </div> <!-- end thumbs --> 
             </div> <!-- end resort view thumbs--> 
             </div><!-- end resortview image --> 
            </div> <!-- end resortview-details--> 
           </div><!-- end resort-view --> 
          </ul> 
        </li> 
       </xsl:for-each> 
      </ul> 
    </xsl:when>

下面是一些JS用来定制手风琴的一部分，将功能添加了 GallerificPlus。

 // some custom JS for accordion and the JS needed for GallerificPlus 
    $(document).ready(function() { 
     var gallery = $('#gallery').galleriffic('#navigation', { 
      delay:    5500, 
      numThumbs:   12, 
      preloadAhead:   40, // Set to -1 to preload all images 
      imageContainerSel: '#slideshow', 
      controlsContainerSel: '#controls', 
      titleContainerSel: '#image-title', 
      descContainerSel:  '#image-desc', 
      downloadLinkSel:  '#download-link', 
      fixedNavigation:  true, 
      galleryKeyboardNav:  true, 
      autoPlay:    false 
     }); 

     gallery.onFadeOut = function() { 
      $('#details').fadeOut('fast'); 
     }; 

     gallery.onFadeIn = function() { 
      $('#details').fadeIn('fast'); 
     }; 

     $('ul#accordion a.heading').click(function() { 
      $(this).css('outline','none'); 
      if($(this).parent().hasClass('current')) { 
       $(this).siblings('ul').slideUp('slow',function() { 
        $(this).parent().removeClass('current'); 
        $.scrollTo('#accordion',1000); 
       }); 
      } else { 
       $('ul#accordion li.current ul').slideUp('slow',function() { 
        $(this).parent().removeClass('current'); 
       }); 
       $(this).siblings('ul').slideToggle('slow',function() { 
        $(this).parent().toggleClass('current'); 
       }); 
       $.scrollTo('#accordion',1000); 
      } 
      return false; 
     }); 
    });

这是使用的代码。我希望有人可以提供一些技巧来解决这个问题。

感谢

来源

2010-10-21 Sandor

莫非你指定错误？ – Trufa 2010-10-21 03:52:42

当我打开手风琴时，GallerificPlus插件不起作用。它无效。我尝试将这些内容放置在位置上，比如将GallerificPlus放在最上面......但这也不起作用。我认为这是某种冲突？我应该在哪里看？ – Sandor 2010-10-21 03:55:50

我删除了我的答案因为我错了，我检查出来！ – Trufa 2010-10-21 04:03:34

我发现这个问题....

显然只能有在页面上1个GallerificPlus画廊...... 所以这是导致ID的冲突我supose

来源

2010-10-21 04:40:32 Sandor

冲突的jQuery手风琴与GallerificPlus

回答

相关问题