how to use bootstrap modals for multiple images on a page

Question

I am currently building a blog in rails , on my portfolio page, I am adding 6 pictures of my projects through the rails admin back end using the paperclip gem. On my portfolio page when I click an image I want a modal to open up showing a slideshow of the project images.

My problem is that when I click any projects image, the modal opens up but only shows the first projects image.

Here is my 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

`

This is a link to an answer for this question http://stackoverflow.com/questions/33838977/how-to-use-bootstrap-modal-on-multiple-images-on-same-page-on-image-click?rq=1 — Omorhefere imoloame, Jul 16 '16 at 21:42

score 0 · Accepted Answer · answered Jul 26 '16 at 23:55

Here is the answer

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

how to use bootstrap modals for multiple images on a page

1 Answers1