CODEWITHSUNDEEP
phpcssfor-loop
zana
zana

Reputation: 269

Add display property only from second item in for loop

I am creating a simple image gallery that requires the first image to be shown first, while the images after are supposed to have a display;none property. How do I achieve it so that only the first image is different? The following is my code so far.

<div class="content">
    <?php 
    foreach($variants['productVariants'][0]['productVariantImages'] as $variantImage){
        if(isset($variantImage) && $variantImage['visible']){
    ?>
    <img src="<?php echo $variantImage['imagePath']; ?>" class="image_<?php echo $variantImage['id']; ?>" style="display:none" alt="" />
    <?php }}?>
</div>

My current output is

<div class="content">
    <img src="images/bigs/2.jpg" class="image_1" style="display:none" alt="">
     <img src="images/bigs/2.jpg" class="image_2" style="display:none" alt="">
     <img src="images/bigs/3.jpg" class="image_3" style="display:none" alt="">
</div>

I would like to be able to achieve the following

<div class="content">
     <img src="images/bigs/1.jpg" class="image_1" alt="">
     <img src="images/bigs/2.jpg" class="image_2" style="display:none" alt="">
     <img src="images/bigs/3.jpg" class="image_3" style="display:none" alt="">
</div>

Upvotes: 0

Views: 54

Answers (2)

Kep
Kep

Reputation: 5857

You have multiple ways:

  1. Using a variable (eg. $first, set it to true before the loop and to false at the end of the first iteration)

  2. Using the keys of your (probably 0-indexed?) array (eg. foreach($variants['productVariants'][0]['productVariantImages'] as $key => $variantImage){, notice the $key => part). You can then check if $key is 0 in the loop and that's your first element.

  3. As @alirezasafian suggested, simply use CSS - this is probably the most versatile method.

Upvotes: 2

Alex
Alex

Reputation: 8695

You don't need to use php for that, you can do it by css.

.content img:not(:first-child)
{
    display: none;
}


.content img:not(:first-child) {
  display: none;
}
<div class="content">
  <img src="images/bigs/1.jpg" class="image_1" alt="1">
  <img src="images/bigs/2.jpg" class="image_2" alt="2">
  <img src="images/bigs/3.jpg" class="image_3" alt="3">
</div>

Upvotes: 1

Related Questions