Problem z kodem jQuery,

Maska wczytuje się na img class ale ja chcę aby wczytywana była do div class  a nie img. Proszę o pomoc w edycji kodu.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>imageMagic Demo</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
 
(function (d) {
    var n = 0;
    d.fn.imageMask = function (e, j) {
        if (void 0 == e) return console.error("imageMask: undefined mask"), !1;
        if (!this.is("img")) return console.error("imageMask: jQuery object MUST be an img element"), !1;
        if (void 0 != j && !d.isFunction(j)) return console.error("imageMask: callback MUST be function"), !1;
        var c = null;
        e.src ? c = e : (c = new Image, c.src = e);
        var k = this;
        k.css("visibility", "hidden");
        d(c).load(function () {
            var e = null;
            k.each(function () {
                var k = d(this),
                    f = null,
                    a, l = c;
                a = d(this);
                var m;
                m = a.attr("id") ? a.attr("id") : n++;
                m = "imageMask_" + m + "_canvas";
                var f = d("<canvas>").attr({
                    id: m,
                    "class": a.attr("class"),
                    style: a.attr("style"),
                    width: l.width,
                    height: l.height
                }).css("visibility", "").insertAfter(a)[0],
                    g = f.getContext("2d");
                null == e && (a = f, g.drawImage(c, 0, 0), l = g.getImageData(0, 0, a.width, a.height), g.clearRect(0, 0, a.width, a.height), e = l);
                var b = new Image;
                b.src = d(this).attr("src");
                d(b).load(function () {
                    var a = 1,
                        a = b.width > b.height ? f.height / b.height : f.width / b.width;
                    g.drawImage(b, 0, 0, b.width, b.height, 0, 0, b.width * a, b.height * a);
                    for (var a = e, c = g.getImageData(0, 0, f.width, f.height), h = 0; h < c.data.length; h += 4) c.data[h + 3] = a.data[h + 3];
                    g.putImageData(c, 0, 0);
                    k.remove();
                    d.isFunction(j) && j(f)
                })
            })
        });
        return this
    }
})(jQuery);
 
 
 
 
$( document ).ready( function() {
            $( ".mySelector" ).imageMask( "mask.png", function( $canvas ) {
                console.log( 'test', $canvas );
            } );
        } );
		</script>
 
</head>
<body>
<img src="image.jpg" class="mySelector"/>


<div class="mySelector"><img src="image.jpg"/></div>
</body>
</html>

post-252562-0-76604500-1391530799_thumb.

post-252562-0-52731600-1391530802_thumb.

Z tego co wiem, mapy są dla obrazków, nie dla DIVów. Może napisz w jakim celu byś to chciał, bo może da się to inaczej ugryźć.

Potrzebuję to do slidera bo stara metoda “-webkit-mask-image” nie działa na ie i mozilla. Teraz muszę ogarnąć ten kod w jquery i podstawić 

No ale to dlaczego chcesz przypisać maskę do slidera a nie do obrazka? Nawet jak masz ich więcej, to selektorem powinien być obrazek.

bo mój slider ma strukturę taką  <div id=“slider”><div data-thumb="/images/slides/road_th.jpg" data-src="/images/slides/road.jpg" ></div>…</div>  i nie działa na nim ten kod jquery

No i tu jest pies pogrzebany. A ta mapa jest taka sama dla wszystkich slajdów, czy inna dla każdego. Jeżeli to pierwsze, to jednym z wyjść jest dodanie przeźroczystego obrazka - nawet 1px na 1px png może być, rozciągając go do wymiaru slajdera - powyżej tych wszystkich slajdów (wyższy z-index) i dodanie do niego tej mapy. Jeżeli opcja nr dwa, to najszybsza by była zmiana wtyczki slajdera … chyba że jeszcze ktoś coś innego wymyśli.