vanloc vanloc - 1 year ago 41
HTML Question

Inserting image array into complex structure using HTML

I have an array image:

lstImageSlider
.

I need a loop to
foreach
that array and insert it into the HTML page.

The HTML code from a theme has structure that is difficult to insert.

This is because it has
slider__item--0
-
1
-
2
-
3
. Loop this.

I can set this code to
foreach $lstImageSlider as $item
.

``````````````````````
` thumbnail `
``````````````````````
` image 1 ` image 2 `
``````````````````````


HTML code:

<div class="property__ribon">transaction-related</div>
<div id="properties-thumbs" class="slider slider--small js-slider-thumbs">
<div class="slider__block js-slick-slider">
<div class="slider__item--0"><a href="src/image.jpg" data-gallery-index='0'><img src="assets/img/lazy-image.jpg" alt=""><span>Awesome Kitchen!!!</span></a></div>
<div class="slider__item--1"><a href="src/image.jpg" data-gallery-index='1'><img src="assets/img/lazy-image.jpg" alt=""><span>2</span></a></div>
<div class="slider__item--2"><a href="src/image.jpg" data-gallery-index='2'><img src="assets/img/lazy-image.jpg" alt=""><span>3</span></a></div>
<div class="slider__item--3"><a href="src/image.jpg" data-gallery-index='3'><img src="assets/img/lazy-image.jpg" alt=""><span>Ok</span></a></div>
<div class="slider__item--0"><a href="src/image.jpg" data-gallery-index='4'><img src="assets/img/lazy-image.jpg" alt=""><span>5</span></a></div>
<div class="slider__item--1"><a href="src/image.jpg" data-gallery-index='5'><img src="assets/img/lazy-image.jpg" alt=""><span>6</span></a></div>
<div class="slider__item--2"><a href="src/image.jpg" data-gallery-index='6'><img src="assets/img/lazy-image.jpg" alt=""><span>7</span></a></div>
<div class="slider__item--3"><a href="src/image.jpg" data-gallery-index='7'><img src="assets/img/lazy-image.jpg" alt=""><span>8</span></a></div>
<div class="slider__item--0"><a href="src/image.jpg" data-gallery-index='8'><img src="assets/img/lazy-image.jpg" alt=""><span>The end</span></a></div>
</div>
</div>
<div class="slider slider--thumbs">
<div class="slider__wrap">
<div class="slider__block js-slick-slider">
<div data-slide-rel='0' class="slider__item--0">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='1' class="slider__item--1">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='2' class="slider__item--2">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='3' class="slider__item--3">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='4' class="slider__item--0">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='5' class="slider__item--1">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='6' class="slider__item--2">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='7' class="slider__item--3">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='8' class="slider__item--0">
<div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</div>

Answer Source

i am not sure which you want , but hope it will help you, create counter and if counter >= 3 then set 0

<div class="property__ribon">transaction-related</div>
<div id="properties-thumbs" class="slider slider--small js-slider-thumbs">
    <div class="slider__block js-slick-slider">
        <?php
        $first_counter = 0;
        foreach ($lstImageSlider as $item) {

            ?>
            <div class="slider__item--<?=$first_counter?>"><a href="src/image.jpg" data-gallery-index='<?=$first_counter?>'><img
                        src="assets/img/lazy-image.jpg" alt=""><span>Awesome Kitchen!!!</span></a></div>
            <?php
            $first_counter++;
            if ($first_counter >= 3) {
                $first_counter = 0;
            }
        }
        ?>
    </div>
</div>

<div class="slider slider--thumbs">
    <div class="slider__wrap">
        <div class="slider__block js-slick-slider">
            <?php
            $counter = 0;
            foreach ($lstImageSlider as $item) {

                ?>
                <div data-slide-rel='<?= $counter ?>' class="slider__item--<?= $counter ?>">
                    <div class="slider__img"><img src="assets/img/lazy-image.jpg" alt=""></div>
                </div>
                <?php
                $counter++;
                if ($counter >= 3) {
                    $counter = 0;
                }
            }
            ?>

        </div>
    </div>
</div>

hope it will help you, any confusion then inform me

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download