I have to point out that the blockUI plugin is overkill if all you
want to do is fade the image and display a caption over it. If you
gave each thumbnail a javascript created div inside the link and set
to a 0 opacity with a white bg and then simply increased the opacity
on hover-over, and decreased it on hover-out you wouldn't have to deal
with the overhead of blocking the ui and intercepting click events etc
that the plugin has to do.
IE on the ready event loop over all the links by classname, append a
div to each link, set the css style for the div ( pos absolute inside
relative links, height and width set to the parent size and insert a
span based on the rel attr. opacity 0 ) and then attach a hover
function to each of the same classname links that grabs the interior
div and sets the opacity to what you like. On the hover out simply
revert the div back to the original style rules ( you could even
create a single style object for the div and simply reuse it )
I hope I was clear, since I am at work I don't have the time to write
any enlightening code for you.
Is there some particular reason I might be missing that would make you
want to use the blockUI plugin?
Abba
On May 21, 10:31 am, "Chris Jordan" <[EMAIL PROTECTED]> wrote:
> I figured out what the hour glass is all about. I'm throwing up an overlay,
> and that puts up the hour glass automatically. if you hover over just the
> text in the middle, then there's no hour glass there.
>
> Thanks for everyone's help!
>
> Chris
>
> On Wed, May 21, 2008 at 11:45 AM, Chris Jordan <[EMAIL PROTECTED]>
> wrote:
>
>
>
> > Hey, that's progress! I'm still getting the hour glass too, but the flicker
> > is gone. It seemed before like the constantly being blocked and unblocked in
> > rapid succession. Now, it looks just right, except that I don't like the
> > hour glass. But I think I can show it to my client like this.
>
> > Any further assistance would be much appreciated. If anyone can figure out
> > how to get rid of the hour glass, that'd be great.
>
> > Here's what the code looks like now:
> > // change message border
> > $.blockUI.defaults.css.border = '0px solid red';
> > $.blockUI.defaults.css.cursor = 'default'; // I'm just assuming that this
> > will work.
>
> > // make fadeOut effect shorter
> > $.blockUI.defaults.fadeOut = 400;
>
> > $(".thumb").hover(function() {
> > // MOUSEOVER HERE
> > $(this).block({
> > message: $(this).attr("alt"),
> > css: {
> > padding: 0,
> > margin: 0,
> > width: '100%',
> > top: '40%',
> > left: '35%',
> > textAlign: 'center',
> > color: '#FF0000',
> > cursor: 'default', // but just in case it didn't work
> > above, i set it here too...
> > backgroundColor:'transparent',
> > fontWeight: 'bold'
> > },
> > overlayCSS: {
> > backgroundColor:'#F2F2F2',
> > opacity: '0.6'
> > }
> > })
> > },function() {
> > // MOUSEOUT HERE
> > $(this).unblock();
> > });
>
> > On Wed, May 21, 2008 at 11:31 AM, Chris Jordan <[EMAIL PROTECTED]>
> > wrote:
>
> >> Michael, I'll try this. Thanks so much.
>
> >> On Wed, May 21, 2008 at 11:21 AM, Michael Price <
> >> [EMAIL PROTECTED]> wrote:
>
> >>> Chris Jordan wrote:
>
> >>>> Just to clarify, in order to see the problem (especially in FF -- it
> >>>> looks a little different in IE) mouse over one of the thumbnails in the
> >>>> center of the page, and then leave the mouse there. You don't have to do
> >>>> any
> >>>> further movement of the mouse to see the problem happening.
>
> >>>> Thanks everyone. I really, really need help on this. :o(
>
> >>> Downloaded a copy of the page via Firefox and tried changing your
> >>> bindings to use the hover function - seemed to work OK but I'm still
> >>> getting
> >>> the eggtimer over the images for some reason:
>
> >>> $(".thumb").hover(function() {
> >>> // MOUSEOVER HERE
> >>> },function() {
> >>> // MOUSEOUT HERE
> >>> });
>
> >>> Regards,
> >>> Michael Price
>
> >> --
> >>http://cjordan.us
>
> > --
> >http://cjordan.us
>
> --http://cjordan.us
