Dynamic images and dynamic attributes

But how does it work with dynamic images? I’m using Dynamic Image Attr. SRC and get that in my lightbox which opens…

What does your dynamic binding return? Are you sure you the url is right?

returns this here

But you need to bind the url of the image to open to the a tag as a dynamic href :slight_smile:

hmm how you mean? Is it correct to use the dynamic attributes? or I need the classic SRC for that image??

No Freddy, select the A tag you applied “open in lightbox” to. Click dynamic attributes - link - href and add the link to the image to be loaded there!

Just as explained here, but with dynamic link Using Lightbox

Ahhhh okay I got it now. :ghost:

image

Moved now these params to Dynamic Attributes… but why the hell we still use in Wappler documentations these classic src / non dynamic attributes… theyre not so cool :smiley:

Because in most of the cases it’s easier to show people static pages with static values :slight_smile:

@Teodor Can this be used with externaly hosted images ?

I have the following code:

 <body is="dmx-app" id="index">
<dmx-lightbox id="lightbox1" buttons="show" noscrollbars="true"></dmx-lightbox>
<dmx-serverconnect id="content" url="api/getContent"></dmx-serverconnect>
<section>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>{{content.data.home[0].data.titre[0].text}}</h1>
                <h1>{{content.data.home[0].data.sous_titre[0].text}}</h1>
            </div>
        </div>
        <div class="row" is="dmx-repeat" id="pictures" dmx-bind:repeat="content.data.peintures">
            <div class="col">
                <a dmx-bind:href="data.peinture.url" dmx-lightbox:pictures=""><img dmx-bind:src="data.peinture.url"></a>

                <h1>{{data.titre[0].text}}</h1>
            </div>
        </div>
    </div>
</section>

That creates the following code on the live server:

> <div class="row" is="dmx-repeat" id="pictures">
>                 <div class="col">
>                     <a href="https://images.prismic.io/patriciariverti/a316ab54-e88e-48e2-8c4d-b4c0b9e07975_mouton+rouge.jpeg?auto=compress,format&amp;rect=170,0,1215,899&amp;w=954&amp;h=706" rel="https://images.prismic.io/patriciariverti/a316ab54-e88e-48e2-8c4d-b4c0b9e07975_mouton+rouge.jpeg?auto=compress,format&amp;rect=170,0,1215,899&amp;w=954&amp;h=706"><img src="https://images.prismic.io/patriciariverti/a316ab54-e88e-48e2-8c4d-b4c0b9e07975_mouton+rouge.jpeg?auto=compress,format&amp;rect=170,0,1215,899&amp;w=954&amp;h=706"></a>
> 
>                     <h1>Mouton Rouge dans Forêt</h1>
>                 </div>
>             
>                 <div class="col">
>                     <a href="https://images.prismic.io/patriciariverti/09ad0375-8733-431c-9a15-2797ea843f58_lampadaires.jpeg?auto=compress,format&amp;rect=0,74,1600,1184&amp;w=954&amp;h=706" rel="https://images.prismic.io/patriciariverti/09ad0375-8733-431c-9a15-2797ea843f58_lampadaires.jpeg?auto=compress,format&amp;rect=0,74,1600,1184&amp;w=954&amp;h=706"><img src="https://images.prismic.io/patriciariverti/09ad0375-8733-431c-9a15-2797ea843f58_lampadaires.jpeg?auto=compress,format&amp;rect=0,74,1600,1184&amp;w=954&amp;h=706"></a>
> 
>                     <h1>Lampadaires dans la nuit</h1>
>                 </div>
>             </div>

But the Lightbox shows: "Url not supported"

Do you have any idea ?

Thanks