лайтбокс конфликт аккордеона - PullRequest
Новая
       23

лайтбокс конфликт аккордеона

0 голосов
/ 28 ноября 2011

У меня есть страница с 3 сценариями: idTabs, лайтбокс (от Dreamweaver) и аккордеон (также от Dreamweaver).Я сделал несколько тестов: лайтбокс не работает с гармошкой.каждый из них работает нормально, но сочетается сбой аккордеона, не работает и работает лайтбокс.вот некоторый код: 

<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript>

</script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.accordion.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.images.css" rel="stylesheet" type="text/css" />

 <script type="text/xml">
 <!--
 <oa:widgets>
   <oa:widget wid="2028523" binding="#jQueryUIAccordion" />
   <oa:widget wid="2127022" binding="#gallery" />
 </oa:widgets>
 -->
 </script>
 <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
 <link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />

это в <head>

это лайтбокс 

      <script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
    $(function(){
        $('#gallery a').lightBox({ 
            imageLoading:           '/images/lightbox/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
            imageBtnPrev:           '/images/lightbox/lightbox-btn-prev.gif',           // (string) Path and the name of the prev button image
            imageBtnNext:           '/images/lightbox/lightbox-btn-next.gif',           // (string) Path and the name of the next button image
            imageBtnClose:          '/images/lightbox/lightbox-btn-close.gif',      // (string) Path and the name of the close btn
            imageBlank:             '/images/lightbox/lightbox-blank.gif',          // (string) Path and the name of a blank image (one pixel)
            fixedNavigation:        false,      // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
            containerResizeSpeed:   400,             // Specify the resize duration of container image. These number are miliseconds. 400 is default.
            overlayBgColor:         "#999999",      // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
            overlayOpacity:         .6,     // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
            txtImage:               'Image',                //Default text of image
            txtOf:                  'of'
        });
    });

// EndOAWidget_Instance_2127022
      </script>

это аккордеон 

    <script type="text/javascript">
    // BeginOAWidget_Instance_2028523: #jQueryUIAccordion
     $(function(){
                  // Accordion
                  $("#jQueryUIAccordion").accordion({ header: "h3",
                                          >           animated: "slide",
    event: "click",
    collapsible : "false"
    });         
            });

    // EndOAWidget_Instance_2028523
            </script>
            <!-- Accordion -->
            <div id="jQueryUIAccordion" class="ui-gray-icons  ">
              <div>
                <h3><a href="#">First</a></h3>
                <div> Vivamus rutrum, sapien ac fermentum imperdiet, nisi libero mattis quam, eu mollis sem metus id ligula. </div>
              </div>
              <div>
                <h3><a href="#">Second</a></h3>
                <div>it, tristique egestas erat interdum id.</div>
              </div>
              <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
              </div>

Надеюсь, я не потерял тебя.Я хочу подчеркнуть, что я не вносил изменений в сценарии!они такие же, как я добавил из Dreamweaver.СПАСИБО!

ОБНОВЛЕНИЕ: я решил проблему.Для других пользователей, имеющих эту проблему, просто УДАЛИТЕ jquery из лайтбокса, jquery из аккордеона позаботится как о лайтбоксе, так и о аккордеоне!его можно закрыть

ПОЗЖЕ ОБНОВЛЕНИЕ.я заметил, что только опера загружает хорошо аккордеон и лайтбокс.Firefox не загружает аккордеон и лайтбокс вообще.это ошибки консоли: [12: 56: 53.907] $ ("# jQueryUIAccordion"). accordion не является функцией @ http://localhost/SITE/incercare3.php#:190 [12: 56: 53.969] $ ("# gallery a"). lightBoxне является функцией @ http://localhost/SITE/incercare3.php#:275

Chrome также не загружает 2 сценария: это ошибки, которые дает мне Chrome:

Uncaught TypeError: Object [object Object] не имеет метода 'accordion'Uncaught TypeError: Object [object Object] не имеет метода 'lightBox'

Мнения?

1 Ответ

1 голос
/ 29 ноября 2011

Во-первых, вы загружаете jquery дважды. Это приведет к конфликтам.

Во-вторых, я вижу только скрипты лайтбокса и idTabs, включенные в ваш заголовок, где плагин accordion?

idTabs загружается bean-компонентом до jquery, загружает его после jquery.

Взгляните на версию вашего jQuery, вы используете плагины, требующие jQuery 1.7 и 1.3, у вас будет конфликт.

В любом случае вы можете использовать jQuery.noConflict (), чтобы использовать обе версии одновременно.

Просто подсказка для изучения javascript немного больше: https://developer.mozilla.org/en/JavaScript/Guide

...