CODEWITHSUNDEEP
htmltwitter-bootstrapcarousel
Kwag_Myers
Kwag_Myers

Reputation: 53

Bootstrap Carousel - Linked Image With Caption

This is my first carousel project and I have a question on the proper/preferred way of adding hyperlinks to the images. Here is my item format (using w3school's example):

<div class="item"><a href="videos/Reports.mp4" target="_blank">
    <img src="graphics/reportsCarousel.png" /></a>
       <a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption">
          <p>Reports</p>
       </div></a>
  </div>

Notice I have both the image and the caption linked, because the caption div caused a dead spot so that only the top and bottom of the image was active, i.e., clickable. I tried putting the caption in the image, but didn't like the results. I also tried moving the caption above and below the image, but the caption didn't display. I really like the way this looks, but wonder if there's a better way to set up the link?

Carousel Example

Extra Credit: Also, I wonder if there is a way to have two or three images display side-by-side using the current div setup? When I put the second image into the item div the images display vertically instead of horizontally, even using an inline ul. I can do it using a more complicated method, but if I can easily tweak this one it would save me a lot of time.

Upvotes: 2

Views: 6181

Answers (2)

Ale
Ale

Reputation: 1

Doesnt't work. With that code you find the first href ever. Try this one:

$(function() {
    $( ".item" ).each(function(index) {
        $(this).on("click", function() {
            console.log('clicked! going to: ' + $(this).find('a').attr('href'));
        });
    });
});

Upvotes: 0

blurfus
blurfus

Reputation: 14031

I had some time today and put this together. It seems to work.

However, I am not sure it addresses your issues since, lacking a [mcve], I cannot reproduce your issues.

I added the JS to log the click event to console - you may or may not need it in your final version (again I am unsure of what you need since the code you provided is not complete/verifiable)

Please note

that the runnable snippet below is inside a frame and the x-frame-options is set to SAMEORIGIN so the link will not actually work here (you will need to copy/paste into your own page to see the links work)

$(function() {
  $('.item').on('click', function() {
    console.log('clicked! going to: ' + $(this).find('a').attr('href'));

    window.location = $(this).find('a').attr('href');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 1</h3> 
        </div>
      </a>
    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 2</h3>

        </div>
      </a>
    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 3</h3>

        </div>
      </a>

    </div>

    <div class="item">
      <a href="http://google.com" target="_blank">
        <img src="http://lorempixel.com/1024/480/" />
        <div class="carousel-caption">
          <h3>caption 4</h3>
        </div>
      </a>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Upvotes: 1

Related Questions