Quantcast

Having icons change within Shadowbox based on state?

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Having icons change within Shadowbox based on state?

tytbone
This post was updated on .
EDIT: Okay, I think I solved it thanks to http://stackoverflow.com/questions/1676018/trouble-with-changing-the-backgroundimage-property

-------------------------
document.getElementById('sb-nav-expand').style.backgroundImage="url(file:///C:/Users/w7/Dropbox/portfolio-site/css-js/shadowbox/close2.png)";
-------------------------

seems to work.

Original post:

I'm using http://code.pandaking.co.uk/sb-expand/ to allow users to click on the magnifying icon and zoom in/move around if they want. Once the picture is draggable, I would like the magnifying icon to change to something else indicating clicking on it will "return" to the original state.

(This is a .gif of the problem: http://i.imgur.com/OIMEvdo.gif)

The problem is, for some reason when the zoom in status is achieved, having the icon change causes it to disappear. This isn't a problem if the icon is set in the CSS file and never changes, but for some reason (presumably to do with the "regular" shadowbox.js file) doing something like

------------------------
if (sbe.options["handleOversize"] === "drag") {
    sbe.options = {
        handleOversize: "resize"
    };

    document.getElementById('sb-nav-expand').style.backgroundImage = "url(close2.png)";

} else {
    sbe.options = {
        handleOversize: "drag"
    };
    document.getElementById('sb-nav-expand').style.backgroundImage = "url(expand.png)";
}
------------------------

within sb-expand.js causes the icon to disappear. (The area is still clickable but there's no picture.) Oddly enough, this doesn't seem to be a problem with changing backgroundColor.

I assume this has something to do with how the icons are stored in shadowbox.js. I noticed the array pngIds

------------------------
pngIds = ["sb-nav-close", "sb-nav-next", "sb-nav-play", "sb-nav-pause", "sb-nav-previous", "sb-nav-expand"],
------------------------

and added sb-nav-expand to the list, but that doesn't seem to have helped. This seems related somehow but I'm not sure how (unless it is related to handling a browser that doesn't supportsOpacity ... ?):

------------------------
if (!supportsOpacity) {
            var el, m, re = /url\("(.*\.png)"\)/;
            each(pngIds, function(i, id) {
                el = get(id);
                if (el) {
                    m = S.getStyle(el, "backgroundImage").match(re);
                    if (m) {
                        el.style.backgroundImage = "none";
                        el.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=" + m[1] + ",sizingMethod=scale);"
                    }
                }
            })
        }
------------------------

Help would be appreciated, thanks.
Loading...