Home>

Hello. I am a beginner of JS, so I have a question.
I'm creating a photographer's website on WordPress, and each project article has multiple photos, and the total number of photos varies from project to project.
The page design is a design that randomly arranges photos in a grid using margins.

*** What you want to achieve ***
I would like to implement a function that scrolls and adds 1 to the count when a photo enters the viewport, and displays 2 when the next photo enters the viewport.

I was able to get the total number of photos registered in the article.
And I was able to get the height of the top of each element by targeting each photo, but I'm still stuck because I don't know what kind of code to write after this. .. ..
We would appreciate it if you could give us logic, suggestions, and advice.
Thank you. !!

<
---single-post.php->
    ≪
? php if ($ portfolioGallery):? ≫
      ≪
div class= "picture__counter" >
        ≪
div class= "counter__inner" >
          ≪
span class= "count" >
01 /<
/span >
 //Scroll here and count by 1 each time an element enters the viewport
          ≪
span class= "total_num" >
 ≪
? php echo count ($ portfolioGallery);? ≫
 ≪
/span >
//Get the total number
          ≪
a href= "# container__top" >
            ≪
span class= "arrow__top" >
≪
/span >
          ≪
/a >
        ≪
/div >
      ≪
/div >
    ≪
? php endif;? >
  ≪
/div >
  ≪
div class= "project__photos" >
    ≪
? php if ($ portfolioGallery):? ≫
      ≪
? php foreach ($ portfolioGallery as $ index= >
 $ img):? ≫
        ≪
? php if (in_array (($ index% 10), [0, 3, 6, 9])):? ≫
        ≪
? php endif;? >
            ≪
div class= "photo <
? php echo'gallery__image--'. ($ index% 10).'''. $ Size;? ≫
">
              ≪
? php $ size= ($ img ['width'] /$ img ['height'] >
 1)?'about_landscape':'about_portrait';
              echo wp_get_attachment_image ($ img ['ID'], $ size, false, ['class'= >
 'gallery__image--'. ($ index% 10).''. $ Size]);
              ? ≫
            ≪
/div >
          ≪
? php endforeach;? >
        ≪
? php endif;? >
      ≪
/div >
 /* main.js * /
  let countTarget= $ ('.photo'); //Target element
  let countNum= $ ('.count'); //Count display 0, 1, 2, 3, 4, 5, , Count up to the total number
  let totalNum= $ ('.total_num'). text (); //total number= >
 13, 20, 10 etc ...
  $ (countTarget) .each (function (index, ele) {
    let targetContentsTop= $ (ele) .offset (). Top;
    console.log (targetContentsTop); //Get the top height of each element->
 946.91650390625 ,
    //console.log (`index is $ {index + 1}`); //I want to add this index number to the variable count and rewrite it later.
  })

*** Addendum ***

<
!-html (without php)->
  ≪
div class= "picture__counter" >
    ≪
div class= "counter__inner" >
      ≪
span class= "count" >
 /≪
/span >
 ≪
!-I want to display the count number here->
        ≪
span class= "total_num" >
≪
/span >
≪
!-Total number of photos in each article (depending on the number of registered photos)->
         ≪
a href= "# container__top" >
           ≪
span class= "arrow__top" >
≪
/span >
         ≪
/a >
     ≪
/div >
  ≪
/div >

As an implementation, I think that it can be realized with JS, HTML and CSS regardless of PHP. Would you please provide the HTML + JS + CSS source without the PHP code?

keitaro_so2021-10-14 04:50:35

Thank you for your comment. !! Since the site is created using WordPress and the output such as the total number of photos and photos is pulled from the article data, PHP is indispensable. I added html without PHP, so please check it. CSS is too long, so I omitted it. JS has already been written, so I would appreciate it if you could check it.

tomoya takinami2021-10-14 04:50:35

Sure, PHP may be essential because it will eventually be realized in Wordpress, but I think that counting the displayed content every time you scroll can be solved by the front end. I think it should be realized on the front end and incorporated into PHP. By doing so, even people who do not know PHP will be able to answer.

keitaro_so2021-10-14 04:50:35