javascript - 为 jquery-image-scale 插件定义选择器

Question

(编辑:我终于放弃使用这个插件并使用 https://github.com/karacas/imgLiquid ，它更简单并且工作非常直接) 谢谢大家的帮助!!)

我正在尝试使用 jQuery jquery-image-scale plug-in .

谁能帮我将下面的空值更改为名为“abc”的 div 类？或者我必须提供脚本的其余部分吗？

(function ($) {
    $.fn.imageScale = function (params) {
        var _matched_elements = this;

        params = $.extend({
            /**
             * CSS selector used to get the image container against which the
             * image size will be calculated.
             *
             * Default to the image's immediate parent.
             */
            parent_css_selector: null,
            /**
             * Set to 'fit' or 'fill'. When set to 'fit', the image will scale
             * to fit inside it's parent container's bounds. When set to
             * 'fill', the image will fill it's parent container's bounds.
             */
            scale: 'fill',
            /**
             * Boolean. The image will automatically center itself if the
             * scale parameter is set to 'fill'. Set to false to disable this
             * feature. 
             */
            center: true,
            /**
             * Time in milliseconds. When set, images that are not already
             * cached by the browser will load hidden, then fade in. 0 to
             * disable.
             */
            fade_duration: 0,
            /**
             * Boolean. Whether to rescale images when the browser is resized.
             */
            rescale_after_resize: true
        }, params);

        parse_images(_matched_elements);
        if (params.rescale_after_resize) {
            $(window).resize(function () {
                parse_images(_matched_elements, true);
            });
        }

        function parse_images(images, skip_init) {
            images.each(function () {
                var image = $(this);
                if (params.parent_css_selector) {
                    var parent = img.parents(params.parent_css_selector);
                } else {
                    var parent = image.parent();
                }

                if (!skip_init) {
                    parent.css({
                        opacity: 0,
                        overflow: 'hidden'
                    });
                }

                if (parent.length) {
                    image.bind('load', function () {
                        scale_image(image, parent, params);
                    });
                    // Trigger load event for cache images.
                    var src = this.src;
                    // Webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
                    // Data uri bypasses webkit log warning (thx doug jones).
                    this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                    this.src = src;
                }
            });
        }

        function scale_image(image, parent, params) {
            image.removeAttr('width').removeAttr('height');
            image.css({
                'width': 'auto',
                'height': 'auto'
            });

            // Account for ancestors that are hidden to ensure we're getting
            // the correct sizes.
            var ancestor = image.get(0),
                hiddenAncestors = [];
            while (ancestor && ancestor.tagName != 'BODY') {
                if (ancestor.style.display == 'none') {
                    hiddenAncestors.push(ancestor);
                    ancestor.style.display = 'block';
                }
                ancestor = ancestor.parentNode;
            }

            var parent_width = parent.width(),
                parent_height = parent.height(),
                image_width = image.width(),
                image_height = image.height();

            resize_image();
            if (params.center) {
                reposition_image();
            }

            for (var i = 0; i < hiddenAncestors.length; i++) {
                hiddenAncestors[i].style.display = 'none';
            }

            show_image();

            function resize_image() {
                if (parent_width / image_width > parent_height / image_height) {
                    if (params.scale == 'fit') {
                        image.css('height', parent_height);
                    } else {
                        image.css('width', parent_width);
                    }
                } else {
                    if (params.scale == 'fit') {
                        image.css('width', parent_width);
                    } else {
                        image.css('height', parent_height);
                    }
                }
            }

            function reposition_image() {
                var new_width = image.width(),
                    new_height = image.height();

                image.css({
                    'margin-left': 0,
                    'margin-top': 0
                });

                if (new_width > parent_width) {
                    image.css('margin-left', '-' + Math.floor((new_width - parent_width) / 2) + 'px');
                }
                if (new_height > parent_height) {
                    image.css('margin-top', '-' + Math.floor((new_height - parent_height) / 2) + 'px');
                }
            }

            function show_image() {
                if (params.fade_duration > 0 && !image.get(0).complete) {
                    parent.animate({
                        opacity: 1
                    }, params.fade_duration);
                } else {
                    parent.css('opacity', 1);
                }
            }
        }

        return this;
    }
})(jQuery);

我尝试过parent_css_selector: '.abc'，但没有成功。

已编辑(我需要完成的是仅对 div 类即“abc”应用效果)

html代码:

<script>
$('img').imageScale({
    parent_selector: '.abc', // Defaults to the image's immediate parent.
    scale: 'fill',
    center: true,
    fade_duration: 0, // Fading is disabled if set to 0.
    rescale_after_resize: true
});
</script>

<div id="wrapper">
  <div class="logo">
    <img src="logo.jpg" alt="" />
  <div class="abc">
    <img src="123.jpg" alt="" />
  </div>
</div>

Answer 1

我猜您需要的是 parent_css_selector: "abc"？

假设如果您需要“.”，它会显示“parent_selector”，并且“abc”是 DOM 中图像的直接父级的类名。