• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 325
  • Last Modified:

Gallery-like positioning puzzle

Hey folks.

I'm stuck and I hope someone with better mastery of CSS can help me.  I have a list of images that go across the screen in rows.  Five per row.  When the user rolls over an image, I want to see an expanded view of that image, along with some metadata at the bottom.  Right now, I store two different images, one as the icon and one as the expanded view.  I created two different DIVs, one for each state.

So, I used "float" to make the thing go into rows, but now when I expand, it pushes the icons around.  Like this:

Starting position:
XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX

XXX XXX XXX XXX
XXX XXX XXX XXX
XXX XXX XXX XXX

Rolls over top row, second from left:

NOT what I want but what is happening:
XXX YYYYYY XXX XXX XXX XXX
XXX YYYYYY XXX XXX XXX XXX
XXX YYYYYY XXX XXX XXX XXX
        YYYYYY
        YYYYYY
        YYYYYY

XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX

What I DO want:

    YYYYYY
XXYYYYYYXX XXX XXX XXX
XXYYYYYYXX XXX XXX XXX
XXYYYYYYXX XXX XXX XXX
    YYYYYY
XXYYYYYYXX XXX
XXX XXX XXX XXX
XXX XXX XXX XXX
XXX XXX XXX XXX

II hope that's clear and I'm sure there's a way to do this but right now I'm just stuck.

Thanks in advance.
0
cookiej
Asked:
cookiej
  • 5
  • 4
1 Solution
 
Cornelia YoderArtistCommented:
I use this (www.corneliayoder.com) and love it:

Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
0
 
cookiejAuthor Commented:
The artwork is certainly beautiful, Cornelia.  However I have some metadata that I want to display in-place upon rollover.

I've seen this technique done before but it's always so buried in other code that I've had a hard time making it work.
0
 
Cornelia YoderArtistCommented:
This code from dynamicdrive will let you put your metadata as well as the picture into it, like the captions on my pictures.  I found it very easy to use, but if it doesn't work for you, then I'm sure others may have other suggestions.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
cookiejAuthor Commented:
From an interface perspective, I'd rather keep the user focused on the item being viewed.  Have the thumbnail expand directly from where it's located, akin to pulling a book from the bookshelf, or stepping closer to an image in a real-world gallery, rather than having the subtle distraction of watching where you put your mouse, then looking back at a different location.

I know it seems a lot of work for a subtle distinction.  But across a whole application, these small differences can really affect the user experience and the attitude toward the app.

Plus, since I haven't gotten a lot of traffic, I'll kick it up to 500 for a simple, elegant set of CSS code that'll do what I want.
0
 
cookiejAuthor Commented:
OK.  I figured it out.

The trick is to use display: block/none for the larger image, with absolute positioning and to use visibility: hidden/visible for the smaller icon-like thumbnail.

visibility: hidden maintains space for the image (it just hides it) while display:none removes the element from the window, letting other elements flow into the empty spot.

I'm sure this is a solid "duh" for the experts out there but since noone paid much attention to this one, It's 500 easy points that got away.
0
 
Cornelia YoderArtistCommented:
Sorry, cookiej, but apparently this wasn't anything that was obvious, or lots of people would have posted, without regard for the number of points.  I'm glad you figured it out to your satisfaction, but your bitter tone really isn't warranted.  Thanks for sharing the answer, and good luck with your new website.
0
 
cookiejAuthor Commented:
Ah.  This is the failing of text-only.

You mistook my tone.  I'm not bitter.  I was surprised, perhaps, at the lack of response.  Maybe I didn't phrase the question well, but this was the kind of softball question I figured would get answered almost before I submitted it!

I mean, I've seen this done all over the web.  Adobe's spry demo gallery employs the technique (although they have a much cooler grow/shrink).  And really, my solution was pretty basic.  No calculations, no coding, really just understanding the difference between display and visibility.

But I wasn't bitter.  And truly, thanks for trying to help!  I love your artwork.
0
 
Cornelia YoderArtistCommented:
Well, I know when I started doing my website, I was completely at a loss, and I found the dynamicdrive site through looking at the source of a webpage that I liked.  I had no idea how to do it at first, so maybe you should sign up as an expert now :)

If you wish, you can go to Community Support and ask to have your points refunded.

And thanks for the kind compliment on the art :)
0
 
Cornelia YoderArtistCommented:
I have no objection.  My answers weren't what he wanted and I suggested he ask for the refund, so go ahead and refund his points any time.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now