<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Képtár</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-10-04" />
      <meta name="revised" content="Tóth Péter, 04/10/2012" />
      <meta name="description" content="jQuery UI - Képtár" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         #idKepek{
            overflow:auto;
            height:124px;
            width:100%;
            white-space:nowrap;
            }
         #idKepek img{
            height:100px;
            margin:0px 10px;
            padding:0;
            }
         #idDialog{
            display:none;
            }
         #idNagyit{
            width:1000px;
            height:auto;
            }
      </style>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         <!--
         $(document).ready(function(){
            // Képek felhelyezése a weboldalra
            var sz="";
            for(var i=1;i<=9;i++)
               sz+="<img src=\"kep"+i+".jpg\">";
            document.getElementById("idKepek").innerHTML=sz;
            // Képre való kattintás lekezelése
            $("img").click(function(){
               var sKep=$(this);
               // Nagyított ablak megnyitása
               $("#idDialog" ).dialog({
         			width:"auto",
         			height:"auto",
         			position:["center","top"],
         			resizable:false,
         			modal:true,
         			// Tartalom elkészítése ablak megnyitásakor
      	     		open: function(event, ui){
                     $(this).html("<img id=\"idNagyit\" src=\""+sKep.attr("src")+"\">");
                     }
                  });
               });
            });
         -->
      </script>
   </head>
   <body>
      <div id="idKepek"></div>
      <div id="idDialog" title="Nagyított kép"></div>
   </body>
</html>