Question

I’m new to PHP and I just figured out how to generate content from several arrays to populate 40 divs. It’s a product gallery and the different parts are generated via a for loop. Each time through the loop, I’m using the index to not only grab info from the arrays, but also to create a link for the entire div that I want to use as a JQuery Lightbox to show different views of each product. I’ve already been able to create a link to the first of the images. I’ve been trying to use the scandir() function, readdir() function to get a list of each image, but I haven’t had any success. The images are in folders, _images/products/0/0.jpg (this folder also contains 1.jpg, 2.jpg, etc. Each time through the loop, it changes to _images/products/1/0.jpg – there are more images in this folder too. I need to create a link for each image and add it to the array in a way that will link a distinct Lightbox with each div.

$names = array ('item1', 'item2', 'item3', etc...);
$prices = array ('item1', 'item2', 'item3', etc...);
$number = array ('item1', 'item2', 'item3', etc...);
$serves = array ('item1', 'item2', 'item3', etc...);

$names_size = sizeof($names)

$img_link = "_images/products/"; // used to create the link for $div2

$div1 = "<div id=\"";
$div2 = "\" class=\"products grid_3\"><a href=\"";
$div3 = "\"><h3 class=\"name\">";
$hero_img  = "</h3><img class=\"hero\" src=\"_images/heros/";
$li_price  = "<ul><li>Price: <span class=\"price\">$";
$li_serves = "<li>Serves: <span class=\"serves\">";
$li_num = "<li>KC# <span class=\"kcnum\">";
$li_close  = "</span></li>";
$div4 = "</ul></a></div>";

for ($i = 0; $i < $names_size; $i++) {
    $div = $div1 . $names[$i] . $div2 . $img_link . $i . "/0.jpg" . $div3 .  ucwords($names[$i]) . $hero_img . $i . ".jpg\" alt=\"" . ucwords($names[$i]) . "\" />";
    $div .= $li_price . $prices[$i] . $li_close;
    $div .= $li_kc_num . $kc_no[$i] . $li_close;
    $div .= $li_serves . $serves[$i] . $li_close;
    $div .= $div4;

    echo "{$div}" . "\n";
}

The problem I’m having is that before I echo the final $div, I need to add a list of links for the specific product so I can use make the lightbox work for each div. I tried inserting the code (below) just before echoing the completed $div, but I couldn’t go any further with it.

$gallery_array = array();

$files = scandir($img_link . $i);
    foreach($files as $file) {
        array_push($gallery_array, $file);
}

$gallery_array_size = sizeof($gallery_array);

I honestly don’t even know if the Lightbox can even work like this. Any ideas?

Answer 1

You don’t have to create a $div like that. You can mix php and HTML codes together.

Your $gallery_array is the same as the $files.

<?php

$names = array ('item1', 'item2', 'item3');
$prices = array ('item1', 'item2', 'item3');
$kc_no = array ('item1', 'item2', 'item3');
$serves = array ('item1', 'item2', 'item3');

$names_size = sizeof($names);

$img_link = "_images/products/";

for ($i = 0; $i < $names_size; $i++) {
    ?>
    <div id="<?=$names[$i]?>" class="products grid_3">
        <a href="<?=$img_link.$i?>/0.jpg">
            <h3 class="name"><?=ucwords($names[$i])?></h3>
            <img class="hero" src="_images/heros/<?=$i?>.jpg" alt="<?=ucwords($names[$i])?>" />
            <ul>
                <li>Price: <span class="price">$<?=$prices[$i]?></span></li>
                <li>KC# <span class="kcnum"><?=$kc_no[$i]?></span></li>
                <li>Serves: <span class="serves"><?=$serves[$i]?></span></li>
            </ul>
            <span>Gallery</span>
            <ul>
                <?php
                    $files = scandir($img_link . $i);
                    for ($x = 2; $x < sizeof($files); $x++) {
                        echo "<li>".$files[$x]."</li>";
                    }
                ?>
            </ul>
        </a>
    </div>
    <?php
}
?>