Jquery effects do not work when retrieving images from the database but only works with static images

Question

I searched a lot, but I did not find a solution to this problem, as well as I am a beginner in the angular Using visual code 2017 and using visual studio 2017 api .netcore 2.2

I tried to add the function to an event ngAfterViewInit

But it doesn't work either 1.

 ngAfterViewInit(){
  this.getAllPhoto();

}

This is the code that works with static images

<!-- gallery -->
 <section class="gallery pt-5" id="gallery" 
 >
  <div class="pt-xl-5 pt-lg-3" >
   <!-- heading title -->
   <div class="main-title text-center mb-5"   >
    <h3 class="tittle text-uppercase font-weight-bold">Gallery</h3>
    <div class="title-icon">
     <i class="fas fa-camera"></i>
    </div>
    <p class="sub-tittle">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation</p>
   </div>
   <!-- //heading title -->
   <ul class="portfolio-categ filter pb-sm-5 pb-4 mb-lg-3 text-center" >
    <li class="port-filter all active" >    
     <a href="#">All</a>
    </li>
    <li class="cat-item-1">
     <a href="#" title="Category 1">category 1</a>
    </li>
    <li class="cat-item-2">
     <a href="#" title="Category 2">category 2</a>
    </li>
    <li class="cat-item-3">
     <a href="#" title="Category 3">category 3</a>
    </li>
   </ul>
   <ul class="portfolio-area clearfix" >
    <li class="portfolio-item2" data-id="id-0" data-type="cat-item-3">
     <span class="image-block img-hover">
      <a class="image-zoom" href="assets/images/g1.jpg" data-gal="prettyPhoto[gallery]">
       <img src="assets/images/g1.jpg" class="img-fluid " alt="">
      </a>
     </span>
    </li>
    <li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">
     <span class="image-block">
      <a class="image-zoom" href="assets/images/g2.jpg" data-gal="prettyPhoto[gallery]">
       <img src="assets/images/g2.jpg" class="img-fluid " alt="">
      </a>
     </span>
    </li> 
    <li class="portfolio-item2" data-id="id-2" data-type="cat-item-1">
     <span class="image-block">
      <a class="image-zoom" href="assets/images/g3.jpg" data-gal="prettyPhoto[gallery]">
       <img src="assets/images/g3.jpg" class="img-fluid " alt="">
      </a>
     </span>
    </li> 
      <li class="portfolio-item2" data-id="id-4" data-type="cat-item-3">
     <span class="image-block">
      <a class="image-zoom" href="assets/images/g4.jpg" data-gal="prettyPhoto[gallery]">
       <img src="assets/images/g4.jpg" class="img-fluid " alt="">
      </a>
     </span>
    </li> 
    
    
   </ul>
   <!--end portfolio-area -->
  </div>
  <!-- //gallery container -->
 </section>

2. this code get images from db and jquery not work when add my code

    <!-- gallery -->
    <section class="gallery pt-5" id="gallery" 
    >
        <div class="pt-xl-5 pt-lg-3" >
            <!-- heading title -->
            <div class="main-title text-center mb-5"   >
                <h3 class="tittle text-uppercase font-weight-bold">Gallery</h3>
                <div class="title-icon">
                    <i class="fas fa-camera"></i>
                </div>
                <p class="sub-tittle">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation</p>
            </div>
            <!-- //heading title -->
            <ul class="portfolio-categ filter pb-sm-5 pb-4 mb-lg-3 text-center" >



                <li class="port-filter all active" >                
                    <a href="#">All</a>
                </li>
                <li class="cat-item-1">
                    <a href="#" title="Category 1">category 1</a>
                </li>
                <li class="cat-item-2">
                    <a href="#" title="Category 2">category 2</a>
                </li>
                <li class="cat-item-3">
                    <a href="#" title="Category 3">category 3</a>
                </li>
            </ul>
                            <!-- My Code -->

            <ul class="portfolio-area clearfix" *ngFor="let _PhotoList of PhotoList; index as i">


                <li class="portfolio-item2" data-id="id-{{i}}" data-type="cat-item-3" >

<span class="image-block img-hover" >

<a class="image-zoom" href="{{PathFolder+_PhotoList.ImageName}}" data-gal="prettyPhoto[gallery]">


