Не получается заставить работать одновременно два jQuery решения

@HellNHeaven · Регистрация: 26.11.2015

Установил галерею PhotoSwipe и есть меню с всплывающей картинкой при наведении на пункт - не хотят работать вместе по отдельности всё супер.

HTML5

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="boxer.ico">
    <title>Ученики</title>
 
    <!-- Стиль Bootstrap -->
    <link href="bootstrap.css" rel="stylesheet">
    <!-- Стиль страницы -->
    <link href="style.css" rel="stylesheet">
    <!-- Стиль адаптации дизайна -->
    <link href="responsive.css" rel="stylesheet">
 
    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Gem style -->
    
    <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
    <link rel='stylesheet prefetch' href='css/photoswipe.css'>
    <link rel='stylesheet prefetch' href='css/default-skin.css'>
    <link rel="stylesheet" href="css/stylephoto.css">
 
  </head>
 
  <body>
 
<main>
    <div class="container">
 
      <!-- Верхний блок-->
      <div class="navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="row">
      
 
      <div class="col-lg-6">
              
              <!-- Меню -->
          <div id="menu" class"col-lg-12 col-md-12 col-sm-12">
            <ul>
             <li id="medal1"><a href="#"><div>О тренере</div></a></li>
               <li id="medal2"><a href="#"><div>Ученики</div></a></li>
               <li id="medal3"><a href="#"><div>Зал</div></a></li>
               <li id="medal4"><a href="#"><div>Медиа</div></a></li>
            </ul>
          </div>
        <!-- /Меню -->          
 
 
 
 
        </div>   
  
 
    <section id="cd-team" class="cd-section">
      <div class="cd-container">
        <ul>
          <li>
            <a href="#0" data-type="member-1">
              <figure>
                <img src="https://www.cyberforum.ru/images/team-member-1.jpg" alt="Team member 1">
                <div class="cd-img-overlay"><span>View Bio</span></div>
              </figure>
 
              <div class="cd-member-info">
                John Smith <span>CEO</span>
              </div> <!-- cd-member-info -->
            </a>
          </li>
          
          <li>
            <a href="#0" data-type="member-2">
              <figure>
                <img src="https://www.cyberforum.ru/images/team-member-1.jpg" alt="Team member 1">
                <div class="cd-img-overlay"><span>View Bio</span></div>
              </figure>
 
              <div class="cd-member-info">
                Cristina Cameron <span>Marketing</span>
              </div> <!-- cd-member-info -->
            </a>
          </li>
 
          <li>
            <a href="#0" data-type="member-3">
              <figure>
                <img src="https://www.cyberforum.ru/images/team-member-1.jpg" alt="Team member 1">
                <div class="cd-img-overlay"><span>View Bio</span></div>
              </figure>
 
              <div class="cd-member-info">
                Samuel Noel <span>Web Design</span>
              </div> <!-- cd-member-info -->
            </a>
          </li>
        </ul>
      </div> <!-- cd-container -->
    </section> <!-- cd-team -->
    <div class="cd-overlay"></div>
  </div>
  <!-- /Основной блок -->
 
  </main>
 
  <div class="cd-member-bio member-1">
    <div class="cd-member-bio-pict">
 
  <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
 
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="foto/1.jpg" itemprop="contentUrl" data-size="2592x1728">
          <img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
      </a>
      <figcaption itemprop="caption description">Image caption 2.1</figcaption>
    </figure>
 
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="foto/2.jpg" itemprop="contentUrl" data-size="2592x1728">
          <img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
      </a>
      <figcaption itemprop="caption description">Image caption 2.2</figcaption>
    </figure>
 
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="foto/3.jpg" itemprop="contentUrl" data-size="2592x1728">
          <img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
      </a>
      <figcaption itemprop="caption description">Image caption 2.3</figcaption>
    </figure>
 
   <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="foto/4.jpg" itemprop="contentUrl" data-size="2592x1728">
          <img src="foto/4_2.jpg" itemprop="thumbnail" alt="Image description" />
      </a>
      <figcaption itemprop="caption description">Image caption 2.3</figcaption>
    </figure>
 
  </div>
 
 
 
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 
    <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
 
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
 
        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <!-- don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
 
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
 
            <div class="pswp__top-bar">
 
                <!--  Controls are self-explanatory. Order can be changed. -->
 
                <div class="pswp__counter"></div>
 
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 
                <button class="pswp__button pswp__button--share" title="Share"></button>
 
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
 
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
 
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
 
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
 
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
 
          </div>
 
        </div>
 
