<!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>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 03
Load balance : Server 03
