CSS Popup Image Gallery

[BigBadBill]

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ge-viewer/P10/

3) Describe problem: If you go to http://bsva2.com/CPR/homepur.html you'll immediately see the images for the popups are stacking as opposed to showing up in a neat row. I have tried several variations on position: to no avail. Can anyone tell me what I'm doing wrong?

[Beverleyh]

The website is being blocked as "bad language" by web filters so unfortunately I cant view it.

Can you set up a reduced test page elsewhere to demonstrate the problem, with just enough html/css to show the issue. Often this extraction exercise will help you identify the problem yourself without waiting on others to wade through a whole website of code on your behalf. JSBin, CodePen and JSFiddle are all free to use.

You can also use the developer toolbar (F12 in most browsers) to inspect the element and modify the CSS on the fly, live in the browser.

I did momentarily see the site on mobile before the filters kicked me out, and I saw images that were stacked on page load. This wasn't anything to do with the CSS Popup Image Viewer though because that worked fine - it was the arrangement of images from which the popups were generated that displayed the stacking issue. If this is what you mean (that you're having problems arranging the images on your page rather than there being an issue with the actual position of popups), let me know and I'll move this thread to the CSS forum (it would be a general help request rather than a DD specific one).

[mlegg]

BigBadBill Is this a test page? I mainly do real estate websites and IMO the image strip vertically down the page looks odd. I would use an image grid. Look on Beverly's site and she has a few good ones.

[BigBadBill]

BigBadBill Is this a test page? I mainly do real estate websites and IMO the image strip vertically down the page looks odd. I would use an image grid. Look on Beverly's site and she has a few good ones.

Yes, this is a test page and loading the images inline instead of stacked is what I'm trying, unsuccessfully, to do.

[jscheuer1]

It's the bootstrap css for the page (http://bsva2.com/CPR/css/bootstrap.css) that's causing the stacking of the thumbnails (around line 4897):

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}

And (around line 1124):

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

Both of these should be able to be avoided simply by globally changing the word 'thumbnail' as used in the gallery's markup and in its css styles to - say 'gallerythumbnail'.

[BigBadBill]

DING DING DING! That did it! Thanks!

Someone can mark this bad boy closed. Thanks again for everything!