我想在我的導軌應用程序上放置引導程序模式的引導程序傳送帶，這是可能的

我使用回形針上傳我的圖像，我有六個圖像。現在當我點擊圖像時，模態打開並顯示圖像。這很好我想在我的導軌應用程序上放置引導程序模式的引導程序傳送帶，這是可能的

現在我正在嘗試向該模式添加一個輪播，以便當我單擊該圖像時，該模式將打開，並且可以滑動瀏覽我投資組合中每個項目的所有上傳圖像。

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

來源

2016-07-29 Omorhefere imoloame

是的，這是可能的。

看看這個例子：

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

一些CSS：

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

.wrapper { 
    text-align: center; 
} 

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

只要確保TU把條件語句傳送帶前，以確認圖像的存在。

注：只需使用bootstrap.js和bootstrap.css

來源

2016-07-29 20:28:26

嗨，三江源的答案，在哪裏圖像？ –

對不起，我更新了我的答案。我認爲，最有效的方法是你使用'each do'方法，所以你不會依賴於圖像的數量。 –

我想在我的導軌應用程序上放置引導程序模式的引導程序傳送帶，這是可能的

回答

相關問題