0

I made a picture content were the user can press the "load more" and more pictures and zoom to the pictures. The pictures that i display are okay and the user can zoom just fine without any problems but when the user presses the button "load more" to view more pictures then the zoom function does not work for these pictures. Any suggestions on how to fix that problem?

<img  style=" max-width: 170px; max-height: 220px;" src="img/<?php echo $rows['picture']; ?> "data-zoom-image="img/<?php echo $rows['picture']; ?> " alt="">

// script that enables zooming in pictures

 <script>
        
  $('.zoomContainer').remove(); $("[data-zoom-image]").elevateZoom({scrollZoom : true});  
  
</script>  

//button that  loads 4 more pictures with javascript

  <a  class="btn2 loading-more">
            <i class="icon_loading"></i>
                Load More
  </a>

        <script>
            $(".col").slice(0, 8).show()
            $(".btn2").on("click", function(){
                $(".col:hidden").slice(0, 4).slideDown()
                if ($(".col:hidden").length == 0) {
                    $(".btn2").fadeOut('slow')
                }
            })
        </script>
jimmys
  • 11
  • 4
  • It seems `elevateZoom()` must be instantiated on newly added elements. – showdev Jul 05 '21 at 05:14
  • You might find [Mutation Observers](https://stackoverflow.com/questions/15268661/jquery-on-create-event-for-dynamically-created-elements) interesting. – showdev Jul 05 '21 at 05:28
  • @showdev i am new to that and new to javascript so its hard to understand what should i do to make it work, can you help? – jimmys Jul 05 '21 at 08:21
  • Oh, do all of the elements already exist on the page and they are just hidden? It might help to include your relevant HTML and CSS for a [working demo](https://stackoverflow.com/help/minimal-reproducible-example) of the issue. – showdev Jul 05 '21 at 08:36
  • @showdev the is in a php while loop and the zoom function found it on a website https://www.elevateweb.co.uk/image-zoom/ – jimmys Jul 05 '21 at 15:20
  • What I mean is, where are the `.col` elements? I assumed you were adding elements to the DOM with JavaScript, but it seems that you might only be revealing existing elements that are hidden. A working demo would help troubleshoot, in my opinion. – showdev Jul 06 '21 at 02:10

0 Answers0