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">×</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.