0

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

我正在尝试使用jQuery jquery-image-scale 插件

谁能帮我将以下空值更改为名为“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>
4

2 回答 2

1

这是使用parent_css_selector参数的地方:

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();
        }

向上看代码,我们看到的images是 jQuery 链,parents()是一个 jQuery 方法,它获取当前匹配元素集中每个元素的祖先,可选地由选择器过滤

也就是说,如果没有您的 HTML 标记和您应用插件的选择器,就不可能回答您的问题,但这些信息应该是一个很好的起点。


编辑:您似乎在定义 DOM 元素之前初始化了插件。您可以将<script>标签移到 HTML 下方,但常见的技术是要求 jQuery 等到HTML 准备好

jQuery(function($){
    $('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
    });
});
于 2013-08-27T12:37:20.740 回答
1

我猜你需要的是parent_css_selector: "abc"什么?

假设它会说parent_selector您是否需要“。”,而“abc”是图像在 DOM 中的直接父级的类名。

于 2013-08-27T12:18:20.103 回答