Question

When I click on image(html tag), I would like show a popup panel (ex:like popup pane in facebook when we click on picture).
note: popup pane should contain image and text(retrieve from database).

How could I do that ?
thx you in advance

Answer 1

Something along the lines of this:

In your HTML page, add this kind of code:

(first include Jquery on your page of course)

When I click on image(html tag),

$('#idOfWhateveriWant').on('click',function(){

});

I would like show a popup panel (ex:like popup pane in facebook when we click on picture).

$('#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/
});

note: popup pane should contain image and text(retrieve from
database).

IN ajax/test.php:

1. configure mysql database first,
2. put some data in it
3. Add some code like this to access stuff from your database and echo it as a JSON object

Php example below:

 <?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);

?>

Additional help:

• http://api.jquery.com/jQuery.ajax/
• http://api.jquery.com
• http://openenergymonitor.org/emon/node/107