0

我已经搜索了这个论坛，虽然有很多问题/答案。jQuery 冲突，我只是无法解决这个问题。

我已经将 2 个 jQuery 插件连接到一个 HTML 页面 - Isotope 和 Revolution Slider。两者都可以自己正常工作，没有问题，但是当它们都安装在同一个 HTML 文档上时，Isotope 会完全关闭。

我的 HTML 代码如下（对不起，有很多）：

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-     scale=1.0, user-scalable=no" />
<title>TECHNOCATS</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">    </script>

<script type="text/javascript" src="js/jquery.isotope.min.js"></script>

<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

  <link rel="stylesheet" type="text/css" href="style-test.css" media="all" />

<!-- REVOLUTION SLIDER CSS -->
  <link rel="stylesheet" type="text/css" href="rs-css/responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css"     media="screen" />

</head>

<body>

<div id="main">

    <div class="bannercontainer">

        <div class="banner">

            <ul>
             <li data-transition="random" data-slotamount="7" data-   link="http://www.google.de">
               <img src="rs-images/slides/marines-960.jpg">
               <div class="caption sft big_white"  data-x="100" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">Nunc tellus purus, auctor.</div>
               <div class="caption sfb big_orange"  data-x="100" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">Facilisis auctor id, tempor quis nulla.</div>
               <div class="caption lfr medium_grey"  data-x="100" data-y="210" data-speed="300" data-start="2000"> Sed et elementum tortor.</div>
             </li>
             <li data-transition="random" data-slotamount="7" data-link="http://www.google.de">
               <img src="rs-images/slides/legoman-tattoo-960.jpg">
               <div class="caption sft big_white"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">Nunc tellus purus, auctor.</div>
               <div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">Facilisis auctor id, tempor quis nulla.</div>
               <div class="caption lfr medium_grey"  data-x="510" data-y="210" data-speed="300" data-start="2000"> Sed et elementum tortor.</div>
             </li>

            </ul>
    </div> <!-- .banner -->

</div> <!-- .bannercontainer -->


<div style="width:100%; height:50px;"></div>

<div style="width:960px; margin-left:auto; margin-right:auto;">
  <!-- Begin Portfolio -->
