All geek questions in one place

Collage Plus mesh not suitable for container

I am trying to create an image grid using the collagePlus jQuery plugin. This is supposed to match all the images in the div inside the container. However, when I try to insert more than 4 images, it goes beyond the height of the container to fit the images, rather than downsizing the image to fit the container.

The code:

<html>
    <link rel='stylesheet' href="css/collage.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.collagePlus.js"></script>
    <div style='height:200px; width:100%;max-height:200px;'>
    <div class="Collage">
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>
        <img src="four.png"/>

    </div>
    </div>
    <script>
        $('.Collage').collagePlus({'allowPartialLastRow' : true});
    </script>
</html>

If anyone knows why this is happening and what I can do to fix it, I would really appreciate it.

+4
source share
3 answers

Try using target height for each row

$('.Collage').collagePlus(
{
    // change this to adjust the height of the rows
    'targetHeight' : 100,
    // change this to try different effects
    // valid effets = effect-1 to effect-6
    'effect' : "effect-1"
}
);
+1
source

. Collage Plus " ", targetHeight . , , .

( Google Chrome):

$('.Collage').collagePlus({'allowPartialLastRow': true, 'targetHeight': 95});
#Container {
    border:1px solid black;
    height:200px;
    width:100%;
    max-height:200px;
    overflow:hidden;
}
.Collage {
    padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ed-lea.imtqy.com/jquery-collagePlus/javascripts/example/jquery.collagePlus.min.js"></script>
<div id="Container">
    <div class="Collage"><!-- Remove all whitespace between elements as suggested on collagePlus
        --><img src="http://placehold.it/350x150" alt="" /><!--
        --><img src="http://placehold.it/320x100" alt="" /><!--
        --><img src="http://placehold.it/550x400" alt="" /><!--
        --><img src="http://placehold.it/120x150" alt="" /><!--
        --><img src="http://placehold.it/120x150" alt="" /><!--
        --><img src="http://placehold.it/315x205" alt="" /><!--
        --><img src="http://placehold.it/350x150" alt="" /><!--
    --></div>
</div>
Hide result
0

, , -.

float: left 80 of collagePlus

var w = (typeof $img.data("width") != 'undefined') ? $img.data("width") : $img.width(), 
h = (typeof $img.data("height") != 'undefined') ? $img.data("height") : $img.height();


var w = $img.width(),h = $img.height();

0. http://imagesloaded.desandro.com/ reset.

0

Source: https://habr.com/ru/post/1584878/

More articles:


All Articles