创建onClick函数以显示数组中的第一个图像

时间：2013-05-01 13:48:36

标签： php javascript jquery

以下是否有任何解决方案：

我的脚本从DB获取图像，当我点击某个按钮时，我希望在fancybox中显示这些图像。

所以这是我的问题，如何创建一个具有onClick功能的按钮，它将显示数组中的第一个图像？或者，如果有任何其他解决方案，请告诉我？

所以这是我的PHP，也是这个PHP创建的输出HTML：

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

我对所有这些员工都很陌生，所以请尽量不要对我这么苛刻。

1 个答案:

答案 0 :(得分：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

相关问题
最新问题