<div class="portfolio-wrapper">
    <ul class="filter">
      <li><a class="active" href="#" data-filter="*">All</a></li>
      <li><a href="#" data-filter=".ecommerce">eCommerce</a></li>
    </ul>
    <ul class="items col4">

      <!-- Begin 1st Portfolio Item -->
      <li class="item web ecommerce" data-callback="callPortfolioScripts();"
              data-detailcontent='<div class="content">
                                          <div id="myCarousel" class="carousel slide">
                                                 <!-- Carousel items -->
                                                  <div class="carousel-inner">
                                                    <div class="active item">
                                                        <img alt="" width="100%" src="style/images/tcs-screen-1.jpg"><a href="style/images/art/ds1-1.jpg" class="fancybox-media" rel="item-1">
                                                        <span class="link"></span></a>
                                                    </div>
                                                    <div class="item">
                                                        <img alt="" width="100%" src="style/images/tcs-screen-4.jpg"><a href="style/images/art/ds1-2.jpg" class="fancybox-media" rel="item-1">
                                                        <span class="link"></span></a>
                                                    </div>
                                                    <div class="item">
                                                        <img alt="" width="100%" src="style/images/tcs-screen-3.jpg"><a href="style/images/art/ds1-3.jpg" class="fancybox-media" rel="item-1">
                                                        <span class="link"></span></a>
                                                    </div>
                                               </div>

                                              <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
                                              <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
                                              </div>

                                   </div>
                                   <div class="item-details">
                                       <h2>Town   &amp; Country Style</h2>

                                       <ul class="item-info">
                                        <li><span class="lite1">Date:</span>2012 - 2013</li>
                                        <li><span class="lite1">Technologies:</span> WordPress Theme Development, PHP, MySQL, jQuery, CSS, HTML</li>
                                        <li><span    class="lite1">Client:</span>Town &amp; Country Style</li>
                                      </ul>
                                       <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>

                                      <a href="http://www.townandcountrystyle.com.au/" target="_blank" class="button">Launch Site</a>
                                   </div>
                                   <div class="clear"></div>'
          > <a href="#">
        <div class="overlay">
          <h3>Town &amp; Country Style</h3>
          <span class="meta">eCommerce Website, Custom WordPress Theme &amp; Blog</span> </div>
        <img src="images/tcs-thumb.jpg" alt="" /></a> </li>
      <!-- End 1st Portfolio Item --> 

      <!-- Begin 2nd Portfolio Item -->
      <li class="item web" data-callback="callPortfolioScripts();"
              data-detailcontent='<div class="content">
                                         <div id="myCarousel" class="carousel slide">
                                              <!-- Carousel items -->
                                              <div class="carousel-inner">
                                                    <div class="active item">
                                                        <img alt="" width="100%" src="style/images/art/ds2-1.jpg"><a href="style/images/tcs-screen-1.jpg" class="fancybox-media" rel="item-2">
                                                          <span class="link"></span></a>
                                                    </div>
                                                    <div class="item">
                                                        <img alt="" width="100%" src="style/images/art/ds2-2.jpg"><a href="style/images/art/ds2-2.jpg" class="fancybox-media" rel="item-2">
                                                        <span class="link"></span></a>
                                                    </div>
                                               </div>

                                              <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
                                              <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
                                          </div>

                                   </div>
                                   <div class="item-details">
                                       <h2>K &amp; P Legal</h2>

                                       <ul class="item-info">
                                        <li><span class="lite1">Date:</span>2009 - 2012</li>
                                        <li><span class="lite1">Categories:</span> HTML, CSS, jQuery, Database Development</li>
                                        <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
                                      </ul>
                                       <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>

                                      <a href="#" class="button">Launch Site</a>
                                   </div>
                                   <div class="clear"></div>'> <a href="#">
        <div class="overlay">
          <h3>K&amp;P Legal</h3>
          <span class="meta">Website Development</span> </div>
        <img src="images/kplegal-thumb.jpg" alt="" /></a></li>
      <!-- End 2nd Portfolio Item -->

      <!-- Begin 3rd Portfolio Item -->
      <li class="item web ecommerce" data-callback="callPortfolioScripts();"
               data-detailcontent='<div class="content">
                                            <div class="single"> <img alt="" width="100%" src="style/images/lullaby-1.jpg"><a href="style/images/art/ds3-1.jpg" class="fancybox-media" rel="item-3"><span class="link"></span></a></div>

                                       </div>
                                       <div class="item-details">
                                       <h2>Lullaby Linen</h2>
                                         <ul class="item-info">

                                        <li><span class="lite1">Date:</span>2010 - 2012</li>

                                      </ul>

                                       <p>As their business matured, Lullaby Linen outgrew their original site, built by Technocats in 2010.</p>

                                       <p>We are now involved in the redevelopment of the Lullaby Linen site, creating an online store with shopping cart. Expected completion date is June 2013.</p>

                                        <ul class="item-info">

                                        <li><span class="lite1">Technologies:</span>WordPress, HTML, CSS, jQuery, PHP, MySQL</li>

                                      </ul>

                                      <a href="#" class="button">New Site Coming Soon</a>
                                   </div>
                                   <div class="clear"></div>'
              > <a href="#" >
        <div class="overlay">
          <h3>Lullaby Linen</h3>
          <span class="meta">Website Development</span> </div>
        <img src="images/lullaby-thumb.jpg" alt="" /></a></li>
      <!-- End 3rd Portfolio Item --> 

      <!-- Begin 4th Portfolio Item -->
      <li class="item web ecommerce" data-callback="callPortfolioScripts();"
                 data-detailcontent='<div class="content">
                                              <div class="single"> <img alt="" width="100%" src="style/images/art/ds4-1.jpg"><a href="style/images/art/ds4-1.jpg" class="fancybox-media" rel="item-4"><span class="link"></span></a></div>

                                       </div>
                                       <div class="item-details">
                                       <h2>Wild!    </h2>

                                       <ul class="item-info">
                                        <li><span class="lite1">Date:</span>January 2013</li>
                                        <li><span class="lite1">Categories:</span>HTML5, CSS3, jQuery, PHP, MySQL</li>
                                        <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
                                      </ul>
                                       <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>

                                      <a href="http://eltoro-uk.com/" class="button">Launch Site</a>
                                   </div>
                                   <div class="clear"></div>'
          > <a href="#" >
        <div class="overlay">
          <h3>Wild</h3>
          <span class="meta">eCommerce</span> </div>
        <img src="images/wild-thumb.jpg" alt="" /></a></li>
      <!-- End 4th Portfolio Item --> 

      <!-- Begin 5th Portfolio Item -->
      <li class="item web" data-callback="callPortfolioScripts();"
                 data-detailcontent='<div class="content">
                                         <div id="myCarousel" class="carousel slide">
                                              <!-- Carousel items -->
                                              <div class="carousel-inner">
                                                    <div class="active item">
                                                        <img alt="" width="100%" src="style/images/art/ds5-1.jpg"><a href="style/images/art/ds5-1.jpg" class="fancybox-media" rel="item-5">
                                                        <span class="link"></span></a>
                                                    </div>
                                                        <div class="item">
                                                        <img alt="" width="100%" src="style/images/art/ds5-2.jpg"><a href="style/images/art/ds5-2.jpg" class="fancybox-media" rel="item-5">
                                                        <span class="link"></span></a>
                                                    </div>
                                               </div>

                                              <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
                                              <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
                                          </div>

                                   </div>
                                   <div class="item-details">
                                       <h2>Concept Concrete</h2>

                                       <ul class="item-info">
                                        <li><span class="lite1">Date:</span>2012</li>
                                        <li><span class="lite1">Categories:</span>HTML, CSS, jQuery, PHP, Development of Calculator app.</li>
                                        <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
                                      </ul>
                                       <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>

                                      <a href="#" class="button">Launch Site</a>
                                   </div>
                                   <div class="clear"></div>'
          > <a href="#" >
        <div class="overlay">
          <h3>Concept Concrete</h3>
          <span class="meta">Website Development</span> </div>
        <img src="images/concept-concrete-thumb.jpg" alt="" /></a></li>
      <!-- End 5th Portfolio Item --> 

      <!-- Begin 6th Portfolio Item -->
      <li class="item web" data-callback="callPortfolioScripts();"
                 data-detailcontent='<div class="content">
                                         <div class="single"> <img alt="" width="100%" src="style/images/art/ds6-1.jpg"><a href="style/images/art/ds6-1.jpg" class="fancybox-media" rel="item-6"><span class="link"></span></a></div>

                                   </div>
                                   <div class="item-details">
                                       <h2>Nurturing Hands</h2>

                                       <ul class="item-info">
                                        <li><span class="lite1">Date:</span>2011</li>
                                        <li><span class="lite1">Categories:</span>HTML, CSS</li>
                                        <li><span class="lite1">Client:</span> Sit Commodo Sollicitudin</li>
                                      </ul>
                                       <p>Tonec id elit non mi porta gravida at eget metus, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur occaecat cupidatat.</p>

                                      <a href="#" class="button">Launch Site</a>
                                   </div>
                                   <div class="clear"></div>'
          > <a href="#" >
        <div class="overlay">
          <h3>Nurturing Hands</h3>
          <span class="meta">Website Development</span> </div>
        <img src="images/nurturing-hands-thumb.jpg" alt="" /></a></li>
      <!-- End 6th Portfolio Item --> 



            </ul>

        </div> <!-- End Portfolio -->

    </div>

   </div> <!-- main -->

