How to make a pop-up window display image through Javascript

I made a chatbot through streamlit. I use HTML scrollview to display my pictures and using JavaScript tobe able to display a large picture by clicking on the picture to pop up a window.This is my code:

def get_image_tags(folder_path):
        items = os.listdir(folder_path)
        image_files = [item for item in items if item.endswith('.jpg')]
        
        image_tags = ""
        for image_file in image_files:
            image_path = os.path.join(folder_path, image_file)
            image_tags += f'<div class="scroll-item"><img src="https://ultralytics.com/images/bus.jpg" alt="{image_file}"></div>'
        
        return image_tags
st.markdown(f"""
                <div class="scrollviewer">
                    <div class="scroll-content">
                        {image_tags}
                    </div>
                </div>
            """, unsafe_allow_html=True)
st.markdown("""
            <div id="popup" class="popup">
                <span class="close">&times;</span>
                <img class="popup-content" id="popup-img">
            </div>
            <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
            <script type="text/javascript">
                // Get the popup
                var popup = document.getElementById("popup");

                // Get the image and insert it inside the popup
                var popupImg = document.getElementById("popup-img");
                var images = document.querySelectorAll(".scroll-item img");
                images.forEach(image => {
                    image.onclick = function(){
                        popup.style.display = "block";
                        popupImg.src = this.src;
                    }
                });

                // Get the <span> element that closes the popup
                var span = document.getElementsByClassName("close")[0];

                // When the user clicks on <span> (x), close the popup
                span.onclick = function() {
                    popup.style.display = "none";
                }

                // When the user clicks anywhere outside of the popup image, close it
                popup.onclick = function(event) {
                    if (event.target == popup) {
                        popup.style.display = "none";
                    }
                }

            </script>
                        
        """, unsafe_allow_html=True)

The code is running well, I mean the scrollview , but nothing happens when I clicked picture,javascript is not working

Any help/suggestion is very appreciated.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.