Wie man bootstrap modals für mehrere Bilder auf einer Seite verwendet

Question

Ich baue gerade einen Blog in Schienen, auf meiner Portfolio-Seite, ich füge 6 Bilder meiner Projekte durch die Schienen admin back end mit dem Büroklammer Juwel. Auf meiner Portfolio-Seite, wenn ich auf ein Bild klicke, möchte ich ein Modal öffnen, das eine Diashow der Projektbilder zeigt.

Mein Problem ist, dass wenn ich auf ein Projektbild klicke, das Modal öffnet, aber nur das erste Projektbild zeigt.

Hier ist mein Code `

-# 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

Hier ist die Antwort

%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"}