[英]how to use bootstrap modals for multiple images on a page
我目前正在我的投资组合页面上的rails中建立一个博客,我将通过回形针gem通过rails admin后端添加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
`
这是答案
%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"}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.