</div>
 
    </div> <!-- cd-member-bio-pict -->
 
    <div class="cd-bio-content">
 
1)  dsds<br />
2)  dsd<br />
3)  ds<br />
 
 
    </div> <!-- cd-bio-content -->
  </div> <!-- cd-member-bio -->
 
  <div class="cd-member-bio member-2">
    <div class="cd-member-bio-pict">
      <img src="https://www.cyberforum.ru/images/member-bio-img-2.jpg" alt="Member Bio image">
    </div> <!-- cd-member-bio-pict -->
 
    <div class="cd-bio-content">
      <h1>Meet Cristina Cameron</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, explicabo, doloribus, esse rem officia quas facilis eius alias similique ducimus amet quam odio perspiciatis dolorem ipsam! Ab, dolores, adipisci, explicabo pariatur illum deleniti quam iusto placeat nisi aliquam praesentium mollitia eligendi a! Sequi, voluptatibus sed quos possimus harum rem tempore fugiat? Corporis, officia, assumenda, asperiores blanditiis quidem aliquam fugiat vel excepturi velit provident aut omnis quos aliquid tempora eaque. Nemo, eveniet, sint maxime eum maiores totam est inventore numquam voluptatem hic nam blanditiis placeat illum nesciunt voluptatum eos cum quos magni voluptates ipsam. Perspiciatis alias ducimus libero. Quo provident omnis fugiat ut repellendus optio cum quaerat odio et ipsa. Molestias, atque repellat non maxime amet corporis magni libero quam numquam error beatae at asperiores et a porro nostrum ab necessitatibus esse aliquid iure repellendus obcaecati unde quo eius eum dolores quasi consectetur culpa velit optio! Sequi, dolor, minima, veniam doloribus in ullam cupiditate iste animi ipsum esse eaque similique illo temporibus magni et earum amet sint deleniti est reiciendis. Maxime, quis, animi, ad quasi adipisci suscipit alias iste reprehenderit ea placeat nulla commodi nobis magnam provident veniam earum odit eveniet possimus aut voluptatum dolorum culpa necessitatibus facere totam quisquam. Ipsam.</p>
    </div> <!-- cd-bio-content -->
  </div> <!-- cd-member-bio -->
 
  <div class="cd-member-bio member-3">
    <div class="cd-member-bio-pict">
      <img src="https://www.cyberforum.ru/images/member-bio-img-3.jpg" alt="Member Bio image">
    </div> <!-- cd-member-bio-pict -->
 
    <div class="cd-bio-content">
      <h1>Meet Samuel Noel</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, explicabo, doloribus, esse rem officia quas facilis eius alias similique ducimus amet quam odio perspiciatis dolorem ipsam! Ab, dolores, adipisci, explicabo pariatur illum deleniti quam iusto placeat nisi aliquam praesentium mollitia eligendi a! Sequi, voluptatibus sed quos possimus harum rem tempore fugiat? Corporis, officia, assumenda, asperiores blanditiis quidem aliquam fugiat vel excepturi velit provident aut omnis quos aliquid tempora eaque. Nemo, eveniet, sint maxime eum maiores totam est inventore numquam voluptatem hic nam blanditiis placeat illum nesciunt voluptatum eos cum quos magni voluptates ipsam. Perspiciatis alias ducimus libero. Quo provident omnis fugiat ut repellendus optio cum quaerat odio et ipsa. Molestias, atque repellat non maxime amet corporis magni libero quam numquam error beatae at asperiores et a porro nostrum ab necessitatibus esse aliquid iure repellendus obcaecati unde quo eius eum dolores quasi consectetur culpa velit optio! Sequi, dolor, minima, veniam doloribus in ullam cupiditate iste animi ipsum esse eaque similique illo temporibus magni et earum amet sint deleniti est reiciendis. Maxime, quis, animi, ad quasi adipisci suscipit alias iste reprehenderit ea placeat nulla commodi nobis magnam provident veniam earum odit eveniet possimus aut voluptatum dolorum culpa necessitatibus facere totam quisquam. Ipsam.</p>
    </div> <!-- cd-bio-content -->
  </div> <!-- cd-member-bio -->
  <a href="#0" class="cd-member-bio-close">Close</a> <!-- close the author bio section -->
    <!-- /Основной блок -->
    
    <script src="js/index.js"></script> 
    <!-- Core JS file <--></-->
    <script src="js/photoswipe.min.js"></script> 
    <!-- UI JS file -->
    <script src="js/photoswipe-ui-default.min.js"></script> 
    <script src="js/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    
    <script src="js/bootstrap.min.js"></script>
    <script src="js/respond.min"></script>
    <script src="js/animate-bg.js" type="text/javascript"></script> 
    <script src="js/scripts.js" type="text/javascript"></script> 
    <script src="js/main.js"></script> <!-- Gem jQuery -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->