<img src="{{PathFolder+_PhotoList.ImageName}}" class="img-fluid " alt="">
                        </a>
                    </span>
                </li>
                                <!-- My Code -->


                <!-- <li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">
                    <span class="image-block">
                        <a class="image-zoom" href="assets/images/g2.jpg" data-gal="prettyPhoto[gallery]">
                            <img src="assets/images/g2.jpg" class="img-fluid " alt="">
                        </a>
                    </span>
                </li> -->
                <!-- <li class="portfolio-item2" data-id="id-2" data-type="cat-item-1">
                    <span class="image-block">
                        <a class="image-zoom" href="assets/images/g3.jpg" data-gal="prettyPhoto[gallery]">
                            <img src="assets/images/g3.jpg" class="img-fluid " alt="">
                        </a>
                    </span>
                </li> -->

            </ul>
            <!--end portfolio-area -->
        </div>
        <!-- //gallery container -->
    </section>
    <!-- //gallery -->



    <!-- Js files -->
    <!-- JavaScript -->
    <!-- <script src="/assets/js/jquery-2.2.3.min.js"></script> -->
    <!-- Default-JavaScript-File -->
    <!-- <script src="/assets/js/bootstrap.js"></script> -->
    <!-- Necessary-JavaScript-File-For-Bootstrap -->

    <!-- carousel -->
    <!-- <script src="/assets/js/owl.carousel.js"></script> -->
    <script>
        $(document).ready(function () {
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 1,
                        nav: true
                    },
                    600: {
                        items: 1,
                        nav: false
                    },
                    900: {
                        items: 1,
                        nav: false
                    },
                    1000: {
                        items: 3,
                        nav: true,
                        loop: false,
                        margin: 20
                    }
                }
            })
        })
    </script>
    <!-- //carousel -->

    <!-- fixed navigation -->
    <!-- <script src="/assets/js/fixed-nav.js"></script> -->
    <!-- //fixed navigation -->

    <!-- stats -->
    <!-- <script src="/assets/js/jquery.waypoints.min.js"></script>
    <script src="/assets/js/jquery.countup.js"></script> -->
    <script>
        $('.counter').countUp();
    </script>
    <!-- //stats -->

    <!-- Pogo slider (for banner) -->
    <!-- <script src="/assets/js/jquery.pogo-slider.min.js"></script>
    <script src="/assets/js/main.js"></script> -->
    <!-- Pogo slider (for banner) -->

    <!-- smooth scrolling -->
    <!-- <script src="/assets/js/SmoothScroll.min.js"></script> -->
    <!-- //smooth scrolling -->

    <!-- start-smoth-scrolling -->
    <!-- <script src="/assets/js/move-top.js"></script>
    <script src="/assets/js/easing.js"></script> -->
    <script>
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->

    <!-- smooth scrolling-bottom-to-top -->
    <script>
        $(document).ready(function () {
            /*
                var defaults = {
                containerID: 'toTop', // fading element id
                containerHoverID: 'toTopHover', // fading element hover id
                scrollSpeed: 1200,
                easingType: 'linear' 
                };
            */
            $().UItoTop({
                easingType: 'easeOutQuart'
            });
        });
    </script>
    <!-- //smooth scrolling-bottom-to-top -->

    <!-- Gallery filter -->
    <!-- <script src="/assets/js/jquery-1.7.2.js"></script>
    <script src="/assets/js/jquery.quicksand.js"></script>
    <script src="/assets/js/pretty-script.js"></script>
    <script src="/assets/js/jquery.prettyPhoto.js"></script> -->
    <!-- //jQuery-Photo-filter-lightbox-Gallery-plugin -->
    <!-- //Js files -->

</body>

</html>

Have you implemented 'AfterViewInit' on your controller class ? — S. Nadezhnyy, Dec 19 '19 at 11:51
Specificaly: `$(".scroll").click` change to `$(document).on("click", ".scroll", function() { ...` — freedomn-m, Dec 19 '19 at 12:12
AfterViewInit' in component name index index.ts getAllPhoto() { return this._httpClient.get(this.pathPhotos) .toPromise().then(res => { this.PhotoList = res; }); } code gallery in index.component.html @s-nadezhnyy — bishoy, Dec 19 '19 at 12:17
@freedomn-m but show Error "message": "'}' expected.", when change $(".scroll").click — bishoy, Dec 19 '19 at 12:26
Because you're missing a final `})`. Format the code properly and it's easy to see: https://jsfiddle.net/k4rb1dzL/. That being said, the central anonymous function is redundant and needs to be removed. Pass the `event` argument in to the event handler, not some random anon. func: https://jsfiddle.net/op7sch1L/ — Rory McCrossan, Dec 19 '19 at 12:48
@Rory McCrossan Thanks, but the main problem has not been solved yet — bishoy, Dec 19 '19 at 13:47
Thank you for trying to help, but I do not know where exactly I am doing the amendment and I do not know where the problem is Why was the question closed and the question that contains 23 answers I do not know how to use the answers in it to my problem — bishoy, Dec 19 '19 at 14:02

score -1 · Answer 1 · answered Dec 19 '19 at 11:35

-1

To work on dynamically created elements, you will need to use on() function, in this example try this:

jQuery('body').on('load', function() {
  #your code here
}

answered Dec 19 '19 at 11:35

Heba Fareed

437
2
6

This is not a delegated event handler. Simply using `on()` alone isn't enough; you need to use it with the correct method call, ie. `$(parent).on(event, childSelector, fn)` – Rory McCrossan Dec 19 '19 at 11:46

Jquery effects do not work when retrieving images from the database but only works with static images

1 Answers1