Moo Tools Lightbulb in Gallery

The light bulb is controlled via the CSS selectors:

.jdGallery a.open:hover { background: url('_ss_open_') no-repeat center center; }
* html .jdGallery a.open:hover { background: url('_ss_open-b_') no-repeat center center; }
(...some other CSS code separates these two a bit in the CSS file...)
.withArrows a.open:hover { background: url('_ss_open_') no-repeat center center; }
* html .withArrows a.open:hover { background: url('_ss_open-b_') no-repeat center center;
filter:alpha(opacity=80); }

It would be slightly difficult to have the whole image react, as it is overlaid with up to three anchors (containing left-arrow, light bulb, and right-arrow), thus preventing the browser from properly registering a hover on just the image.

I think the best we can hope for here is to morph the current lightbulb popup into something more of what you had in mind.

Options 1:

The image may be changed holistically (for ALL instances of this Actions, across ALL documents) by replacing the image inside the mootools bundle with that of your choosing. It can be anything you would like, but please follow these steps: If you want to save the original image, please COPY it to a new location, then MOVE your new image (with exactly the same names) to the image folder. This will trigger an ‘confirmation for overwrite’, OK and everything should update as expected. (I believe there are routines to prevent the issues that arise from not following these steps, but I don’t remember for sure.)

You could simply make the two images one pixel by one pixel of nothing but transparency if you would like.

In fact (2) images will need to be changed: ‘ss_open.gif’ and ‘ss_open.png’. The gif version is used as an IE fallback via a CSS hack.

Option 2:

Add some custom CSS code to to your page (via an html markup item or Extra Markups Action: which I am having difficulty finding at present, nor do I know if it works in FW5. But it was a Paul Dunning Action from FW3 days) that negates the background for selectors provided.

.jdGallery a.open:hover,
* html .jdGallery a.open:hover,
.withArrows a.open:hover,
* html .withArrows a.open:hover { background-image: none; }

This should effectively eliminate the BG image effect for the links

This would appear the more prudent, and less disruptive route, so as to not interfere with any other slideshows that may be generated in other pages.

There is no mechanism to make either of these modifications from within the Action interface. If you have trouble adding the CSS to the page by current conventional means, let me know and I will see if I can whip together a little Action to allow for addition of mootools specific CSS declarations.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options