Jquery คลิกที่รูปเล็กแล้วให้แสดงรูปใหญ่ มีปัญหาเกิดขึ้นที่รูปแรก มันไม่แสดงครับ

กระทู้คำถาม

Jquery คลิกที่รูปเล็กแล้ว ให้แสดงรูปใหญ่ มีปัญหาเกิดขึ้นที่รูปแรก มันไม่แสดงครับ
ดูรูปก่อนครับมันเป็นตามรูปครับ

https://i.ibb.co/F4SLd9D/Click-Img.gif

ดู Code ตามนี้ครับ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <style>
        .thumbnails img{
            width: 100px;
            height: 70px;
            margin-top: 10px;
        }
        #largeImage{
            height: 300px;
            margin: 10px;
        }
        #description{
            margin: 5px;
            padding: 5px;
            text-align: center;
        }
        .main{
            width: 700px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid black;
            border-radius: 10px;
        }
        footer{
            font-size: 24px;
            background-color: #A3A3A3;
            color: green;
            padding: 5px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="thumbnails">
        <img src="https://www.homeest.com/photo/2014/08/06/homeEST_1407311286_4946.jpg?v=8" class="thumb" alt="บ้าน">
        <img src="https://homeest.com/photo/2014/07/19/homeEST_1405759293_5032.jpg" class="thumb" alt="xx">
        <img src="https://homeest.com/photo/2014/07/19/homeEST_1405759294_1340.jpg" class="thumb" alt="ทะเลสาบ">
        <img src="https://homeest.com/photo/2014/07/19/homeEST_1405759294_2286.jpg" class="thumb" alt="ทุ่งดอกไม้">
        <img src="https://homeest.com/photo/2014/07/19/homeEST_1405759294_4709.jpg" class="thumb" alt="ชายหาด">
        <img src="https://homeest.com/photo/2014/07/19/homeEST_1405759293_5977.jpeg" class="thumb" alt="บนเขา">
        </div>
    <img src="https://www.homeest.com/photo/2014/08/06/homeEST_1407311286_4946.jpg?v=8" id="largeImage">
    <footer>
        <div id="description"></div>
    </footer>
    </div>
</body>
</html>
<script>
    $(function(){
        $('.main .thumbnails img').click(function() {
        var thumbSrc = $('.thumb').attr('src');
        var largeSrc = $('#largeImage').attr('src');
        $('#largeImage').attr('src', $(this).attr('src').replace(thumbSrc, largeSrc));
        $('#description').html($(this).attr('alt'));
        });
    });
</script>

แก้ไขข้อความเมื่อ