</body>
</html>

Убираю подключение 1.11.0/jquery.min.js и работает меню как нужно, но тогда естественно не хочет боковая сторона. Причём версию 1.11 можно вообще убрать, так как с bootstrap'ом идёт jQuery или заменить на последнюю. Но тогда опять-таки -- меню отказывается работать. Помогите, запутался!

@HellNHeaven · 10.12.2015, 06:11 **[ТС]**

Javascript

jQuery(document).ready(function($){
    var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
 
    //open team-member bio
    $('#cd-team').find('ul a').on('click', function(event){
        event.preventDefault();
        var selected_member = $(this).data('type');
        $('.cd-member-bio.'+selected_member+'').addClass('slide-in');
        $('.cd-member-bio-close').addClass('is-visible');
 
        // firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
        if( is_firefox ) {
            $('main').addClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                $('body').addClass('overflow-hidden');
            });
        } else {
            $('main').addClass('slide-out');
            $('body').addClass('overflow-hidden');
        }
 
    });
 
    //close team-member bio
    $(document).on('click', '.cd-overlay, .cd-member-bio-close', function(event){
        event.preventDefault();
        $('.cd-member-bio').removeClass('slide-in');
        $('.cd-member-bio-close').removeClass('is-visible');
 
        if( is_firefox ) {
            $('main').removeClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                $('body').removeClass('overflow-hidden');
            });
        } else {
            $('main').removeClass('slide-out');
            $('body').removeClass('overflow-hidden');
        }
    });
});

Javascript

(function($) {
    if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function(elem, name, force){
            if(name === 'background-position'){
                name = 'backgroundPosition';
            }
            if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if ( !force && style && style[ name ] ){
                return style[ name ];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }
    
    var oldAnim = $.fn.animate;
    $.fn.animate = function(prop){
        if('background-position' in prop){
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if('backgroundPosition' in prop){
            prop.backgroundPosition = '('+ prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };
    
    function toArray(strg){
        strg = strg.replace(/left|top/g,'0px');
        strg = strg.replace(/right|bottom/g,'100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
    }
    
    $.fx.step. backgroundPosition = function(fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem,'backgroundPosition');
            
            if(!start){//FF2 no inline-style fallback
                start = '0px 0px';
            }
            
            start = toArray(start);
            
            fx.start = [start[0],start[2]];
            
            var end = toArray(fx.options.curAnim.backgroundPosition);
            fx.end = [end[0],end[2]];
            
            fx.unit = [end[1],end[3]];
            fx.bgPosReady = true;
        }
        //return;
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
        fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
    };
})(jQuery);

Javascript

$(document).ready(function() {
    $("#menu ul li a").addClass("js");
    $("#menu ul li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      }, 
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);
 
      }
    );
 
});

Добавлено через 10 минут
Дурацкая система 5 минут на правку. В общем, 2й и 3й файлы - это компоненты меню и именно в них кроется разгадка, поскольку остальное всё работает с новыми версиями jQuery.

Добавлено через 8 минут
Такс, первая зацепка, с версии 1.8 нет такой функции curCSS, как переписать без неё?

Добавлено через 3 часа 39 минут
Нууу, помогите, пожалуйста. Отключаю jquery версии 1.4.1 - не работает меню, а если 1.11.0 - не работает боковая панель.

Добавлено через 8 часов 15 минут
В общем, разобрался сам, чуть поспав:
Меняем содержимое 2го документа(animated background) на:

Javascript

/**
 * @author Alexander Farkas
 * v. 1.02
 *
 * Edited by Nelson Wells for jQuery 1.8 compatibility
 */
(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.pos === 0 && typeof fx.end == 'string') {
                var start = $.css(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
    });
})(jQuery);

Этот вариант поддерживает нынешние версии jQuery

Опции темы

Не получается заставить работать одновременно два jQuery решения

Решение