image(html tag)をクリックすると、ポップアップパネルが表示されます(例:Facebookの画像をクリックしたときのポップアップペインのように)。注:ポップアップペインには画像とテキストが含まれている必要があります(データベースから取得)。
どうすればそれができますか?事前にthx
image(html tag)をクリックすると、ポップアップパネルが表示されます(例:Facebookの画像をクリックしたときのポップアップペインのように)。注:ポップアップペインには画像とテキストが含まれている必要があります(データベースから取得)。
どうすればそれができますか?事前にthx
これに沿った何か:
HTMLページに、次の種類のコードを追加します。
(もちろん、最初にページにJqueryを含めます)
image(html tag)をクリックすると、
$('#idOfWhateveriWant').on('click',function(){
});
ポップアップパネルを表示したいのですが(例:Facebookのポップアップペインのように画像をクリックしたとき)。
$('#idOfWhateveriWant').on('click',function(){
//window.open("whatever")
//ABOVE NOT RECOMMENDED
//use below instead
$.ajax({
url: 'ajax/test.php',
success: function(data) {
$('.result').html(data);
//or use some jquery plugin you made
//or external plugin
// to make your pane appear
//$.WHateverPopupPanePlugin(whatever,data)
alert('Load was performed.');
}); //SEE http://api.jquery.com/jQuery.ajax/
});
注:ポップアップペインには画像とテキストが含まれている必要があります(データベースから取得)。
ajax / test.phpの場合:
以下のPHPの例:
<?php
//--------------------------------------------------------------------------
// Example php script for fetching data from mysql database
//--------------------------------------------------------------------------
$host = "localhost";
$user = "root";
$pass = "root";
$databaseName = "ajax01";
$tableName = "variables";
//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
include 'DB.php';
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$result = mysql_query("SELECT * FROM $tableName"); //query
$array = mysql_fetch_row($result); //fetch result
//--------------------------------------------------------------------------
// 3) echo result as json
//--------------------------------------------------------------------------
echo json_encode($array);
?>
追加のヘルプ: