different count on images in each row

Oct 15, 2010 at 12:21 PM

HI!

If I have images format mixed (portrait and landscape) in each row there is a different count of images.
If one row has an image in portrait format the images in the next row starts after this image.

Example:

L L L L P L L L L L
             L L P L L
                   L L
L L L L L....

L for Landscape P for Portrait and this looks very strange. And it doesnt depend on the browser I use because it's all the same....

DNN Version 05.05.01
LightBox Gallery Version:  01.03.00, also tried the alpha version...

Thx a lot!
©a-x-i

Coordinator
Oct 17, 2010 at 5:33 PM

Did you modify the widths of the images?  This display issue is caused either by changing the CSS, or by the width of the container you're using for the module.  Either way, the actual fix is CSS-based too.  The image list renders in an unordered list to make this kind of modification easy to make for any site.

Oct 18, 2010 at 7:54 AM

Hi!

I didn't change anything. And sorry I'm no css- or design-specialist (but software developer csharp).
I have made 3 different installations of dnn (company, privat, hoster) and everywhere the same problem... :o(

Isn't it possible for you to reproduce this problem?

thx
©a-x-i

Coordinator
Oct 19, 2010 at 3:15 PM

Of course I can.  That's the point.  It's still a CSS issue.  For example:

http://www.willstrohl.com/Photos

All you have to do is play with the widths of the containers for each LI in your style sheet.  Exactly how will depend on your sites and their respective skins.

Oct 29, 2010 at 9:49 PM

Great Module. What part do you have to change in the CSS? Here is an example of the code from the gallery. Do you mean add something with ul ullightbox-RoadTrip_445 li listime{ width:250;} not sure the correct CSS can figure out.

<ul id="ullightbox-RoadTrip_445" class="wns_lightbox">

<li class="listitem">
<span class="wns_lightbox_span">
<a class="wns_lightbox_link" rel="lightbox-RoadTrip" href="/Portals/1/Images/RoadTrip10/IMG_0692.JPG" title="Road Trip">
  <img src="/Portals/1/Images/RoadTrip10/IMG_0692-thumb.JPG" alt="Road Trip" title="Road Trip">
</a>
</span>
</li>

Coordinator
Apr 6, 2011 at 5:50 AM

The part of the CSS you change is not always the same, depending on the variables introduced by wrapping and nearby elements that constrict the available space for this module.  The module will naturally wrap as it is, and images of varying widths will have a direct visual impact on this.  You need in many cases to pay attention to the width and height attributes of:

li.listitem and...

li.listitem span.wns_lightbox_span

Make sure that no matter how wide all of your thumbnails are, the widths defined in the CSS are all wide enough to account for the widest image in your collection.