I am currently working on creating a gallery using CodeIgniter. I have successfully retrieved a list of image names from the database and displayed them on the view page. Now, I would like to implement a feature where users can click on an image name and retrieve the corresponding image through AJAX. Since I am not very experienced with coding, I need assistance with the fetch gallery function. Any help would be greatly appreciated. Thank you in advance. Below is the code snippet for fetching image names:
<?php
//$i=1;
foreach($data as $row)
{
?>
<img class="img-circle img-bordered-sm" src='<?php echo base_url();?>assets/uploads/<?php echo $row->imagefiles;?>' height='30px' width='30px'>
<span class="username">
<a id="view_gallery" class="view_gallery" href="javascript:void(0);" id="<?php echo $row->id;?>"><?php echo $row->name; ?></a>
</span>
<hr>
<?php }
?>
And here is the script that requires further code assistance :
<script type="text/javascript">
$( ".view_gallery" ).click(function() {
id = $(this).attr('id');
/* alert(userid);*/
$.ajax({
url : '<?php echo base_url('fetch_gallery_data') ;?>',
method : 'post',
data : {id : id},
success : function(res){
$('.disp_gallery').html(res);
}
})
});
</script>
Displayed below is the fetch gallery function within the controller:
public function fetch_gallery_data()
{
$id = $this->input->post('id');
$where = $id;
$result = $this->App_model->gallery_model('gallery','id',$where);
$data = '';
if(count($result) > 0)
{
foreach ($result as $key => $value)
{
$files = json_decode($value->imagefile);
if($value->id > 0)
{
$data .= "<div class='col-md-3' style='border:1px solid gray; margin:20px; padding:20px; ' id='".$id."''>";
$data .= "<a >";
$data .= "<img src='".base_url()."assets\uploads/seo-business-quotes-6.jpg' height='150' width='150'><br>";
$data .= "</div>";
}
else
{
foreach ($files as $key => $value)
{
$data .= "<div class='col-md-3' style='border:1px solid gray; margin:20px; padding:20px; '>";
$data .= "<img src=".base_url()."assets\uploads/".$value." height='150' width='150'><br>";
$data .= "</div>";
}
}
}
}
else
{
$data .= 'No Records.';
}
echo $data;
}