Click a button or link dynamically image show in a modal, where you display image using jQuery in codeigniter. Set image path in the jQuery function and pass image path and value dynamically using jQuery in your web application.
In codeigniter framework you can update or manage image file dynamically using jQuery and set the directory in the jQuery function name and set value, which define in the link and call in the jQuery function and store in a variable.
In this tutorial I will give you source code, which you can use in your codeigniter web application. Follow the example:
PHP:
<?php if(!empty($value)){ foreach($value as $user_posts){ ?> <div class="post-content" id="posts<?php echo $user_posts->activity_id; ?>"> <a href="#about" onClick="show_post(<?php echo $user_posts->activity_id ?>)" data-toggle="modal" data-target="#editModal" data-image="<?php echo $user_posts->image ?>" id="editid<?php echo $user_posts->activity_id ?>">Edit Image</a> </div> <?php }}?>
Modal:
<div class="modal fade" id="editModal"> <div class="modal-dialog modalstyle"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">My Modal</h4> </div> <div class="modal-body form-group"> <img src="" name="image" class="img-responsive postimg" id="image"><br> <input type="text" name="editpost" class="form-control" placeholder="Enter a Post Description.." id="description"> </div> <div class="modal-footer "> <button type="button" class=" btn btn-primary col-sm-3 pull-right"></button></span> </div> </div> </div> </div> </div>
Script:
<script type="text/javascript"> function show_post(id) { var image=$('#editid'+id).data('image'); $("#image").attr('src','<?php echo base_url()?>asset/images/user_profile_pic/'+image); } </script>
Related posts