0

I have created a grid using css which includes rows and columns. When an image is clicked in the image grid a large version of the clicked image appears in a modal. In the modal-body I inserted a carousel-caption that is a button to download the current active image. Each image in my image grid has a unique id. id="portrait1", id="portrait2", etc. When I press the download button, I would like it to download the full image file that is attached to the unique div id.

Capturing the canvas would not work in this case because it would not allow the people to download and receive the full high quality image that I have provided.

I am a photographer and would like to allow people that I took pictures of to download full sized high quality images when pressing the download button.

I am new to jquery and javascript so I am having trouble targeting specific div id's to download the images.

Flex Image Grid

<div id="content"></div>

   <div class="row_container">
     <div class="row">

       <div class="col" id="portrait0">
           <img class="portrait" 
             href="#lightbox" data-toggle="modal" 
             src="/portraits/port_1.jpg" style="width: 100%">
       </div>

       <div class="col" id="portrait1">
           <img class="portrait" 
             href="#lightbox" data-toggle="modal" 
             src="/portraits/port_2.jpg" style="width: 100%">
       </div>

       <div class="col" id="portrait2">
           <img class="portrait" 
             href="#lightbox" data-toggle="modal" 
             src="/portraits/port_3.jpg" style="width: 100%">
       </div>

      </div>
    </div>

  </div>

Bootstrap Lightbox Code with button in modal-body:

  <div class="modal fade and carousel slide" id="lightbox">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">

           <div class="item active">
             <div class="carousel-caption">
               <a href="https://www.google.co.uk/" target="_blank"> 
                  <button type="button" class="btn btn-default">Read 
                   More</button>
               </a>
             </div>
           </div>

           <div class="carousel-inner"></div>

           <a class="left carousel-control" href="#lightbox" 
             role="button" data-slide="prev">
               <i class="fa fa-chevron-left fa-2x"></i>
           </a>
           <a class="right carousel-control" href="#lightbox" 
             role="button" data-slide="next">
               <i class="fa fa-chevron-right fa-2x"></i>
           </a>

        </div><!-- /.modal-body -->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Right now the button is set to navigate to google, but when I click the button, I would like it to download the image that is visible at that moment.

Ajithraj
  • 528
  • 5
  • 15
user3173447
  • 223
  • 3
  • 11
  • Possible duplicate of [this](https://stackoverflow.com/questions/2408146/href-image-link-download-on-click) post, check it out, it seems to talk about exactly what you want to do. If that doesn't work, check out this [w3](https://www.w3schools.com/tags/att_a_download.asp) link. – Slimelord Jul 20 '19 at 15:04
  • Thanks for the links, but I am just a bit confused because I am using bootstrap. So I just have one button in the Modal-Body, so when I press the download button, I would just like it to download the active image to download. I am pretty sure I need to use Jquery or Javascript for this but just needed some advice on how to do this. – user3173447 Jul 21 '19 at 10:31

0 Answers0