Modal problem - Bootstrap

HTML & CSS
1

The website is james-beggs.co.uk /// I am having trouble with the modal it was working last night, I haven’t touched the code and now its not showing the image when clicked.

I’m using bootstrap, below I have posted the HTML, CSS & JS I am using.

     <section id="portfolio">
        
    <div class="container">
      <div class="row">
        <h1>The Work</h1>
        <div class="row">
          <div class="col-xs-6 col-md-4"><a title="Tracy McQuillan Photography" href="#"><img alt="website design, tracy mcquillan photography" class="thumbnail img-responsive" src="images/portfolio/tracy.png"></a></div>
          <div class="col-xs-6 col-md-4"><a title="Squared Entertainment" href="#"><img class="thumbnail img-responsive" alt="Logo design, Squared Entertainment" src="images/portfolio/squared-entertainment.png"></a></div>
          <div class="col-xs-6 col-md-4"><a title="Catch Scotland LTD" href="#"><img class="thumbnail img-responsive" alt="Website design, Catch Scotland LTD" src="images/portfolio/catch.png"></a></div>
          <div class="col-xs-6 col-md-4"><a title="Talia Telecom" href="#"><img class="thumbnail img-responsive" alt="Website Design, Talia Telecom" src="images/portfolio/talia.png"></a></div>
          <div class="col-xs-6 col-md-4"><a title="9th Cloud Gaming  Logo" href="#"><img class="thumbnail img-responsive" src="images/portfolio/9th-cloud-gaming.png"></a></div>
          <div class="col-xs-6 col-md-4"><a title="Helensburgh and Lomond Aspergers / Autism Society" href="images/portfolio/hla.png"><img class="thumbnail img-responsive" alt="Helensburgh and Lomond Aspergers / Autism Society" src="images/portfolio/hla.png"></a></div>
        </div>
        <hr>
      </div>
    </div>
    <div class="modal" id="myModal" role="dialog">
      <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
        <div id="modalCarousel" class="carousel">
     
              <div class="carousel-inner">
               
              </div>
              
              <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
              
            </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
       </div>
      </div>
    </div>     
    </section>


    .modal-dialog {}
.thumbnail {margin-bottom:6px;}

.carousel-control.left,.carousel-control.right{
  background-image:none;
  margin-top:10%;
  width:5%;
}

    <script>
/* copy loaded thumbnails into carousel */
$('.row .thumbnail').on('load', function() {
  
}).each(function(i) {
  if(this.complete) {
    var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
    
    item.attr("title",title);
    $(itemDiv.html()).appendTo(item);
    item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
    
});
</script>
2

I’m not sure I understand how this is meant to work. If I click any of the small images (apart from the HLA one), it opens a “slideshow” window, but the images are just the same size as the “thumbnails”. The small HLA image briefly flashes up the slideshow, but then opens as a larger image. (The links on the others all have href="#", while that one has href="images/portfolio/hla.png".) What is the expected behaviour?

3

Hi TechnoBear,

The idea is there is a thumbnail say 300x150 you click it and it brings you into the window which has the larger one like the HLA but it should be contained within the modal container not redirected to .co.uk/images/portfolio/hla.png.

Thanks for any more advice.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.