Конфликт Lightbox v2 с другими JS

#javascript #jquery #html #lightbox2

#javascript #jquery #HTML #lightbox2

Вопрос:

Я создал сайт для портфолио друзей, для управления навигацией используется javascript, в разделе work используется некоторый jQuery, который переключается между двумя разделами для отображения отдельных категорий, а затем средство просмотра Lightbox v2, которое должно показывать проделанную им работу.

Тем не менее, я использовал lightbox раньше, но, похоже, я не могу заставить его работать на этом веб-сайте, может ли это быть конфликтом между другим javascript и загрузкой jQuery при загрузке страницы?

Если бы кто-нибудь мог взглянуть на веб-сайт и сообщить мне, что они думают, я был бы очень благодарен.

У меня в голове есть это для лайтбокса (и других скриптов)

  <link href="style.css" rel="stylesheet" type="text/css" />
 <script  type="text/javascript" src="../js/prototype.js"></script>
 <script  type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script>
 <script  type="text/javascript" src="../js/lightbox.js"></script>
 <link rel="stylesheet" href="../css/lightbox.css"  type="text/css" media="screen" />
 <script type="text/javascript" src="floating-1.5.js"></script>
 <script type="text/javascript">  
 floatingMenu.add('floatdiv',  
    {   targetTop: 0,  
        // targetBottom: 0,    
        prohibitXMovement: true,});  
 </script> 
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script type="text/javascript">
 function showonlyone(thechosenone) {
 $('div[name|="newboxes"]').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
 }
 </script>

И мое тело для лайтбокса:

  <div class="work_splash"><a href="images/gallery/graphics/1b.jpg" rel="lightbox[graphics]" title="Graphic Design Gallery"><img src="images/gallery/graphics/1t.jpg" height=156px /></a></div>

URL-это http://www.jrk-design.co.uk/barwise/index.html

Спасибо

Джон

Ответ №1:

Попробуйте изменить порядок вызовов .js в head или измените скриптовый код для скрипта jQuery, такого как Pirobox

1. Я попытался изменить вызовы .js (под этим вы подразумеваете простое перемещение тегов заголовка lightbox после других тегов заголовка js, да?) похоже, это ничего не дало. Кроме того, изменил средство просмотра на Pirobox, не повезло. Есть другие предложения?

Ответ №2:

Я создал адаптивный лайтбокс только на javascript, которому не нужен jQuery. Если вы используете jQuery только из-за плагина lightbox, это может помочь:http://jslightbox.felixhagspiel.de

Ответ №3:

Как Prototype, так и jQuery определяют $ . Либо избавьтесь от одной из библиотек, либо включите jquery перед Prototype, как предлагает Джонти Джон, либо используйте jquery в бесконфликтном режиме.

1. Итак, я включаю jQuery.noConflict(); в этот фрагмент кода: <script type="text/javascript"> function showonlyone(thechosenone) { $('div[name|="newboxes"]').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); } </script> поскольку это находится в конце моего основного кода? Извините, я больше реализую эту java в приложении к ее написанию (очевидно), это для университетской презентации, и я просто пытаюсь сделать это за него! любая помощь очень ценится.

2. Вы должны заменить все ваши $() вызовы jquery на jquery() like jquery(this).attr("id") ...

3. Хорошо, значит, я должен делать это при всех $() вызовах для всего, что есть в моих <head> тегах? Или только на бит выше?

4. Вы должны делать это со всеми вызовами jquery, как написано на странице.