Displaying images from array using a foreach loop

Question

I have a foreach loop to display images like so:

<? foreach ($fmx as $key): ?>
    <li class="span3">
        <div class="thumbnail">                             
            <h5 class ="cv-img-header">FMX</h5>                                
                <div class="cv-icon-eye">
                    <a href="#fmx" role = "button" class = "icon-eye-open" data-toggle="modal"> </a>
                </div>
                <img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>">    
            <div id="fmx" class="modal hide fade cv-img-modal" tabindex="-1" role="dialog" aria-labelledby="fmx" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>FMX</h3>
                </div>
                <div class="modal-body"> 
                    <p><img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>"></p>                         
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary cv-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
             </div>
        </div>
     </li>

<? endforeach;?>

The images are all displayed in the thumbnail dic has they should be, however, when I click to open the modal window, the image is always the first element of the array(The modal opens a bigger view of the image). How can I have each modal image correspond with the thubnail image?

The array: Some elements have been cut out because I dont know how to format them here in a readable way.

 array(22) {
 [0]=>
 array(1) {
 ["file_name"]=>
  string(37) "e00f50e3b0cf9a96357f16761e10d7a9.jpeg"
 }
 [1]=>
 array(1) {
 ["file_name"]=>
 string(37) "e3f07180d4a01cca8021f0b31142840e.jpeg"
 }
 [2]=>
 array(1) {
 ["file_name"]=>
 string(37) "c52127da0a36d737da527c2c32f07b9d.jpeg"
 }
 [3]=>
 array(1) {
 ["file_name"]=>
 string(37) "1339aa888b253a50900e2e3c236b58f8.jpeg"
 }

Could you please provide us with the array?

Dylan Lea
– Dylan Lea

2014-02-19 15:54:37 +00:00
Commented Feb 19, 2014 at 15:54 — Dylan Lea
– Dylan Lea, Commented Feb 19, 2014 at 15:54

Rob M. · Accepted Answer · 2014-02-19 16:11:26Z

The problem is that you are targeting your modal based on id and not class. An id can only be assigned to one element. When you call document.getElementById('fmx') it is only going to return one element, the first matching element with that id. I suggest you switch to using numbered ids or a class name

Assuming $id is an integer, you could do something like:

<? foreach ($fmx as $key): ?>
    <? $image_ident = preg_replace('/[^a-zA-Z]*/', '', $key['file_name']); ?>
    <li class="span3">
        <div class="thumbnail">                             
            <h5 class ="cv-img-header">FMX</h5>                                
                <div class="cv-icon-eye">
                    <a href="#fmx-<?=$image_ident?>" role = "button" class = "icon-eye-open" data-toggle="modal"> </a>
                </div>
                <img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>">    
            <div id="fmx-<?=$image_ident?>" class="modal hide fade cv-img-modal" tabindex="-1" role="dialog" aria-labelledby="fmx" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3>FMX</h3>
                </div>
                <div class="modal-body"> 
                    <p><img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>"></p>                         
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary cv-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
             </div>
        </div>
     </li>

<? endforeach;?>

That would make each element's id unique.

As an aside, unless you are completely opposed to javascript, this seems like it should just be one modal where you swap out the source of image when the modal is launched. For example:

<? foreach ($fmx as $key): ?>
    <li class="span3">
        <div class="thumbnail">                             
            <h5 class ="cv-img-header">FMX</h5>                                
        <div id="image-modal" class="cv-icon-eye">
           <a href="#fmx" data-src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>" role = "button" class = "icon-eye-open" data-toggle="modal"> </a>
        </div>
        <img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>">    
        </div>
     </li>
<? endforeach;?>
<div id="fmx" class="modal hide fade cv-img-modal" tabindex="-1" role="dialog" aria-labelledby="fmx" aria-hidden="true">
   <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h3>FMX</h3>
   </div>
   <div class="modal-body"> 
       <p><img src="http://placehold.it/500x300&text=Image"></p>                         
   </div>
   <div class="modal-footer">
       <button class="btn btn-primary cv-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button>
   </div>
</div>
<script>
    $(function(){
        $('#image-modal a').on('click', function(){
            var image_source = $(this).attr('data-src');
            $('#fmx .modal-body img').attr('src', image_source)
        })
    })
</script>

Take a look at the revision to my answer, I provide a javascript solution that I feel works better. In any case, a preg_replace of non-alpha-numeric characters on the file name should suffice to give you a unique value to use as the id. I've updated my example with a preg_replace to give you a unique id for each image.

Collectives™ on Stack Overflow

Displaying images from array using a foreach loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related