Shopify Question posted in
The Shopify help center can be found here.

Displaying images when user clicks? – Shopify

I have created a model for viewing images when a user clicks on the images. The problem is I when I try to access the images from the gallery image inside the modal content it doesn’t work. Only a blank popup shows. I want the pictures from the image gallery to be displayed.

I need to know which code I can use to access the gallery image inside the modal content. 

<body>

<script type="text/javascript">
    var gallery = [
        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

    ]
    function view(imgsrc) {
        vieww = window.open(imgsrc, 'viewwin', 'width=600,height=300');
    }

    function RenderHtml() {
        var output = "";
        for (i = 0; i < gallery.length; ++i) {
            output += '<div class="gallery"><a target="_blank" rel="noopener 
         noreferrer">';
            output += ' <a target="_blank" rel="noopener noreferrer">';
            output += '     <img src="' + gallery[i].img + '" 
         onclick="view("' + gallery[i].img + '")" data-toggle="modal" data-
         target="#myModal" alt="Forest" width="600" height="400" /';
            output += ' </a>';
            output += ' <div class="desc">' + gallery[i].text + '</div>';
            output += '</div>';
        }
        document.getElementById('output').innerHTML = output;
    }
    window.onload = function () {
        RenderHtml();
    }
     </script>
    <div id="output">

    </div>
     <!-- Modal -->
     <div class="modal fade" id="myModal" role="dialog">
     <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;
          </button>

          <h4 class="modal-title">Modal Header</h4>

        </div>
        <div class="modal-body">
                <!-- I want images from gallery array to be shown here when 
          user clicks on any of the images -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-
                dismiss="modal">Close</button>
             </div>
            </div>

          </div>
        </div>
        </body>

       </html>
Tags:

2

Answers


  1. 0

    Hi this link helps you.Just change this (window.open (imgsrc, 'viewwin', 'width = 600, height = 300')) because bootstrap is a nice solution for this :))

    Login or Signup to reply.
  2. 0 
         <div id="output">
     </div>


    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">              
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <img src="" class="imagepreview" style="width: 100%;" >
          </div>
        </div>
      </div>
    </div>

<script>

var gallery = [ 
        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        } //, ....
    ] 

    function RenderHtml() {
        var output = "";
        for (i = 0; i < gallery.length; ++i) { 
          output += '<a  href="#" class="pop">'+
            '<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px;                                      height: 264px;">'+
                '</a>';  
        } 
        document.getElementById('output').innerHTML = output;
    } 

    $( document ).ready(function() {
   RenderHtml(); 

   $('.pop').on( "click", function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   

});
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search