Title: JQについて
Last modified: 2011年2月10日

---

# JQについて

 *  解決済 [tsuka](https://ja.wordpress.org/support/users/tsuka/)
 * (@tsuka)
 * [15年、 8ヶ月前](https://ja.wordpress.org/support/topic/jq%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)
 * こんばんは、お店の宣伝用HPを作ってるんですが
    TOP画面にBeautiful Background Image
   Navigation with jQueryを導入して使おうかと思い home.phpを作り変えて読み込んだ
   ところ作動しません 画像を読み込むまでは作動します。 Beautiful Background Image
   Navigation with jQuery導入済みの方いましたら導入するに当たっての注意など有りま
   したらよろしくお願いします 導入した手順は [http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/](http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/)
   上記よりDL後 index.htmlをhome.phpに変更後 headの部分を
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       <html>
           <head>
               <title>Beautiful Background Image Navigation with jQuery</title>
               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
               <meta name="description" content="Beautiful Background Image Navigation with jQuery" />
               <meta name="keywords" content="jquery, background image, animate, menu, navigation, css3, cross-browser compatible"/>
               <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
               <style>
                   *{
                       margin:0;
                       padding:0;
                   }
                   body{
                       font-family:Arial;
                       padding-top:30px;
                       background:#FFF9DF url(title.png) no-repeat top center;
                   }
                   a.back{
                       background:transparent url(back.png) no-repeat 0px 0px;
                       position:absolute;
                       width:150px;
                       height:27px;
                       outline:none;
                       top:2px;
                       right:0px;
                   }
                   .reference{
                       margin:20px auto;
                       width:600px;
                       padding:20px;
                   }
                   .reference p a{
                       text-transform:uppercase;
                       text-shadow:1px 1px 1px #fff;
                       color:#666;
                       text-decoration:none;
                       font-size:10px;
   
                   }
                   .reference p a:hover{
                       color:#333;
                   }
               </style>
               <!--[if lte IE 6]>
                    <link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/>
               <![endif]-->
           </head>
       ```
   
 * より
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
       <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Archive <?php } ?> <?php wp_title(); ?></title>
       <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
       <meta name="description" content="Beautiful Background Image Navigation with jQuery" />
       <meta name="keywords" content="jquery, background image, animate, menu, navigation, css3, cross-browser compatible"/>
       <link rel="stylesheet" href="<?php bloginfo('template_url');?>/css/style.css" type="text/css" media="screen"/>
   
       <!--[if lte IE 6]>
       <link rel="stylesheet" href="http://kappouen.com/wp-content/themes/neutra/css/styleIE6.css" type="text/css" media="screen"/>
       <![endif]-->
   
       <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
       	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
       	<?php wp_get_archives('type=monthly&format=link'); ?>
       <?php wp_head(); ?>
       ```
   
 * に変更
 * サーバーはヘテルムでwordpressがインストールしていない環境での同じサーバーでの
   テストは動作しています
    UPしたページは [http://kappouen.com/](http://kappouen.com/)
   ですよろしくおねがいします・

4件の返信を表示中 - 1 - 4件目 (全4件中)

 *  [kz](https://ja.wordpress.org/support/users/kz/)
 * (@kz)
 * [15年、 8ヶ月前](https://ja.wordpress.org/support/topic/jq%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-136067)
 * jQuery の途中でお亡くなりになってる感じなので
    [http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)
   から [http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js)
   に変更してみるとかはどうでしょう。
 *  トピック投稿者 [tsuka](https://ja.wordpress.org/support/users/tsuka/)
 * (@tsuka)
 * [15年、 8ヶ月前](https://ja.wordpress.org/support/topic/jq%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-136075)
 * kzさん早速のご回答ありがとうございました
    [http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)
   から [http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js)
   に変更しましたが同じさどうでした＞＜ ちなみに 私なりに調べてみたら WordPressの
   場合は$の代わりにjQueryを使います。 wp_enqueue_scriptを使ってと二個の注意点が
   ありますが 下記をどのようにしたらよいのでしょうか
 *     ```
       <!-- The JavaScript -->
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       <script type="text/javascript" src="http://kappouen.com/wp-content/themes/neutra/jquery.bgpos.js"></script>
       		<script type="text/javascript">
                   $(function() {
                       /* position of the <li> that is currently shown */
                       var current = 0;
   
       				var loaded  = 0;
       				for(var i = 1; i <4; ++i)
       					$('<img />').load(function(){
       						++loaded;
       						if(loaded == 3){
       							$('#bg1,#bg2,#bg3').mouseover(function(e){
   
       								var $this = $(this);
       								/* if we hover the current one, then don't do anything */
       								if($this.parent().index() == current)
       									return;
   
       								/* item is bg1 or bg2 or bg3, depending where we are hovering */
       								var item = e.target.id;
   
       								/*
       								this is the sub menu overlay. Let's hide the current one
       								if we hover the first <li> or if we come from the last one,
       								then the overlay should move left -> right,
       								otherwise right->left
       								 */
       								if(item == 'bg1' || current == 2)
       									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
       										$(this).find('li').hide();
       									});
       								else
       									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
       										$(this).find('li').hide();
       									});
   
       								if(item == 'bg1' || current == 2){
       									/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
       									$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
       									move(1,item);
       								}
       								else{
       									/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
       									$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
       									move(0,item);
       								}
   
       								/*
       								We want that if we go from the first one to the last one (without hovering the middle one),
       								or from the last one to the first one, the middle menu's overlay should also slide, either
       								from left to right or right to left.
       								 */
       								if(current == 2 && item == 'bg1'){
       									$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
       								}
       								if(current == 0 && item == 'bg3'){
       									$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
       								}
   
       								/* change the current element */
       								current = $this.parent().index();
   
       								/* let's make the overlay of the current one appear */
   
       								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
       									$(this).find('li').fadeIn();
       								});
       							});
       						}
       					}).attr('src', 'images/'+i+'.jpg');
   
                       /*
                       dir:1 - move left->right
                       dir:0 - move right->left
                        */
                       function move(dir,item){
                           if(dir){
                               $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                               $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                               $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                                   $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                               });
                           }
                           else{
                               $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                                   $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                               });
                               $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                               $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
                           }
                       }
                   });
        </script>
       ```
   
 * わかる方よろしくお願いします。
 *  [orangemint](https://ja.wordpress.org/support/users/orangemint/)
 * (@orangemint)
 * [15年、 8ヶ月前](https://ja.wordpress.org/support/topic/jq%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-136076)
 * `}).attr('src', 'images/'+i+'.jpg');`
    のパスを自分の画像のあるところに書き換え
   ます。
 *  トピック投稿者 [tsuka](https://ja.wordpress.org/support/users/tsuka/)
 * (@tsuka)
 * [15年、 8ヶ月前](https://ja.wordpress.org/support/topic/jq%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-136087)
 * orangemintさん
    ありがとうございました無事さどうしました

4件の返信を表示中 - 1 - 4件目 (全4件中)

 トピック「JQについて」には新たに返信することはできません。

## タグ

 * [jq](https://ja.wordpress.org/support/topic-tag/jq/)

 * フォーラム: [テーマ](https://ja.wordpress.org/support/forum/themes/)
 * 4件の返信
 * 3人の参加者
 * 最後の返信者: [tsuka](https://ja.wordpress.org/support/users/tsuka/)
 * 最後の活動: [15年、 8ヶ月前](https://ja.wordpress.org/support/topic/jq%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-136087)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック
