2

I'm trying to loop multiple images in a div called center the image is supposed to be in the div watermarked

Here's my code when looping the images in div center:

@foreach($data as $key)

    <div id="center">
        $image_file = $key->album['0']->image;
    </div>

@endforeach

The codes when inserting a watermark on the image to be diplayed in the div center:

var image_file = '<?php echo asset($image_file) ?>';
                                watermark([image_file, 'http://localhost:8080/uploads/product/watermark.jpg'])
                                    .image(watermark.image.center(0.5))
                                    .then(function (img) {
                                        document.getElementById("center").appendChild(img);
                                    });

but when i do that, all the images come in the same div center, instead of being multiple images in multiple center divs

Here is a screenshot of how it is diplayed versus how it should be displayedenter image description here

How it should be diplayed(picture with its respective details)

enter image description here

Any help would be appreciated. thanks!

Dacy
  • 21
  • 5
  • You are giving the same id to the a div that is rendered multiple times, generate a dynamic id or use a class – Tomer Jul 05 '17 at 13:09
  • I tried to use a class but it doesn't work either! – Dacy Jul 05 '17 at 14:01
  • make an ajax call, and loop using jquery/javascript [here is an example to loop with jquery](https://stackoverflow.com/questions/13984962/is-there-conditional-looping-with-each-function-in-jquery) – Pa6 Jul 05 '17 at 14:26
  • @fatman i generated a dynamic id and it worked, thank you for the help! – Dacy Jul 06 '17 at 15:57

0 Answers0