javascript - 将 jQuery Accordion 与 GallerificPlus 结合使用时发生冲突

Question

我正在尝试将官方 jQuery Accordion 插件与另一个名为“GallerificPlus”(Gallerific 和 Lightbox 合二为一)的 JQ 插件相结合。不幸的是，它对我不起作用。 GallerificPlus 是不起作用的那个， Accordion 工作正常。 Firebug 没有报告任何错误，所以这可以是任何东西。真令人沮丧。

    <!-- 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>

下面是一些自定义 Accordion 部分并添加功能的JSGallerificPlus。

        // 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;
        });
    });

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

谢谢

Answer 1

我发现了问题....

显然页面上只能有 1 个 GallerificPlus 画廊...所以我想这会导致 id 冲突