ページ上の複数の画像にブートストラップモーダルを使用する方法

Question

私は現在、私のポートフォリオページにあるレールにブログを構築しています。私は自分のプロジェクトの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"}