Конфликт googleapis

Рейтинг: 0Ответов: 1Опубликовано: 18.01.2015

Добрый вечер.

Столкнулся с такой проблемой.
При подключении двух скриптов один из них перестает работать (в FireFox работают оба).
Один из них это FancyBox, а второй плавный переход к якорю на странице.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>

С этим скриптом работает переход, но не работает FancyBox:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

С этим наоборот - FancyBox работает, а переход не хочет.
Вроде бы одна библиотека старше другой, значит с более новой должны работать оба скрипта, но не работают.
Может, кто подскажет, что не так делаю?

Ответы

▲ 4Принят

Скачайте последние версии плагинов и используйте лучше эту версию jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Ну или, как вариант, можно плавный переход к якорю написать и без плагинов:

  link.click(function(e){ // link - это ссылка на которую нажимают
    var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top + 1;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
  });

UPD Небольшая добавка по link.

Линк в данном случае это ссылка, которая ведёт на якорь с нужным местом. К примеру, у вас есть такой код в HTML:

  <div id="siteNav">
    <ul class="nav">
      <li><a href="#blockOne">Блок 1</a></li>
      <li><a href="#blockTwo">Блок 2</a></li>
      <li><a href="#blockThree">Блок 3</a></li>
    </ul>
  </div>
  <div class="content">
     <div id="blockOne">Какой-то текст</div>
     <div id="blockTwo">Какой-то текст</div>
     <div id="blockThree">Какой-то текст</div>
  </div>

В JS можно так найти link:

var link = $('#siteNav').find('a'); // а дальше тот код что я написал выше

И вот что из этого всего получается.