Saturday 15 January 2011

How to use modulus with PHP to add a CSS class to a grid of images depending on two different patterns? -


I want to use the modulus to apply the CSS class to the grid of images in two different conditions: / P>

status1
I want to apply the CSS class to all the medium images indicated by *. I just can not use nth-child because I do not know that there will always be 9 images in the grid. Sometimes it can be 5, sometimes 7, sometimes 8, etc. ... this variable [IMG 1] [IMG 2] [IMG 3] [IMG 4] [IMG 5 *] IMG 6] [IMG 7] [IMG 8 *] [IMG 9]

status2
I would like to re-apply a CSS class * I used nth-child for similar reasons for the images in the grid indicated by I can not add css properties through the media situation in the given class in this position as the site has a lower width, so two columns of images. [Image 1] [Img 2 *] [Image 3] [IMG 4 *]

I have done the code yet

 < Code> if ($ counter% 3 == 1) {$ Situation1 = TRUE; } If ($ counter% 3 == 0) {$ condition2 = TRUE; } $ Counter ++; & Lt; Div & lt ;? Php if ($ position 1) {post_class ('condition1'); } If ($ position2) {post_class ('condition2'); } & Gt; & Lt; Img src = "" / & gt; & Lt; / Div & gt;    

The modulus is the remainder of the first operand divided by another, so your case will be required :

  if ($ counter% 3 === 2) {$ condition1 = TRUE; } If ($ counter% 2 === 0) {$ situation2 = TRUE; }   

and you can rewrite it:

  $ condition1 = ($ counter% 3 === 2); $ Position2 = ($ counter = 2 === 0);   

However , you can do this in CSS using the nth-child selector (IE9 +):

Status 1:

 : nth-child (3n + 2)   

Status 2:

 : Nth-child (2n + 2)    

No comments:

Post a Comment