bhoodream/chameleon.js

A jQuery plugin for automatic content colorization.

chameleon.js's Issues

blur_overlay is not defined

Hey! Great library!!

Any idea why I am receiving this exception when i try to apply the bluring feature?

I took the demo markup and JS exactly from your demo page.

here is the exception:

"ReferenceError: blur_overlay is not defined
    at Object.colorizeModeApply [as apply] (http://localhost:44300/Dashboard/Index:65:75)
    at toggleColorizeMode (http://localhost:44300/Scripts/jquery.chameleon.js:1098:57)
    at colorizeElem (http://localhost:44300/Scripts/jquery.chameleon.js:1204:17)
    at http://localhost:44300/Scripts/jquery.chameleon.js:1221:51
    at HTMLImageElement.load (http://localhost:44300/Scripts/jquery.chameleon.js:1060:25)
    at HTMLImageElement.dispatch (http://code.jquery.com/jquery-2.2.4.js:4737:27)
    at HTMLImageElement.elemData.handle (http://code.jquery.com/jquery-2.2.4.js:4549:28)"

here is the markup:

<script src="http://code.jquery.com/jquery-2.2.4.js"
        integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
        crossorigin="anonymous"></script>
<script src="~/Scripts/jquery.chameleon.js"></script>
<script src="~/Scripts/chameleonBlur.js"></script>

<div class="chmln ">
    <h2 class="chmln1">The Metamorphosis</h2>
    <blockquote class="chmln2">
        He was a tool of the boss, without brains or backbone.
        <cite class="chmln3">Franz Kafka</cite>
    </blockquote>
    <p class="chmln4">The Metamorphosis is a seminal work of fiction first published in 1915 by Franz Kafka, and has come to be appreciated and studied the world over for it’s power, insight and brutal simplicity.</p>
    <img class="chmln__img" src="/ClientResources/6/6_logosmall.png">
</div>
 
<script>


            var blur_mode = {
                "colorize_mode_name": "blur",
                "colorizeModeApply": function (mode_name, config, s, $elem, item_colors) {
                    config = config || {};
                    var color = item_colors[0] ? item_colors[0] : 'transparent',
                        img_css = config.img_css || '',
                        blur_val = Math.min(100, config.blur_val || 0),
                        opacity_val = Math.min(100, config.opacity || 0),
                        $blur = $(document.createElement('div')).addClass(blur_overlay).attr('style', 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;'),
                        $blur_img = $(document.createElement('img')).attr('src', s.$img.attr('src')).attr('style', 'position: absolute; filter: blur(' + blur_val + 'px); ' + img_css).attr('alt', 'chameleonBur image');
                    $blur.append($blur_img)
                    if (config.overflow_hidden) {
                        $blur.css({ 'overflow': 'hidden' });
                    }
                    if (config.modify_position) {
                        if ($elem.css('position') === 'static') {
                            $elem.attr('data-old_position', $elem.css('position')).css('position', 'relative');
                        }
                    }
                    if (config.events) {
                        if (typeof config.events === 'object') {
                            $elem.on(config.events)
                        } else if (typeof config.events === 'function') {
                            config.events($elem, $blur, item_colors);
                        }
                    };
                    $elem.prepend($blur);
                    if (config.modify_position) {
                        $blur.siblings().each(function (index, el) {
                            if ($(el).css('position') === 'static') {
                                $(el).css({ 'position': 'relative', 'z-index': 1 }).attr('data-old_position', 'static');
                            }
                        });
                    }
                },
                "colorizeModeRemove": function (mode_name, config, s, $elem, item_colors) {
                    var $blur = $elem.find('.' + blur_overlay);
                    if ($elem.attr('data-old_position')) {
                        $elem.css('position', $elem.attr('data-old_position')).removeAttr('data-old_position');
                    }
                    if (config.events) {
                        if (typeof config.events === 'object') {
                            $.each(config.events, function (e_name, e_handler) {
                                $elem.off(e_name, e_handler);
                            });
                        } else if (typeof config.events === 'function') {
                            config.events($elem, $blur, item_colors, true);
                        }
                    };
                    $blur.siblings()
                      .filter('[data-old_position]')
                      .each(function (index, elem) { $(el).css('position', ''); });
                    $blur.remove();
                }
            };
            $.fn.chameleon("registerColorizeMode", blur_mode);
            $(".chmln").chameleon({
                colorize_mode: {
                    "name": "blur",
                    "config": {
                        "img_css": "bottom: -25%; right: -25%; width: 90%; opacity: .5;",
                        "blur_val": 90,
                        "overflow_hidden": true,
                        "modify_position": true
                    }
                }
            });


</script>

Kindly provide an use case for a inexperianced client side developer.

I am a server side php developer, not proficient with css, jquery or js. I have tried to use Chameleon.js by trying to replicate the Demo, but still I have been unsuccessful.

e.g. in $(".chmln").chameleon(settings); I do not know what the settings variable holds. I tried to inspect the demo and view its source.

Could you add a simple example with a html, css, .js file?

Demo page does not appear

The https://vadimfedorov.ru/lab/chameleon-js demo page does not appear.

The connection has timed out
The server at vadimfedorov.ru is taking too long to respond.

• The site could be temporarily unavailable or too busy. Try again in a few moments.
• If you are unable to load any pages, check your computer’s network connection.
• If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.