如何使用另一段javascript中的img id =“ image1”在点击时弹出？

Question

I would like to make it so that when a user on the website clicks on a thumbnail it will pop up in an overlay as full size. I have found a ton of different ways to do this when you can specify the actual image source, however I need to specify an image source out of another piece of javascript.

I am currently using this code to pull the product description, price, and picture URL out of a google sheet:

<!--Begin Javascript to pull Product/Price/Picture_URL Info from google sheet-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
  google.load('visualization', '1', {packages: ['corechart', 'line']});
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    // Add your sheets url and range below
    var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B12:D20";
    var query = new google.visualization.Query(spreadsheetUrl);
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    var dataTable = response.getDataTable();
    // getValue(rowIndex, columnIndex)
    document.getElementById("product1").innerHTML = dataTable.getValue(0, 0);

    document.getElementById("price1").innerHTML = dataTable.getValue(0, 1);

    document.getElementById("image1").src = dataTable.getValue(0, 2);

  }

 </script>

Then I show the product thumbnails with description and price using this:

    <!--Begin Product Description/Price/Image Blocks--> 

     <div id="description1" style="position: absolute; width: 170px; height: 18px; z-index: 64; left: 390px; top: 547px">
<p id="product1" align="center"></p>
</div>
     <div id="money1" style="position: absolute; width: 170px; height: 18px; z-index: 63; left: 390px; top: 570px">
<p id="price1" align="center"></p>
</div>
    <div id="picture1" style="position: absolute; width: 160px; height: 190px; z-index: 5; left: 395px; top: 355px; right: 645px;">
<img id="image1" src="" width="162" height="192" align="center"><img>
    </div>

I'm not sure how to use the img id="image1" as the source to pop the image up larger over the top of my page.

TIA!

Answer 1

Here is my attempt.

Is fancybox okay?

CodePen

 <!--Begin Javascript to pull Product/Price/Picture_URL Info from google sheet--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); }) // https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid google.load('visualization', '1', { packages: ['corechart', 'line'] }); google.setOnLoadCallback(drawChart); function drawChart() { // Add your sheets url and range below var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1l6FmSuwU2E134UuxoNyRfvTw2UY_0G0q69ZwfbQy3mY/edit?range=B12:D20"; var query = new google.visualization.Query(spreadsheetUrl); query.send(handleQueryResponse); } function handleQueryResponse(response) { var dataTable = response.getDataTable(); // getValue(rowIndex, columnIndex) document.getElementById("product1").innerHTML = dataTable.getValue(0, 0); document.getElementById("price1").innerHTML = dataTable.getValue(0, 1); document.getElementById("image1").src = dataTable.getValue(0, 2); document.getElementById("img1").href = dataTable.getValue(0, 2); } </script> <!--Begin Product Description/Price/Image Blocks--> <div id="description1" style="position: absolute; width: 170px; height: 18px; z-index: 64; left: 390px; top: 547px"> <p id="product1" align="center"></p> </div> <div id="money1" style="position: absolute; width: 170px; height: 18px; z-index: 63; left: 390px; top: 570px"> <p id="price1" align="center"></p> </div> <div id="picture1" style="position: absolute; width: 160px; height: 190px; z-index: 5; left: 395px; top: 355px; right: 645px;" data-role> <a id="img1" class="fancybox" rel="group" href=""> <img id="image1" src="" width="162" height="192" align="center"> <img> </a> </div>