Help with CSS based gallery

> I don't think a lot of authoprs realise how irrititating it is to
> have stuff coming up and blocking other stuff out. The internet
> is a confusing place for a lot of people. The sort that seek out
> these models photographed in a certain (actually sexless) manner
> to look at are not likely to be too brainy to start with. Don't
> confuse them further. Provide for simple pleasure by simple means.
>
> --
> dorayme

I did thought about that. The example shown is a magazine, the site
I'm making is about magazines, so the public is not really just about
guys that look at sexy models. It will reach a much wider audience.
Those 5 pictures are also just what will be shown about the magazine's
pages, it's not really a large gallery, that's why I thought about
that solution. Those concerns you refered, like blocking content, all
make perfect sense, I agree with them and where taken on consideration
while developing the site. In this case, however, it would be a nice
"trick" to give the extra bonus to the site user without the need of a
"Click to see", "Click to close" cycle. Those are just like a sneak
peak at the magazine's content to help them make a decision to buy.
They don't have to leave the page, allow a popup or click anything at
all, if they want to see, just mous over the zoom. The idea behind the
small "zoom" button was to not "fire away" the big images when the
mouse rolls over the thumbnails (that would be really annoying), after
testing this solution we found that it was nice.

Thanks for your ideas.

--
Rui

> Your buttons:
> .poptrigger { z-index: 100; }
> Your large images:
> .popup:hover { z-index: 50; }
>
> 100 > 50

Hi,

I've already changed this values and it still doesn't work how it was
supposed (or as I intended). You can check out the link I already
uploaded the changes.

Thanks anyway.

--
Rui

> Your popup images extend below the viewport in my browser, and when I
> attempt to scroll down to see the whole image, it disappears.

I guess I'll have to make the large pictures a bit smaller, sorry.

> ..and just as annoying when the mouse passes over the Zoom button, while
> on the way to click the Back button.

We did try two options. One with a mouse-over on thumbnail and other
with mouse-over on small button. We decided that the small button
wouldn't get in the way, at least not that often so that it would get
annoying.

If more people come out with your opinion, we will eventually change
the "mouse-over" to a "click". However, the overlapping problem
remains.

Thanks.

--
Rui