<script type="text/javascript" src="js/init.js"></script>

</body>
</html>

init.js 文件（在 HTML 末尾引用）如下：

 /*-----------------------------------------------------------------------------------     */
 /* REVOLUTION SLIDER
 /*-----------------------------------------------------------------------------------*/

 var tpj=jQuery;
 tpj.noConflict();

 tpj(document).ready(function() {

 if (tpj.fn.cssOriginal!=undefined)
 tpj.fn.css = tpj.fn.cssOriginal;

tpj('.banner').revolution(
    {
        delay:6000,
        startwidth:960,
        startheight:500,

        onHoverStop:"on",                       

        thumbWidth:100,                         
        thumbHeight:50,
        thumbAmount:3,

        hideThumbs:0,
        navigationType:"none",              
        navigationArrows:"none",                

        navigationStyle:"round",                


        navigationHAlign:"left",                
        navigationVAlign:"bottom",                  
        navigationHOffset:30,
        navigationVOffset:30,

        soloArrowLeftHalign:"left",
        soloArrowLeftValign:"center",
        soloArrowLeftHOffset:20,
        soloArrowLeftVOffset:0,

        soloArrowRightHalign:"right",
        soloArrowRightValign:"center",
        soloArrowRightHOffset:20,
        soloArrowRightVOffset:0,

        touchenabled:"on",                      


        stopAtSlide:-1,                         
        stopAfterLoops:-1,                      
        hideCaptionAtLimit:0,                   
        hideAllCaptionAtLilmit:0,               
        hideSliderAtLimit:0,                    


        fullWidth:"on",

        shadow:0                                

    });

 });

 /*-----------------------------------------------------------------------------------*/
 /* ISOTOPE PORTFOLIO
 /*-----------------------------------------------------------------------------------  */
 $(document).ready(function () {
    var $container = $('.portfolio-wrapper .items');
     $container.imagesLoaded(function () {
        $container.isotope({
        itemSelector: '.item',
        layoutMode: 'fitRows'
    });
   });

   $('.filter li a').click(function () {

    $('.filter li a').removeClass('active');
    $(this).addClass('active');

    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector
    });

    return false;
    });
 });
 /*-----------------------------------------------------------------------------------  */

