Question

jQuery jCapSlide implementation - multiple elements with the same attributes, how to do a Javascript Array?

我正在尝试使用jCapSlide，并且基本上使用stackoverflow响应中的代码来快速扫描我的div（或尝试）。我几乎模仿了代码，但它不起作用。想法？

HTML

<div id="image-wrapper">
    <div class="panel jSlide all ed w300 marg">
                <img src="http://lorempixel.com/300/200" />
                <div class="jOverlay"></div>
                <div class="jCaption">
                    <h6>Test</h6>
                    <div class="jText">
                        <p>test test test</p>
                    </div>
                </div>
            </div>
    </div>

的jQuery

<script src="js/jquery.capSlide.js"></script>

$(function () {
        $('#image-wrapper').find('img').capslide({
            caption_color   : 'white',
            caption_bgcolor : '#005ca7',
            overlay_bgcolor : 'orange',
            border          : '',
            showcaption     : true
        });
    });

的JScript

(function($) {
$.fn.capslide = function(options) {
    var opts = $.extend({}, $.fn.capslide.defaults, options);
    return this.each(function() {
        $this = $(this);
        var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

        if(!o.showcaption)  $this.find('.jCaption').css('display','none');
        else $this.find('.jText').css('display','none');

        var _img = $this.find('img:first');
        var w = _img.css('width');
        var h = _img.css('height');
        $('.jCaption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
        $('.jOverlay',$this).css('background-color',o.overlay_bgcolor);
        $this.css({'width':w , 'height':h, 'border':o.border});
        $this.hover(
            function () {
                if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                $('.jOverlay',$(this)).show();
                else
                $('.jOverlay',$(this)).fadeIn();
                if(!o.showcaption)
                    $(this).find('.jCaption').slideDown(500);
                else
                    $('.jText',$(this)).slideDown(500); 
            },
            function () {
                if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                $('.jOverlay',$(this)).hide();
                else
                $('.jOverlay',$(this)).fadeOut();
                if(!o.showcaption)
                    $(this).find('.jCaption').slideUp(200);
                else
                    $('.jText',$(this)).slideUp(200);
            }
        );
    });
};
$.fn.capslide.defaults = {
    caption_color   : 'white',
    caption_bgcolor : 'black',
    overlay_bgcolor : 'blue',
    border          : '1px solid #fff',
    showcaption     : true
};
})(jQuery);

无法弄清楚jCapSlide.js

0 个答案: