Ich versuche ein Bootstrap-Karussell auf einem Bootstrap-Modal in meiner Rails-App zu platzieren, ist das möglich

Ich lade meine Bilder mit Büroklammer, ich habe sechs Bilder. Gerade jetzt, wenn ich auf das Bild klicke, öffnet sich das Modal und zeigt dieses Bild. das ist gutIch versuche ein Bootstrap-Karussell auf einem Bootstrap-Modal in meiner Rails-App zu platzieren, ist das möglich

Jetzt versuche ich ein Karussell zum Modal hinzuzufügen, so dass, wenn ich auf das Bild klicke öffnet sich das Modal und ich kann durch alle hochgeladenen Bilder für jedes Projekt in meinem Portfolio gleiten.

- content_for :title, "Portfolio Page" 
= stylesheet_link_tag "application", media: :all 
= stylesheet_link_tag "articles", media: :all 
= stylesheet_link_tag "portfolio", media: :all 
= javascript_include_tag "application" 
= javascript_include_tag "portfolio" 


%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 
         .carousel.slide{"data-ride" => "carousel",id: "#{"carousel-example-generic" + index.to_s}"} 
          %ol.carousel-indicators 
           %li.active{"data-slide-to" => "0", "data-target" => "#carousel-example-generic#{index.to_s}"} 
           %li{"data-slide-to" => "1", "data-target" => "#carousel-example-generic#{index.to_s}"} 
           %li{"data-slide-to" => "2", "data-target" => "#carousel-example-generic#{index.to_s}"} 
          .carousel-inner{:role => "listbox"} 
           .carousel-item.active 
            =image_tag portfolio.image1.url(:thumb),:class => "style_image img-responsive" 
           .carousel-item 
            =image_tag portfolio.image2.url(:thumb),:class => "style_image img-responsive" 
           .carousel-item 
            =image_tag portfolio.image3.url(:thumb),:class => "style_image img-responsive" 
           %a.left.carousel-control{"data-slide" => "prev", :href => "#carousel-example-generic#{index.to_s}", :role => "button"} 
            %span.icon-prev{"aria-hidden" => "true"} 
            %span.sr-only Previous 
           %a.right.carousel-control{"data-slide" => "next", :href => "#carousel-example-generic#{index.to_s}", :role => "button"} 
            %span.icon-next{"aria-hidden" => "true"} 
            %span.sr-only Next 
        - 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"}

Quelle

2016-07-29 Omorhefere imoloame

Ja, es ist möglich.

Schauen Sie dieses Beispiel:

<body> 
    <div class="container"> 
    <div class="wrapper"> 
    <a class="btn btn-primary btn-lg" id="open-modal-button" data-target=".mymodal" data-toggle="modal">Open Me </a> 
    </div> 
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade mymodal" role="dialog" tabindex="-1"> 
     <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="carousel slide" data-interval="false" data-ride="carousel" id="carousel"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
       <div class="row"> 
        <div class="col-md-12"> 
        <%= image_tag("image1.png") %> 
        <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button> 
        </div> 
       </div> 
       </div> 
       <div class="item"> 
       <div class="row"> 
        <div class="col-md-6 col-md-offset-3"> 
        <%= image_tag("image2.png") %> 
        <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button> 
        </div> 
       </div> 
       </div> 
       <div class="item"> 
       <div class="row"> 
        <div class="col-md-6 col-md-offset-3"> 
        <%= image_tag("image3.png") %> 
        <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button> 
        </div> 
       </div> 
       </div> 
       <div class="item"> 
       <div class="row"> 
        <div class="col-md-6 col-md-offset-3"> 
        <%= image_tag("image4.png") %> 
        <button aria-label="Close" class="btn btn-primary" data-dismiss="modal">Close Window </button> 
       </div> 
       </div> 
      </div> 
      <a class="left carousel-control" data-slide="prev" href="#carousel" role="button"><span class="glyphicon glyphicon-chevron-left"></span></a> 
      <a class="right carousel-control" data-slide="next" href="#carousel" role="button"><span class="glyphicon glyphicon-chevron-right"></span></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

Einige Css:

body { 
margin: 0 auto; 
text-align: center; 
} 

.wrapper { 
    text-align: center; 
} 

#open-modal-button { 
    position: absolute; 
    top: 30%; 
}

Nur sicher sein, tu eine bedingte Anweisung vor dem Karussell, um das Vorhandensein der Bilder bestätigt setzen.

Hinweis: Just bootstrap.js verwenden und bootstrap.css

Quelle

2016-07-29 20:28:26

Hallo, danke für die Antwort, sind in dem die Bilder? –

Sorry, ich habe meine Antwort aktualisiert. Ich denke, der effizienteste Weg ist, dass Sie eine "jede do" -Methode verwenden, so dass Sie nicht von der Anzahl der Bilder abhängig sein werden. –

Ich versuche ein Bootstrap-Karussell auf einem Bootstrap-Modal in meiner Rails-App zu platzieren, ist das möglich

Antwort

Verwandte Themen