display different images in bootstraps Lightbox modal from text links when clicked

Question

Hi I really need some help trying to wrap my mind a bootstraps Lightbox issue. I have a webpage with a list of text links. When each text link is clicked, I'm needing Lightbox modal to display a different image for each text link.

So far, I've placed my text link ids into an array, as well as my targeted images.

The text links have a click function assigned to them.

The click function displays the Lightbox but images will not display. I'm not sure if its a loop issue or variable issue or both.

The below code is what I have so far.

Any help would greatly appreciated!

window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')

$(document).ready(function(){
        var $imgarr = ['https://picsum.photos/800/406','https://picsum.photos/800/404','https://picsum.photos/800/402','https://picsum.photos/800/400'];
    
        var $lightbox = $('#lightbox');
        var $btnlightboxarr = document.getElementById(['linkbtn0','linkbtn1', 'linkbtn2', 'linkbtn3']);
        var $btnarr = $btnlightboxarr;  
        
       $('[data-target="#lightbox"]').on('click', function(event) {
                
           
                for (var i = 0; i < $imgarr.length; i++) {
                   var $btnarr = $imgarr[i];
                            };
           
                var $img = $(imgarr[i]).attr('img'),
                    $currentsrc = $img.attr('src'), alt = $img.attr('alt'),
                            css={
                                'maxWidth':$(window).width()-100,
                                'maxHeight':$(window).height()-100
                    };
    });
        $lightbox.on('shown.bs.modal', function (e) {   
        $currentsrc = $lightbox.find('src')
        $lightbox.find('.modal-dialog').css({'width':  $img.width()});
        $lightbox.find('.close').removeClass('hidden');
    });
});

h4,
.h4 {
  font-size: 1.5rem;
  color: #0070bb;
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.container {
  width: 75%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 35px;
  padding-bottom: 35px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>


<main role="main">
  <div class="container">
    <div>
      <h3>cool image 1 </h3>
      <a href="#" id="linkbtn0" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div>
      <h3>cool image 2 </h3>
      <a href="#" id="linkbtn1" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div>
      <h3>cool image 3 </h3>
      <a href="#" id="linkbtn2" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div>
      <h3>cool image 4</h3>
      <a href="#" id="linkbtn3" data-toggle="modal" data-target="#lightbox">
        <h5>Click here to see example</h5>
      </a>
    </div>
    <div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-lablelledby="myLargModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">x</button>
        <div class="modal-content">
          <div class="modal-body">
            <img src="" alt="" />
          </div>
        </div>
      </div>

    </div>

  </div>
</main>

There are a lot of little errors in your snippet. Can you please take a look at those and resolve them? For example; they value you put in the script section shouldn't have ` — Adam H, Oct 03 '18 at 20:33
@AdamH Thanks for pointing out those little mishaps. I have updated the snippets based on your comment. Thanks — ChrisH, Oct 03 '18 at 20:46
well somehow now it's worse lol. The boxes that are displayed are expecting only the content that they are labeled as. The JavaScript box should only have _valid_ JavaScript in it, you currently have script includes in there. CSS is correct. HTML should have everything in your body tag as well as any includes you need, so your CSS and JavaScript includes should be in there. I will edit the question and update it to how it should be however that will need to be appoved before it shows up here. — Adam H, Oct 03 '18 at 20:51
I've made the edit but your snippet still has a bunch of errors. In the future click the 'Run' button and make sure you don't have any errors before submitting it. — Adam H, Oct 03 '18 at 20:54
Oh snap... sorry about that. I've only posted a few times on stack. I'm still getting a feel for the system. — ChrisH, Oct 03 '18 at 20:56
Hi I everyone, I have updated the Jquery script. However, I am still having an issue with attaching image array to the imgarr variable. I keep getting an error that stating that $imgarr[i] variable is undefined even though I've thought I defined it. Basically I really just to get the bootstraps modal to display a different image from from each text button. Any thoughts on where I am messing up things up? — ChrisH, Oct 05 '18 at 14:33
`var $img = $(imgarr[i]).attr('img')` should be `var $img = $($imgarr[i]).attr('img')` - you missed the $ before imgarr. `var $img = $(imgarr[i]).attr('img') ...` section is all wrong, you are using commas instead of semicolons and I don't know what the css part is supposed to be doing. — Adam H, Oct 05 '18 at 15:38
Thanks so much for you help @Adam H. I will test later today. I got swamped with other projects. With the css part, I was trying dynamically capture the image width and height from the array. — ChrisH, Oct 08 '18 at 16:14

display different images in bootstraps Lightbox modal from text links when clicked

0 Answers0