创建的onClick功能的阵列

Question

中显示的第一图像是否有以下任何解决方案：

我的脚本会从数据库图像，我想点击某个按钮时，显示在的fancybox。

所以这里是我的问题，如何创建一个按钮，将有类似onClick函数这将显示数组中的第一个图像？或者如果有其他解决方案，请让我知道？

因此，这里是我的PHP，也输出HTML，这个PHP创建：

<?php 
$samples = 'SELECT * FROM glass_splashbacks WHERE type = :cat'; 
$res = $db->prepare($samples); 
$res->execute(array(':cat' => $category)); 
$count = $res->rowCount(); 
if($count > 0) 
while ($row = $res -> fetch()){ 
$postimg = $row[spl_image]; 
$postid = $row[id]; 
$path_n = $row[img_folder]; 
$postFirstimage = $row[alt_design_img]; 
$postFirstimagTitle = $row[alt_design_img_title]; 
echo "<div class=\"glass_sample\"> 
     <h3 class=\"sample_h\">$row[name]</h3> 
     <a href='$img_path/samples/$postimg'><img src='$img_path/thumbs/$postimg' alt='$row[name]' width='190' height='190'class='aligncenter size-full' title='$row[name]'></a>"; 
if($postFirstimage!=""){echo " 
     <a class='button fancybox' rel='group$postid' href='$img_path/$path_n/$postFirstimage' title=\"$postFirstimagTitle\">More Details</a> 
     <div class=\"add_im_cont\">  
     "; 
$add_designs = 'SELECT * FROM glass_splashbacks_add WHERE type = :cat_add'; 
$res_add = $db->prepare($add_designs); 
$res_add->execute(array(':cat_add' => $path_n)); 
$count_add = $res_add->rowCount(); 
if($count_add > 0) 
while ($row_add = $res_add -> fetch()){ 
$postimgadd = $row_add[alt_design_image]; 
$title = $row_add[alt_design_image_title]; 
echo "<a class=\"fancybox\" rel=\"group$postid\" href=\"$img_path/$path_n/$postimgadd\" title=\"$title\"></a>";} 
echo " 
</div>";}else{echo '';} 
echo " 
</div> 
"; 
} 
?> 

，这里是HTML输出

<div class="glass_sample"> 
<h3 class="sample_h">Floral Glass</h3> 
<a href='/images/glass-splashbacks/samples/floral-design.jpg'><img src='/images/glass-splashbacks/thumbs/floral-design.jpg' alt='Floral Glass' width='190' height='190'class='aligncenter size-full' title='Floral Glass'></a> 
<a class='button fancybox' rel='group1' href='/images/glass-splashbacks/florial/blue.jpg' title="Florial Blue">More Details</a> 
<div class="add_im_cont">  
<a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/blue.jpg" title="Florial Blue"></a> 
<a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/green.jpg" title="Florial Green"></a> 
<a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/grey.jpg" title="Florial Grey"></a><a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/lime.jpg" title="Florial Lime"></a> 
</div> 
</div> 

<div class="glass_sample"> 
<h3 class="sample_h">Ambient Glass</h3> 
<a href='/images/glass-splashbacks/samples/ambient.jpg'><img src='/images/glass-splashbacks/thumbs/ambient.jpg' alt='Ambient Glass' width='190' height='190'class='aligncenter size-full' title='Ambient Glass'></a> 
<a class='button fancybox' rel='group2' href='/images/glass-splashbacks/ambient/GreenAmbient.jpg' title="Ambient Green">More Details</a> 
<div class="add_im_cont">  
<a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/GreenAmbient.jpg" title="Ambient Green"></a> 
<a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/GreyAmbient.jpg" title="Ambient Grey"></a> 
<a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/PurpleAmbient.jpg" title="Ambient Purple"></a> 
<a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/RedAmbient.jpg" title="Ambient Red"></a> 
</div> 
</div> 

我是很新的这一切工作人员，所以请尽量不要对我很苛刻。

Answer 1

HTML

<div class="glass_sample"> 
<h3 class="sample_h">Floral Glass</h3> 
<a href='/images/glass-splashbacks/samples/floral-design.jpg'><img src='/images/glass-splashbacks/thumbs/floral-design.jpg' alt='Floral Glass' width='190' height='190'class='aligncenter size-full' title='Floral Glass'></a> 
<a class='button fancybox' rel='group1' href='/images/glass-splashbacks/florial/blue.jpg' title="Florial Blue">More Details</a> 
    <input type="button" value="showfirstimage" class="showfirstimage"/> 
<div class="add_im_cont">  
<a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/blue.jpg" title="Florial Blue"></a> 
<a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/green.jpg" title="Florial Green"></a> 
<a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/grey.jpg" title="Florial Grey"></a><a class="fancybox" rel="group1" href="/images/glass-splashbacks/florial/lime.jpg" title="Florial Lime"></a> 
</div> 
</div> 

<div class="glass_sample"> 
<h3 class="sample_h">Ambient Glass</h3> 
<a href='/images/glass-splashbacks/samples/ambient.jpg'><img src='/images/glass-splashbacks/thumbs/ambient.jpg' alt='Ambient Glass' width='190' height='190'class='aligncenter size-full' title='Ambient Glass'></a> 
<a class='button fancybox' rel='group2' href='/images/glass-splashbacks/ambient/GreenAmbient.jpg' title="Ambient Green">More Details</a> 

<div class="add_im_cont">  
    <ul>  
     <li class="showfirstimage"><input type="button" value="showfirstimage"/></li> 
     <li><a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/GreenAmbient.jpg" title="Ambient Green"></a></li> 
     <li><a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/GreyAmbient.jpg" title="Ambient Grey"></a></li> 
     <li><a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/PurpleAmbient.jpg" title="Ambient Purple"></a></li> 
     <li><a class="fancybox" rel="group2" href="/images/glass-splashbacks/ambient/RedAmbient.jpg" title="Ambient Red"></a></li></ul> 
</div> 
</div> 
    <br/> 
    <div id="showimages"></div> 

jQuery的

$(document).ready(function(){ 
    $('.showfirstimage').click(function(){ 
     var x= $(this).next().find('a').attr('href'); 
     alert(x); 
     var x1 = '<img src="'+x+'" />'; 

       $('#showimages').html(x1); 
    }); 
}); 

＃CSS＃

ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 

ul li { display: inline; } 

工作演示http://jsfiddle.net/cse_tushar/kfPME/

使用的jQuery 1.9.1