We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37272
    • 216 Posts
    Hi,

    I’d like to disable the number of pics per row, just float them left, and let the browser sort them out. However, if I try a setting of ’0’ or ’-1’, the result is a mess. Is there something I’m missing? I have a dynamic webpage that fills the viewport, so setting the number of thumbnails is not very satisfactory.
      • 7923
      • 4,213 Posts
      If &pics_per_row is enabled (eg. set to a number) MaxiGallery will insert the clearerTpl after each &pics_per_row pictures. It’s off by default.

      So you are simply having an issue with CSS styling.. you don’t need to touch the &pics_per_row parameter. MaxiGallery default css is in: /assets/snippets/maxigallery/css/default.css


        "He can have a lollipop any time he wants to. That's what it means to be a programmer."
        • 37272
        • 216 Posts
        Hi,

        I though that without the parameter, it would default to four, the default figure indicated by the wiki. I’ve removed the parameter, and it is behaving as it did before - though I now understand the cause of the problem. Thumbnails returned to the next line become hung up on taller images from the above line, or even if they are of identical height, they can become caught up on two-line titles. So, they just don’t float all the way left, and the page becomes a mess. I can see why the parameter is so useful now. Still, I’d really prefer to not use it if at all possible. However, I can think of no way to resolve this. Unless I have all images the same height, and always keep to single row titles (not very practical), then this is bound to happen. Hmmm, unless I put the title texts in a div with a fixed height.

        I guess I’m just going to have to use the parameter to set the number of pics per line. sad

        Well, thanks anyway.
          • 7923
          • 4,213 Posts
          Yes, that’s exactly the problem why I created the &pics_per_row parameter.. to clear the rows when there are different size pictures, some taller than others.


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 37272
            • 216 Posts
            Hi Doze,

            I’ve been playing around with this. I had additional problems because I use floats for the layout (fixed by removing the float attribute from .thumbscontainer, and adding ’width: 100%’ to ul.thumbs, in case anyone else has similar problems with weird IE bahaviour).

            Anyway, I first removed the &pics_per_row parameter. I instead used height and width in the &max_thumb_size parameter, setting a very large relative value for the width. This way, the thumbs will always resize to the height value, and not the width. All the thumbs will be of identical height. I then set the ul.thumbs li margins to ’0 10px 0 5px’ and set a height for p of 2.8em. This allows enough space for up to two rows of text in the title, and I set the overflow to auto, just in case a visitor resizes their text. Everything looks fine and dandy; the thumbs look far neater than they would if they were varying in height; the thumbs fill the space of a liquid layout; and images always reflow to the far left.

            CSS changes I made:

            ul.thumbs li {
            	list-style: none;
            	float: left;
            	display: block;
            	list-style-image: none !important;
            	margin:  0 10px 0 5px !important;
            }
            ul.thumbs {
            	list-style: none;
            	margin: 0;
            	padding: 0;
            	clear: both;
                            width: 100%;
            }
            ul.thumbs li p {
                            overflow: auto;
                            margin: -0.4em 0 1em 0.6em;
                            padding: 0;
                            font-weight: normal;
                            font-size: 100%;
                            height: 2.8em;
            }
            .thumbscontainer {
            	margin-bottom:20px;
            }