ベストアンサー

jQueryでPHPのパラメータを使うには

2011/04/30 10:21

画像のツールチップを表示させるjQuryのライブラリを導入しました。ソースをはしょっているので、意味はわからないと思いますが、下記のように、 relのに値に「?no="～"」というパラメータを使用すると動作してくれません。おそらくjQuery内でPHPのパラメータを使えない事が原因だと思うのですが、このパラメータをjQuery内で利用するにはどうすれば良いでしょう？ /* スクリプト */ <script type="text/javascript"> …………… $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>"); …………… </script> /* PHPファイル */ <a href="test.php?no=1" class="screenshot" rel="test.php?no=1"><img src="test.php?no=1"></a>

25taku
お礼率85% (76/89)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kosukejlampnet
ベストアンサー率44% (126/282)

2011/05/04 03:24 回答No.2

$("body").append("<p id='screenshot'><img src='"+ $("a.screenshot").attr("rel") +"' alt='url preview' />"+ c +"</p>");

質問者

お礼 2011/05/06 12:35

自己解決致しました $("a.screenshot").attr("rel")を$(this).attr("rel")としたら表示されました。

質問者

補足 2011/05/06 12:20

ご回答ありがとうございます。表示することが出来ました！しかしながら、この書き方ですと複数要素に指定することができなくなります。一番目要素のrelの値で固定されてしまうのです。変更前のソースですと複数要素にも指定できるのですが…何故でしょうか。

その他の回答 (1)

noris02
ベストアンサー率74% (56/75)

2011/05/01 02:05 回答No.1

荒業ですが、jqueryをphpで出力する。です。

質問者

お礼 2011/05/06 12:37

ご回答ありがとうございます。今回は上記の方の方法を採用いたしました。

関連するQ&A

jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加これで完了のはずですが、しかし動作しません。画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
jQueryで画像にリンクを張りたい
HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、ページが読み込まれたときに、そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のようなスクリプトを書いてみたのですが、できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、新しいバージョンでも構いません。よろしくお願いします。
- ベストアンサー
- JavaScript
jqueryについて（v 1.4.2）
jqueryについて（v 1.4.2） <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。初心者なので分かりやすく教えていただければ幸いです。
- ベストアンサー
- AJAX
JSONデータをｊQueryにわたす際に文字化け
MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。どなたか助けていただけませんでしょうか？ -文字化け結果- No：1　Title：¤Ç¤¤¿¡ªÂçÀ®¸ù¡ª No：2　Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
jquery.mobile　画像を中央に表示
<!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが正方形ではない画像が、右上に寄ってしまうのですがこれを回避する方法はありますか？例で言うのであれば添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。
- ベストアンサー
- HTML
jQueryについて
jQueryのクロスフェードとlightboxを同一ページに設定しています。よく分かっていないのに、コピペで作っていますが、クロスフェードをするとlightboxが動作しません。設定をどう変更したら出来るようになりますか？どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"> <div id="container"> <div id="header"> <h1>いろはにほへと</h1> </div> <div id="menu"> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>
- 締切済み
- JavaScript
jquery スライダーが動かない
昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。問題のサイト：http://snapkidz.biz/wp/ 先日の質問：http://okwave.jp/qa/q7180952.html 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。  <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">  <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico"> <?php wp_head(); ?>  <script type="text/javascript" src="http://snapkidz.biz/slider1/script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://snapkidz.biz/slider1/style.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div class="header" id="Top"> <h1><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" alt="Art・・"></h1> <div class="nav"> <ul> <li class="nav1"><a href=""></a></li> <li class="nav2"><a href=""></a></li> <li class="nav3"><a href=""></a></li> </ul> </div> <div class="siteImage"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image2.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image3.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image4.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image5.jpg" alt="" /></a></div> </div> </div> <a href="#" id="slide-prev">«</a><a href="#" id="slide-next">»</a> </div> <p><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" alt="" class="top" /></p> </div> でcssが html,body{margin:0;padding:0;} #wrapper{width:980px;margin:0 auto;position:relative;} div.header{border:sold 1px solid;} div.header h1{position:absolute;top:0;left:0;} div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;} div.header div.nav ul{display:block;height:70px;width:242px;text-align:right;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/blacknav.jpg);background-repeat:no-repeat;position:relative;left:737px;top:40px;} div.header div.nav ul li{display:inline;width:85px;} div.header div.siteImage{position:relative;width:100%;min-width:640px;} div.header div.siteImage img.top{position:absolute;top:-80px;left:400px;} です。スライダーダウンロード元：http://unformedbuilding.com/articles/jquery-simple-loop-slider/ head部分の記載が違うのかと思ったのですが、そうではないようでした・・・何が原因なんでしょうか？宜しくお願い致します。
- ベストアンサー
- JavaScript
【Jquery】before()でソースを挿入
Jquery初心者です。　 before()で指定したdivの直前にソースを挿入したいのですが、構文エラーでうまくいきません。単純なソース（たとえば<p>hello</p>など）はうまく入るのですが、 img等「""」が入るタグがうまく挿入できません。リストやアンカー、イメージなどを挿入するつもりなのですが、 before()を使う以外で何か方法はありますか？書いたソースは <div id="exam">その他の商品はこちら</div> <script type="text/javascript" src="/js/jquery/.js"></script> <script type="text/javascript"> $(function(){ $("div#exam").before("<ul><li><img src="title.gif" alt="おすすめアイテム" /></li><li><a href="/item.html?id=000"><img src="01.gif" alt="アイテムA" /></a></li><li><a href="/item.html?id=001"><img src="02.gif" alt="アイテムB" /></a></li><li><a href="/item.html?id=002"><img src="03.gif" alt="アイテムC" /></a></li></ul>"); return false; }); </script>
- ベストアンサー
- JavaScript
同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを同じHTML内に入れたいのですが両方ともうまくいきません。いろいろ自分なりに調べたのですが、わからないです。うまくいく方法をどうか教えてもらえないでしょうか？宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div>  <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div>  </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
Jqueryスライダーが動きません。
WEB制作の素人です。簡単といわれている「FlexSlider2」ですが、私がやったところ、画像は出たもののスライドにならず、そのまま上下に出てしまいます。一度見ていただき、間違えを教えていただけますか？（ちなみにスムーススクロールは動きます）  <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script>    </head> <body id="@@(id)@@"> <div id="wrapper">  <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>  <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。
- ベストアンサー
- JavaScript

jQueryでPHPのパラメータを使うには