-
ID:.bkqR1 さんの質問

jQueryプラグインのscrollfollowとfancyboxの2つをhtmlに記述しました。するとfancyboxは通常通りに作動するのですが、なぜかscrollfollowが動かなくなってしまいました。記述方法に誤りがあるのでしょうか？それとも複数の記述をすると不具合が起ることがあるのでしょうか？どなさ様かご教授の程、宜しくお願い致します！！

みんなの回答 7 件

ID:oZ2LlV さんの回答

jQueryのバージョンが古くないと動かないそうですが、対応しているバージョンのjQueryを使っていますか？
ID:.bkqR1

それぞれ配布元からダウンロードしているので、対応しているバージョンの物だと思うのですが、、、。

ID:QQpMAz さんの回答

それぞれ単体だと動くの？
ID:.bkqR1

はい、単体だと通常通り動きます。下記に記述しているスクリプトを記載しました。

ID:.bkqR1 さんの回答

html内には上記のように記述しています。scrollfollowのみだと正常に動くのですが、fancyboxをその後に記述するとscrollfollowは動かなくなってしまいます。
<head> 
<title>タイトル</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script src="js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.slidescroll.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("a[href*='#']").slideScroll(); 
}); 
</script> 
<script type="text/javascript"> 
function MM_openBrWindow(theURL,winName,features) { //v2.0 
  window.open(theURL,winName,features); 
} 
</script> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script> 
<script type="text/javascript" src="js/jquery.scrollFollow.js"></script> 
<script type="text/javascript">  
    $(function () 
        { 
            $('#menu').scrollFollow(); 
        } 
    ); 
</script> 
 
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script> 
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.3"></script> 
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.2" media="screen" /> 
 <script type="text/javascript"> 
  $(document).ready(function() { 
   /* 
    *  Simple image gallery. Uses default settings 
    */ 
 
   $('.fancybox').fancybox(); 
 
   /* 
    *  Different effects 
    */ 
 
   // Change title type, overlay closing speed 
   $(".fancybox-effects-a").fancybox({ 
    helpers: { 
     title : { 
      type : 'outside' 
     }, 
     overlay : { 
      speedOut : 0 
     } 
    } 
   }); 
 
   // Disable opening and closing animations, change title type 
   $(".fancybox-effects-b").fancybox({ 
    openEffect  : 'none', 
    closeEffect : 'none', 
 
    helpers : { 
     title : { 
      type : 'over' 
     } 
    } 
   }); 
 
   // Set custom style, close if clicked, change title type and overlay color 
   $(".fancybox-effects-c").fancybox({ 
    wrapCSS    : 'fancybox-custom', 
    closeClick : true, 
 
    openEffect : 'none', 
 
    helpers : { 
     title : { 
      type : 'inside' 
     }, 
     overlay : { 
      css : { 
       'background' : 'rgba(238,238,238,0.85)' 
      } 
     } 
    } 
   }); 
 
   // Remove padding, set opening and closing animations, close if clicked and disable overlay 
   $(".fancybox-effects-d").fancybox({ 
    padding: 0, 
 
    openEffect : 'elastic', 
    openSpeed  : 150, 
 
    closeEffect : 'elastic', 
    closeSpeed  : 150, 
 
    closeClick : true, 
 
    helpers : { 
     overlay : null 
    } 
   }); 
 
   /* 
    *  Button helper. Disable animations, hide close button, change title type and content 
    */ 
 
   $('.fancybox-buttons').fancybox({ 
    openEffect  : 'none', 
    closeEffect : 'none', 
 
    prevEffect : 'none', 
    nextEffect : 'none', 
 
    closeBtn  : false, 
 
    helpers : { 
     title : { 
      type : 'inside' 
     }, 
     buttons : {} 
    }, 
 
    afterLoad : function() { 
     this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
    } 
   }); 
 
 
   /* 
    *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked 
    */ 
 
   $('.fancybox-thumbs').fancybox({ 
    prevEffect : 'none', 
    nextEffect : 'none', 
 
    closeBtn  : false, 
    arrows    : false, 
    nextClick : true, 
 
    helpers : { 
     thumbs : { 
      width  : 50, 
      height : 50 
     } 
    } 
   }); 
 
 
   /* 
    *  Open manually 
    */ 
 
   $("#fancybox-manual-a").click(function() { 
    $.fancybox.open('1_b.jpg'); 
   }); 
 
   $("#fancybox-manual-b").click(function() { 
    $.fancybox.open({ 
     href : 'iframe.html', 
     type : 'iframe', 
     padding : 5 
    }); 
   }); 
 
   $("#fancybox-manual-c").click(function() { 
    $.fancybox.open([ 
     { 
      href : '1_b.jpg', 
      title : 'My title' 
     }, { 
      href : '2_b.jpg', 
      title : '2nd title' 
     }, { 
      href : '3_b.jpg' 
     } 
    ], { 
     helpers : { 
      thumbs : { 
       width: 75, 
       height: 50 
      } 
     } 
    }); 
   }); 
 
 
  }); 
 </script> 
 <style type="text/css"> 
  .fancybox-custom .fancybox-skin { 
   box-shadow: 0 0 50px #222; 
  } 
 </style> 
 
</head> 
ID:furT6e

scrollfollowのjsを読み込んだ後に、jQueryの新しいverを再度読み込んでいますよね？そのせいじゃないですか？

ID:sKQNGy さんの回答

jqueryを2つ呼んでるからじゃないですか？
下の方で呼んでるjqueryで、最初に呼びだしてるjqueryを上書きしちゃってるみたいなので。
ID:.bkqR1

そうすると単に<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>の部分を削除すれば良いのでしょうか？今やってみたのですが、そうすると今度はscrollfollowのみが作動するという現象が起きています。

ID:sKQNGy

最初のjqueryを↓みたいに競合させないようにしないと無理だと思います。

<script type="text/javascript">
$j = jQuery.noConflict(true);
$j(function(){
$j("a[href*=’#’]").slideScroll();
});
</script>

この場合「jquery.slidescroll.js」内の「$」部分を全て「$j 」に変えないと動かないですが。。。

ID:sKQNGy

すいません。正しくはこう↓です。

<script src="js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$j = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="js/jquery.slidescroll.js"></script>
<script type="text/javascript">
$j(function(){
$j("a[href*=’#’]").slideScroll();
});
</script>

ID:.bkqR1

教えて頂きありがとうございます。今試してみたのですが、slidescrollとfancyboxは問題なく作動しました。ただ、一番実現したいscrollfollowが動かない状況です、、。

ID:SbWLB. さんの回答

バッティングじゃないの？
ID:.bkqR1

みなさんとおっしゃる通り、バッティングということだと思うのですが、どの部分を削除すればよいのか教えて頂けませんでしょうか。

ID:hg4C68 さんの回答

<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
これ全部jQuery本体じゃないですか？
ID:uVomPc さんの回答

jquery本体を4つも読み込ませてるのもありますが、他人のスクリプトはバッティングして動かない可能性もあるし、分からなければおんなじような動きの別のプラグイン試したほうがいいんじゃないかなと。
ID:.bkqR1

おっしゃる通りだと思います。ただ、色々と試行錯誤してようやくここまでできあがったものなので、どうにかきちんと動くようにできればと思っているのですが、、。

ID:oZ2LlV

すべていまのプラグインを同時に動かす（jQueryのバージョンを埋めるプログラムを書く）ことは、jQuery何度も上書きしている程度の知識じゃ無理だと思いますよ・・・同じバージョンのjQueryで動く別のプラグインを探した方がいいです。

最終更新日:2012-12-11 (6,912 views)

関連するトピックス

ページ上部に戻る