任何帮助将非常感激。

湄公河

4

3 回答 3

1

1：Revolution Slider没有变化。

2：ISOTOP 你应该使用 noconflit 变量。在我的例子中，我使用的是 abc

var abc=jQuery;
abc.noConflict();
abc(document).ready(function () {
var $container = abc('.portfolio-wrapper .items');
 $container.imagesLoaded(function () {
    $container.isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
});
});
abc('.filter li a').click(function () {

abc('.filter li a').removeClass('active');
abc(this).addClass('active');

var selector = abc(this).attr('data-filter');
$container.isotope({
    filter: selector
});

return false;
});
});

祝你好运 ;）

于 2014-01-30T09:25:31.460 回答
0 
Try to modify your init.js, You may get your answer
       /*---------------------------------------       */
          /* REVOLUTION SLIDER
         /*------------------------------------------------*/

    jQuery(document).ready(function() {

    if (jQuery.fn.cssOriginal!=undefined)
    jQuery.fn.css = jQuery.fn.cssOriginal;
    jQuery('.banner').revolution({
        delay:6000,
        startwidth:960,
        startheight:500,
        onHoverStop:"on",                   
        thumbWidth:100,                         
        thumbHeight:50,
        thumbAmount:3,
        hideThumbs:0,
        navigationType:"none",              
        navigationArrows:"none",            
        navigationStyle:"round",                
        navigationHAlign:"left",                
        navigationVAlign:"bottom",                  
        navigationHOffset:30,
        navigationVOffset:30,
        soloArrowLeftHalign:"left",
        soloArrowLeftValign:"center",
        soloArrowLeftHOffset:20,
        soloArrowLeftVOffset:0,
        soloArrowRightHalign:"right",
        soloArrowRightValign:"center",
        soloArrowRightHOffset:20,
        soloArrowRightVOffset:0,
        touchenabled:"on",                      
        stopAtSlide:-1,                         
        stopAfterLoops:-1,                      
        hideCaptionAtLimit:0,                   
        hideAllCaptionAtLilmit:0,               
        hideSliderAtLimit:0,                    
        fullWidth:"on",
        shadow:0                                
      });

    });

/*--------------------------------------------*/
  /* ISOTOPE PORTFOLIO
  /*---------------------------------------  */
  jQuery(document).ready(function () {
     var $container = jQuery('.portfolio-wrapper .items');
    $container.imagesLoaded(function () {
    $container.isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
     });
   });
   jQuery('.filter li a').click(function () {
   jQuery('.filter li a').removeClass('active');
   jQuery(this).addClass('active');

   var selector = jQuery(this).attr('data-filter');
      $container.isotope({
      filter: selector
    });
  return false;
   });
 });
        /*----------------------------------------------------  */
于 2013-07-25T16:32:03.410 回答
0

以防万一有人遇到这个问题，正在寻找解决革命滑块引发的错误的方法，它会在每张新幻灯片后重置同位素库上的过滤器。

我从为 wordpress 制作的页面收到此错误。

我让这两个插件工作，使选择器变量成为全局变量，并将其应用于同位素重新布局的过滤器......

pl.masonic.js 中更改的行。行号是近似值。

  • var selector = "";在文件开头添加。
  • 第 37 行：从行中删除 var var selector = $(this).attr('data-filter')。于是就变成了selector = $(this).attr('data-filter')
  • 第 85 行：转换filter: '*'为filter: selector
于 2015-03-07T00:02:14.307 回答