- ベストアンサー
PHPで変化した部分にibox効果
- Ajaxを使った画像データベースの検索システムを開発しています。prototype.jsを使ってプルダウンメニューを設置したHTMLにJavaScriptの使用でPHPよりデータベース検索を行っています。検索結果にはサムネイル画像とタイトルが含まれます。このサムネイル画像をクリックすることでibox.jsの効果を発動させて元サイズ画像をスライド表示させたいのですが、うまくいきません。
- HTML中にスクリプト宣言をしても、PHPの検索結果によってHTML自体が変化するわけでもなく、かと言って、PHP中にスクリプト宣言しても効果が表れることもなく。
- お力添えをいただける場合、ソースコードを提供させていただきます。
- Kuroichi01
- お礼率56% (60/106)
- AJAX
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- jQueryとprototypeの共存
prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 複数スクリプトの読み込みでlightboxが動作しません
MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示（lightbox）をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示（lightbox（最新版））のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示（lightbox）が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示（lightbox）のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。
- 締切済み
- JavaScript
- ホームページの部分的な遅延読み込について
ホームページで利用しているブログパーツが重たく、読み込みがもたついて困っています。 しかし、外したくないパーツなのですべて読み込んでから遅延という形で読み込んで解決できないかと検討してます。 しかし、AJAXなどを使えばできそうですが、私はAJAXを知りませんし、敷居の高さを感じてしまいます。 たとえばprototype.jsやScript.aculo.usなどを利用するなど、手軽に実現するには何か良い方法はございませんでしょうか？ ご教授お願い致します。
- ベストアンサー
- JavaScript
- Ajax以外で、JavaScriptからPHPへ渡
Ajax通信以外で、JavaScriptからPHPへ変数(配列)を渡したいのですが、 可能でしょうか？ 下記のような状態の時、js変数dataを、Ajax通信を利用せずにPHP変数として取得したいのですが、どうすればよいでしょうか？ JavaScript関数の中で、PHPフォームの送信ボタンをクリックさせる(ような)ことは出来ないのでしょうか？ <button type="button" onclick="testsubmit();">送信</button> <script> function testsubmit(){ js処理; var data = ★★; } </script> ■最終的にやりたいこと ・ボタンをクリックしたら、js処理で取得したjs変数(配列)を、Ajax通信を利用せずに、PHP変数として受け取りたい ・それを出来れば1クリックで処理したい
- ベストアンサー
- JavaScript
- Ajax.Updater で受けたHTML中のスクリプトを動かしたい
Prototype.js の Ajax.Updater で受け取ったコンテンツの中で <script type="text/javascript"> .... の関数を動かしたいのですが、上手くいきません。 Ajax.Updater で受け取った下のようなHTMLをページに埋め込んで、クリックするとオブジェクトが見つかりませんと言われてしまいます。 <a href="javascript:void(intest('OK'))">テスト</a> <script type="text/javascript"> var args; function intest (args) { alert(args) } </script> どうしたら動くようになるんでしょうか？
- 締切済み
- AJAX
- Node.jsでajaxがうまくいかない
nodejs初心者なのでよくわからずやっていて恐縮ですが、うまくいきません。 https://phpotameshi-hoto345.c9users.io/node-ajax/hello_ajax.html なのですがもともとはphpで送信ボタンを押したときにphpが実行されるものでしたが、これを少し改良してNode.jsでやってみようと思ったのですが、phpと違って <script src="scripts/hello.js"></script> のようにnodejsを読み込んでやれば同じ結果になると思ったのですがうまくいきません。 その前にローカルでもNode.jsは使えるようなので >node test.js Server running at http://localhost:8124/ のようにしてローカルでやってもhttp://localhost:8124/自体は問題なく立ち上がりtest.jsの中身は実行されたのですが、ajaxの方がうまくいきません。 ローカルでのNode.jsもServer running at http://localhost:8124/ となっていればNode.jsのサーバは起動しているので、 ローカルでhello_ajax.htmlを起動して、buttonを押せばajaxもnodejsも実行されるのではないでしょうか？
- ベストアンサー
- JavaScript
- インラインフレームを使って、lightboxを表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML（main.html）のheadに下記の記述をし、 【main.html】 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> インラインフレーム内（in.html）のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。
- ベストアンサー
- HTML
- スクリプト同士がケンカ？
初めまして。 HTML CSSを若干触れるものです。 サイトを制作していまして、 一部にlightboxをスクリプトタグで表示させていたのですが 新たに違うスクリプトタグ（トップ画像の上を画像がふらふら動くイメージのため） によって打ち消されてしまい、lightboxの効果がなく、新しいタブで画像を開いてしまいます。 こちらがjugemで用意されたlightboxタグです。 <script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script> <script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script> ここからが後から入れたタグです。 <script type="text/javascript"> $(function() { var bg1 = $('#main-img'); var speed = 3000; cloudMove(); setInterval(cloudMove, 6000); function cloudMove(){ bg1 .animate({backgroundPosition:'30px'}, speed) .animate({backgroundPosition:'0'}, speed); } }); </script> これらは一緒に効果を出す事は可能でしょうか？ よろしくお願い致します。
- ベストアンサー
- HTML
- JpGaph + Ajaxでグラフを疑似ウィンドウで表示したい
最近Ajaxを始めました。 PHP jpgraphで作成したグラフを、Ajaxで疑似ウィンドウ的に表示したいです。 graph.phpで生成したグラフを<div="graph"></div>に 埋め込む感じで、下記のようなスクリプトを書いてみました。 しかし当然バイナリデータなので、期待するような形で表示されてくれません。 どうしたらいいのか皆目検討がつかず、困っています。 ご存じの方、どうぞよろしくお願いいたします。 <html> <head> <script src="../../js/prototype.js" type="text/javascript"></script> <script type="text/javascript"> function showGraph(){ uri = "graph.php"; options = {onComplete: function(req){$("graph").innerHTML=req.responseText;}}; new Ajax.Request(uri, options); } </script> </head> <body> <input type="button" value="click" onClick="showGraph()"> <div id="graph"></div> </body> </html>
- ベストアンサー
- PHP
- エレメントclass?の値をPHPの変数に入れる
Aタグをクリック→jsが発動(ajaxでphpにpostでエレメントID？を投げる)→phpでエレメントIDを受け取って処理 phpで処理した結果→jsに返す(ajaxの指定したエレメントclass？に渡すよう設定)→取得 selectの範囲の中なんですが、$stausにclass='edit_status'の結果を入れるにはどうしたらいいでしょうか。 <select> <option <?php $status=."class='edit_status'".; if($status == 1){ echo "selected"; }?> >下書き</option> <option <?php $status=."class='edit_status'".; if($status == 2){ echo "selected"; }?> >非公開</option> <option <?php $status=."class='edit_status'".; if($status == 3){ echo "selected"; }?> >公 開</option> </select> id <input type='text' value='1111' id='eid' class='edit_id'>
- ベストアンサー
- PHP
お礼
大変貴重なご意見ありがとうございます。 Ajax初心者なのでサイトを見ながら奮闘中です。 もうしばらく奮闘するハメになりそうですが、完成するか路頭に迷いましたらまたご報告いたします。 路頭に迷った場合はまたお力添えをお願いいたします。