CODEWITHSUNDEEP
phpjavascriptjquery
AlexB
AlexB

Reputation: 2174

Creating onClick function to display first image in the array

Is there any solution for the following:

My script gets images from DB which I would like to be displayed in fancybox when certain button is clicked.

So here is my problem, how to create a button that will have something like onClick function which will show the first image from the array? Or if there is any other solution, please let me know?

So here is my PHP and also output HTML that this PHP creates:

<?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>
 ";
}
?>

and here is HTML Output 

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

I am pretty new to all this staff, so please try not to be harsh on me.

Upvotes: 0

Views: 319

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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; }

Working Demo http://jsfiddle.net/cse_tushar/kfPME/

used jQuery 1.9.1

Upvotes: 1

Related Questions