jquery - 初心者の jQuery スライド ショー ライト ボックス エラー

Question

ここに私のHTMLがあります

<div id="images">
<img alt="" class="show" src="./images/Cars (1).jpg" />
<img alt="" src="./images/Cars (2).jpg" />
<img alt="" src="./images/Cars (3).jpg" />
<img alt="" src="./images/Cars (4).jpg" />

</div>

これが私のJavaScriptとCssです

$(function(){
                slideShow();
                $('img').click(function(){
                    $('<div>',{
                        id : "overlay"
                    }).css({'width':'100%' 
                    ,'height':'100%',
                    'position':'fixed',
                    'top':'0',
                    'left':'0',
                    '-z-index':'1',
                    'background' : '#000',
                    'opacity' : '.6'}).appendTo("body");

                    $('<img>',{
                        src : $(this).attr(src)
                    }).css({
                        '-z-index' : '1001',
                        'width':'100%',
                        'height':'100%',
                    }).appendTo("#overlay");
                });
            });
            function slideShow(){
                var current = $('.show');
                var next = current.next().length ? current.next() : current.siblings().first();
                current.hide().removeClass('show');
                next.fadeIn().addClass('show');
                setTimeout(slideShow, 3000);
            }

スライドショーが正常に機能し、overlay 要素が本文に追加されます。しかし、#overlay に img タグが追加されていません。エラーは何ですか?