Dynamic CSS ID with PHP - php

Question

A newbie here. Trying to increment CSS ID selector with PHP.
Following the code I have
<?php
$thumbnails = get_post_meta($post->ID, "plans", false);
if ($thumbnails[0] != '') :?>
<div id="images-box">
<?php foreach($thumbnails as $thumb) {
echo '<div class="holder">
<div id="image-'. $id .'" class="image-lightbox">
<span class="close">X</span>
<img src="' . $thumb . '" alt="" />
<a class="expand" href="#image-1"></a>
</div>';
} ?>
</div>
<?php endif; ?>
What I want is
<div id="image-1" class="image-lightbox">
<div id="image-2" class="image-lightbox">
<div id="image-3" class="image-lightbox">
I tried with many options that were answered here (http://codepad.org/OHuTxQPI) but couldn't get it right.

Answer 1

Simply add $id=1; and $id++; in your code.
<?php
$id = 1;
foreach($thumbnails as $thumb) {
echo '<div class="holder">
<div id="image-'. $id .'" class="image-lightbox">
<span class="close">X</span>
<img src="' . $thumb . '" alt="" />
<a class="expand" href="#image-1"></a>
</div>';
$id++;
} ?>
Edited: $id=1; should be used if you want to start from id='image-1'.

Answer 2

You're using $id as a counter but don't actually define or increment anywehre.
<?php
$thumbnails = get_post_meta($post->ID, "plans", false);
if ($thumbnails[0] != '') :?>
<div id="images-box">
<?php
$id = 0;
foreach($thumbnails as $thumb) {
echo '<div class="holder">
<div id="image-'. $id .'" class="image-lightbox">
<span class="close">X</span>
<img src="' . $thumb . '" alt="" />
<a class="expand" href="#image-1"></a>
</div>';
$id++;
} ?>
</div>
<?php endif; ?>

Answer 3

Unlike the rest, I'm using a straight for() loop instead of foreach() to give more control (ok it's really just cuz I'm OCD and like to use $i).
Here's the demo
PHP:
<?php
$thumbnails = array(0 => array('thumb' => 'image.jpg'), 1 => array('thumb' => 'image2.jpg'));
// $thumbnails = get_post_meta($post->ID, "plans", false);
if (isset($thumbnails)): ?>
<div id="images-box">
<?php
$i = 0;
$thumbs = count($thumbnails);
for($i;$i < $thumbs;$i++) { ?>
<div class="holder">
<div id="image-<?php print $i; ?>" class="image-lightbox">
<span class="close">X</span>
<img src="<?php print $thumbnails[$i]['thumb']; ?>" alt="" />
<a class="expand" href="#image-<?php print $i; ?>"></a>
</div>
<?php }; ?>
</div>
<?php endif; ?>
HTML output:
<div id="images-box">
<div class="holder">
<div id="image-0" class="image-lightbox">
<span class="close">X</span>
<img src="image.jpg" alt="" />
<a class="expand" href="#image-0"></a>
</div>
<div class="holder">
<div id="image-1" class="image-lightbox">
<span class="close">X</span>
<img src="image2.jpg" alt="" />
<a class="expand" href="#image-1"></a>
</div>
</div>

Answer 4

Use Counter for $id as told by John or use $id as index for foreach loop as below.
<?php
$thumbnails = get_post_meta($post->ID, "plans", false);
if ($thumbnails[0] != '') :?>
<div id="images-box">
<?php foreach($thumbnails as $id=> $thumb) {
echo '<div class="holder">
<div id="image-'. $id .'" class="image-lightbox">
<span class="close">X</span>
<img src="' . $thumb . '" alt="" />
<a class="expand" href="#image-1"></a>
</div>';
} ?>
</div>
<?php endif; ?>