如何对页面上的多个图像使用 bootstrap 模式

Question

我目前正在 rails 中创建一个博客，在我的投资组合页面上，我正在使用回形针 gem 通过 rails 管理后端添加我的项目的 6 张图片。在我的投资组合页面上，当我单击图像时，我希望打开一个模式，显示项目图像的幻灯片。

我的问题是，当我单击任何项目图像时，模式打开但只显示第一个项目图像。

这是我的代码 `

-# List projects[enter image description here][1] in a reverse order to show last project first.


- @portfolios.reverse.each do |portfolio|
    #myModal.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
        .modal-dialog{:role => "document"}
            .modal-content
                .modal-header
                    %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"}
                        %span{"aria-hidden" => "true"} ×
                    %h4#myModalLabel.modal-title=portfolio.title
                .modal-body
                    #myCarousel.carousel.slide{"data-ride" => "carousel"}

                        %ol.carousel-indicators
                            %li.active{"data-slide-to" => "0", "data-target" => "#myCarousel"}
                            %li{"data-slide-to" => "1", "data-target" => "#myCarousel"}
                            %li{"data-slide-to" => "2", "data-target" => "#myCarousel"}
                            %li{"data-slide-to" => "3", "data-target" => "#myCarousel"}
                            %li{"data-slide-to" => "4", "data-target" => "#myCarousel"}
                            %li{"data-slide-to" => "5", "data-target" => "#myCarousel"}
                            %li{"data-slide-to" => "6", "data-target" => "#myCarousel"}

                        .carousel-inner{:role => "listbox"}

                        .item.active
                        =image_tag portfolio.image1.url(:medium),:class => "style_image img-responsive"


                        %a.left.carousel-control{"data-slide" => "prev", :href => "#myCarousel", :role => "button"}
                            %span.glyphicon.glyphicon-chevron-left{"aria-hidden" => "true"}
                            %span.sr-only Previous
                        %a.right.carousel-control{"data-slide" => "next", :href => "#myCarousel", :role => "button"}
                            %span.glyphicon.glyphicon-chevron-right{"aria-hidden" => "true"}
                            %span.sr-only Next
                    = portfolio.text

    .col-xs-12.col-sm-6.col-md-6

        %h3.time=portfolio.title

        .image.col-sm-12
            %a{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"}
                =image_tag portfolio.image1.url(:medium),:class => "style_image img-responsive"
                %p.imgDescription
                    %i.fa.fa-search.fa-2x{"aria-hidden" => "true"}

            .caption
                %br
                -#Show the fist 350 characters of the article
                -#button to show the full article.
                %div.tags
                    %p.tags= raw portfolio.all_tags

`

Answer 1

答案在这里

    %div.container.buffered-top
-# List news article in a reverse order to show last article first.yes please yes it does thanklyou, okay thankyou
- @portfolios.reverse.each_with_index do |portfolio,index|
    = will_paginate @portfolios,  renderer: BootstrapPagination::Rails
    / Trigger the modal with a button
    / Modal
    .modal.fade{:role => "dialog", id: "#{"myModal" + index.to_s}"}
        .modal-dialog
            / Modal content
            .modal-content
                .modal-header
                    %i.fa.fa-times.fa-2x.close{"aria-hidden" => "true","data-dismiss" => "modal", :type => "button"}
                %br

                %h4.modal-title=portfolio.title


                .modal-body
                    .picture
                        =image_tag portfolio.image1.url(:thumb),:class => "style_image img-responsive", :index => index
                    - if !portfolio.link.blank?
                        %a.link{:href => "http://#{portfolio.link}",:target => "_blank"}
                            %i.fa.fa-github.fa-2x
                    %br
                    %br
                    -#Show the fist 350 characters of the article
                    %p.text= portfolio.text

    .col-xs-12.col-sm-6.col-md-6
        .image.col-sm-12
            %a{"data-target" => "#myModal#{index.to_s}", "data-toggle" => "modal", :index => index}
                =image_tag portfolio.image1.url(:medium),:class => "style_image img-responsive", :index => index
            %a{"data-target" => "#myModal#{index.to_s}", "data-toggle" => "modal"}
                .imgDescription
                    .tags
                        =raw portfolio.all_tags
                    .title
                        =portfolio.title
                    %br
                    %i.fa.fa-search.fa-2x{"aria-hidden" => "true"}

如何对页面上的多个图像使用 bootstrap 模式

how to use bootstrap modals for multiple images on a page

javascript

portfolio

ruby-on-rails

twitter-bootstrap