mark.it.here RemoveThis @gmail.com wrote:
>
> http://www.myfilestash.com/userfiles/myed/index.html
>
> It only works well in Opera, Firefox, Safari and IE7 however I have
> two problems:
>
> 1. Doesn't work on IE6. Has you imagine I'm looking for full browser
> compatibility (don't laugh );

IE6 doesn't do :hover on elements besides <a>. However, I see that your
CSS includes rulesets for .popup_left, but the HTML doesn't include that
style. So much for my quick answer. What happens if you
specifically say "a.popup_left" in the CSS everywhere you have
".popup_left"? (Sorry I don't have time to research this better for you.)

Wait a minute: *what* doesn't work? It seems to work okay on my IE6.
What's the specific problem, exactly?

>
> 2. When you put your mouse over the "Zoom" button, the big picture
> stays below the other "zoom" buttons (check out the link).

Your buttons:
..poptrigger { z-index: 100; }
Your large images:
..popup:hover { z-index: 50; }

100 > 50

(although I kind of like the earring effect... )

BTW: Your page has no <title>, a non-quirks mode doctype might help you,
you're mixing in XHTML tag closers on an HTML page, and you don't need
to "comment out" your embedded CSS. LBNL: Your CSS has validation errors
(top: 30;).

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

On 2007-08-06, mark.it.here DeleteThis @gmail.com wrote:
>> Your popup images extend below the viewport in my browser, and when I
>> attempt to scroll down to see the whole image, it disappears.
>
> I guess I'll have to make the large pictures a bit smaller, sorry.

No matter how small you make them, there will be someone for whom
they are still too big. If you try to accommodate everyone, you
will end up with pictures so small that there is little point to
having the pop-ups in the first place.


--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

On 6 Ago, 16:00, John Hosking <J....RemoveThis@DELETE.Hosking.name.INVALID>
wrote:
> mark.it.h....RemoveThis@gmail.com wrote:
> >> Your buttons:
> >> .poptrigger { z-index: 100; }
> >> Your large images:
> >> .popup:hover { z-index: 50; }
>
> >> 100 > 50
>
> > Hi,
>
> > I've already changed this values and it still doesn't work how it was
> > supposed (or as I intended). You can check out the link I already
> > uploaded the changes.
>
> > Thanks anyway.
>
> Well, no, as I write this, the published code has not been changed. No
> z-index changes, no doctype change, no validation. Did you forget to
> upload the changed code?
>
> --
> John
> Pondering the value of the UIP:http://blinkynet.net/comp/uip5.html

I did a remake of the page and uploaded.

Actually it is working in IE6... so no problem there.

There's only that thing of the zoom button appearing in front of the
large images.

If I place the "a." before the popup styles, the buttons disappear. So
no solution there.

Now it's there, I checked.

Thenk you.

mark.it.here DeleteThis @gmail.com wrote:
>> Your buttons:
>> .poptrigger { z-index: 100; }
>> Your large images:
>> .popup:hover { z-index: 50; }
>>
>> 100 > 50
>
> Hi,
>
> I've already changed this values and it still doesn't work how it was
> supposed (or as I intended). You can check out the link I already
> uploaded the changes.
>
> Thanks anyway.

Well, no, as I write this, the published code has not been changed. No
z-index changes, no doctype change, no validation. Did you forget to
upload the changed code?

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

mark.it.here RemoveThis @gmail.com wrote:

>
> There's only that thing of the zoom button appearing in front of the
> large images.
>
> If I place the "a." before the popup styles, the buttons disappear. So
> no solution there.

They don't disappear for me. But no matter.

The problem seems to be your .poptrigger, which also affects the zoom
buttons. Remember, the zoom.gifs are really just <img> elements which
are children of the a.popup. Giving a.popup:hover a z-index of 150
doesn't do anything special for the zoom gifs. But .poptrigger appears
to. (Note: I don't use z-index much, so these are partly results from my
experimenting with your code.)

So remove .poptrigger's z-index: 10; rule from your CSS. (You also have
top:0px and left:0px, which I take to mean for this relative-positioned
element, you want its top shifted 0px and its left edge shifted 0px from
where they would be positioned otherwise. Remove and test.)

You can also remove the z-index: 0; rule from .popup in the CSS. In
fact, I think you can remove the entire ruleset for .popup.

Fix this:
..popup:hover span {
top: 30; /* <== invalid without units; make it 30px */ }

Remove the <!-- and --> malarkey.

And add this to your CSS before the .popup span selector (or at least,
before the .popup span img selector. I'll leave as an exercise for you
(the student ) to determine what you can remove from the markup.

/* Zoom buttons */
a.popup img {
position: absolute; left: 5px; top: 5px; border:none; }

I also don't think you need the left: -4000px; rule in a.popup span, but
you'll have to test all of this anyway. Only tested in FF with the Web
Developer add-on.

HTH. GL.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

In article
<1186396882.154157.59890.DeleteThis@57g2000hsv.googlegroups.com>,
mark.it.here.DeleteThis@gmail.com wrote:

>
> http://www.myfilestash.com/userfiles/myed/index.html
>
> It only works well in Opera, Firefox, Safari

In Safari at least one of the girls has two zoom boxes for
earings.

--
dorayme

In article
<1186398568.841182.175200.RemoveThis@19g2000hsx.googlegroups.com>,
mark.it.here.RemoveThis@gmail.com wrote:

> On 6 Ago, 11:47, dorayme <doraymeRidT....RemoveThis@optusnet.com.au> wrote:
> > In article
> > <1186396882.154157.59....RemoveThis@57g2000hsv.googlegroups.com>,
> >
> > mark.it.h....RemoveThis@gmail.com wrote:
> >
> > >http://www.myfilestash.com/userfiles/myed/index.html
> >
> > > It only works well in Opera, Firefox, Safari
> >
> > In Safari at least one of the girls has two zoom boxes for
> > earings.
> >
> > --
> > dorayme
>
> Thanks Dorayme,
>
> I guess I didn't explain myself very well... that "zoom box earings"
> problem happens in all browsers. That's one of the problems I'm trying
> to solve. I guess that if I get it to work on one it will work in all
> others. However, on IE6, the zoom boxes don't appear at all.
>
> --
> Rui

I realise this might not be welcome but I feel an urge to advise
you. Don't worry about such trickery. If you want to provide a
way to let folk see things bigger, just make the pics links that
go to the bigger. I have spent a whole day getting rid of all the
javascript pop-ups in a section of a website I am updating, and
simply providing enlargements in the context of the site itself
and so I cannot at this late hour let you think it is ok to be
wasting time on all this. You will regret it later. If you want
people to see beautiful girls bigger, the simplest technology
that works in all browsers is at hand to help you.

I don't think a lot of authoprs realise how irrititating it is to
have stuff coming up and blocking other stuff out. The internet
is a confusing place for a lot of people. The sort that seek out
these models photographed in a certain (actually sexless) manner
to look at are not likely to be too brainy to start with. Don't
confuse them further. Provide for simple pleasure by simple means.

--
dorayme

Thanks to the input by all of you, specially John Hosking, I've
finally got it to work.

This is what I had to do: Define the z-index inline for each
"poptrigger" giving a lower value for each definition made.

This is a small problem because I have to make some changes in order
to work like a dynamic gallery, but I guess it will work just fine.

I've tested on IE7, IE6, Opera, Firefox and Safari and it's working
fine. So if any of you want to use it for your own projects, feel
free.

Any way, if someone has any idea of improvement (like not using the
inline z-index) just let me know.

Thank you.

--
Rui

> No matter how small you make them, there will be someone for whom
> they are still too big. If you try to accommodate everyone, you
> will end up with pictures so small that there is little point to
> having the pop-ups in the first place.

You've got a point there. Some kind of equilibrium must be found.

--
Rui

P.S.

You can find the working solution here:

http://www.myfilestash.com/userfiles/myed/index.html


--
Rui