CODEWITHSUNDEEP
php
Kisaragi
Kisaragi

Reputation: 2218

Displaying images from array using a foreach loop

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

Upvotes: 0

Views: 2514

Answers (1)

Rob M.
Rob M.

Reputation: 36511

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>

Upvotes: 1

Related Questions