Home/ Questions/Q 7829399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T10:44:43+00:00

<html> <head> <link href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css rel=stylesheet type=text/css/> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script> <script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js></script> <% String str =Ravi;

  • 0
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<%
String str ="Ravi";
%>
 <script>
function changeIt(_src)
{
  $("#dialog").dialog();
}
 </script>

</head>
<body >
<img onclick="changeIt(this)" src='Cham/ravi.jpg' name='myimage' height ="100" width="100"  />
<div id="dialog" title="Dialog Title">
The Name is <%=str%>
<img  src='Cham/ravi.jpg' name='myimage' height ="1000" width="1000"  />
</div>
</body>
</html>

Hi ,

On page start up , On a AJAX call , I have some images present in a folder , i will fetch those paths and will show them on UI Page .

Now On click of that Image on the UI Page , i am trying to display a Jquery dialogue BOX which must include some data from Database related to that Image details and as well as that Image ( which was clicked ) in bigger size . (Basically a POP UP)

when i include the Image also in the dialogue div , it looks awkward as the Image is loaded at the Page loading only .

If this is not a better approach for showing POP ups on a rich web site
as you people being UI Experts , could you please advice me what would be the best approach ?? I am not sure if Light box suits for my requirement , please suggest me . Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not really understand your question but at least i’m trying to help here..

    To fix your code, here is the working examples. Do not forget to include jqueryUI in you page.

    <img class="thumbnail" src='Cham/ravi.jpg' name='myimage' height ="100" width="100"  />

<div id="dialog" title="Dialog Title">
The Name is <%=str%>
<img  src='Cham/ravi.jpg' name='myimage' height ="1000" width="1000"  />
</div>

$(document).ready(function(){
    $('#dialog').dialog({autoOpen :false});
});

$('.thumbnail').on('click', function() {
    $('#dialog').dialog('open');
});​

    Also, if I’m not misunderstood your question, this plugin is what are you looking for.

    • 0