Multiple images inside imageliquid container causes a problem

[Frique]

I'm applying the plugin on a div which has other elements inside it (as a large photo background). When the child elements have images, they are hidden by the plugin. Please target all imageLiquid elements by class/id so it doesn't affect other elements within the selector's ranges.

(similar to the other issue regarding a:first)

[karacas]

Multiple imgLiquid images:

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody1.jpg" />
</div>
<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody2.jpg" />
</div>
<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody3.jpg" />
</div>

[Frique]

Hi.
I mean this case:

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody1.jpg" />

    <div>
        Other stuff here, on top of image background
        <img src="unrelated-image.jpg">
    </div>
</div>

[karacas]

Try this.
(think imgLiquid container as your img)

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="Woody1.jpg" />
</div>
<div>
    Other stuff here, on top of image background
    <img src="unrelated-image.jpg">
</div>

[Frique]

That won't work because imgLiquid is supposed to be behind the other content, serving as a background. In fact in my real life usage i don't set a width and height, because the inside content stretches the parent imgLiquid to the right size.

[Frique]

I suggest an alternative way to provide the source image is via a data-attribute on the div. So no image element is needed and no other child-elements need be affected.

<div class="imgLiquidFill imgLiquid" data-image="Woody1.jpg"></div>

[TylerFisher]

Replicated this. @Frique's solution seems okay, but I specifically want to use imgLiquid because it uses an <img> tag, which helps with Google News parsers and other robot scrapers that don't run JavaScript. I suggest requiring a class (perhaps class="liquid") on the image being resized, that way the library can apply display: none and visibility: hidden to only the necessary elements.

[omfgitsasalmon]

Found the solution.

Replace
imgLiquid.injectCss=".imgLiquid img{visibility:hidden}" and i("img",u).css({display:"none"})
with
imgLiquid.injectCss=".imgLiquid img:first {visibility:hidden}" and i("img:first",u).css({display:"none"})

And only the first image will be taken for the container, the rest will remain as is.