javascript - loading a specific slide in carousel in modal in bootstrap - Stack Overflow

admin管理员组

文章数量:1356224

I have a list of thumbnails, on a Bootstrap 3 page. When clicking them, I want to open a modal which contains a carousel of additional info for each of the thumbnails.

I would like that when I click on the thumbnail, the modal opens with the specific slide in the carousel open.

I'm trying the following, but both the modal's "data-toggle" and carousel's "data-slide-to" attributes use "data-target" to set the target, but in this case the targets are two different IDs ("#myModal" and "#gallery" repectively). I can't have two "data-target" on the same HTML tag. Is there a way to hack this easily? Sorry, I'm not a dev.

This is the list of thumbnails:

<div class="container">
  <div class="row">
     <div class="col-xs-6 col-sm-4 col-md-3"><img src=";text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src=";text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src=";text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src=";text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
   </div>
</div>

And here's the modal code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></div>
            <div class="modal-body">

                <div id="gallery" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src=";text=item1" alt="item1">
                            <div class="carousel-caption">
                                <h4>heading 1</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src=";text=item2" alt="item2">
                            <div class="carousel-caption">
                                <h4>heading 2</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src=";text=item3" alt="item3">
                            <div class="carousel-caption">
                                <h4>heading 3</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src=";text=item4" alt="item4">
                            <div class="carousel-caption">
                                <h4>heading 4</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>

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

I have a list of thumbnails, on a Bootstrap 3 page. When clicking them, I want to open a modal which contains a carousel of additional info for each of the thumbnails.

I would like that when I click on the thumbnail, the modal opens with the specific slide in the carousel open.

I'm trying the following, but both the modal's "data-toggle" and carousel's "data-slide-to" attributes use "data-target" to set the target, but in this case the targets are two different IDs ("#myModal" and "#gallery" repectively). I can't have two "data-target" on the same HTML tag. Is there a way to hack this easily? Sorry, I'm not a dev.

This is the list of thumbnails:

<div class="container">
  <div class="row">
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal" data-slide-to="0"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item2" data-toggle="modal" data-target="#myModal" data-slide-to="1"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item3" data-toggle="modal" data-target="#myModal" data-slide-to="2"></div>
     <div class="col-xs-6 col-sm-4 col-md-3"><img src="http://placehold.it/150x75&text=item4" data-toggle="modal" data-target="#myModal" data-slide-to="3"></div>
   </div>
</div>

And here's the modal code:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></div>
            <div class="modal-body">

                <div id="gallery" class="carousel slide" data-interval="false">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://placehold.it/600x400&text=item1" alt="item1">
                            <div class="carousel-caption">
                                <h4>heading 1</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item2" alt="item2">
                            <div class="carousel-caption">
                                <h4>heading 2</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item3" alt="item3">
                            <div class="carousel-caption">
                                <h4>heading 3</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/600x400&text=item4" alt="item4">
                            <div class="carousel-caption">
                                <h4>heading 4</h4>
                                <p>This is the description.</p>
                            </div>
                        </div>
                    </div>
                    <a class="left carousel-control" href="#gallery" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#gallery" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>

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

• javascript
• html
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow asked Jul 25, 2014 at 5:22 andros69andros69 5311 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can wrap the image in anchor that targets the carousel like this:

<a href="#gallery" data-slide-to="0">
  <img src="http://placehold.it/150x75&text=item1" data-toggle="modal" data-target="#myModal">
</a>

Demo: http://jsfiddle/NJWqw/

本文标签： javascriptloading a specific slide in carousel in modal in bootstrapStack Overflow