To achieve the desired functionality of displaying a larger image on the right side when a thumbnail is clicked without hiding all images for better performance, you can use JavaScript to dynamically change the source of the larger image. Here’s an updated version of your code:
htmlhtml>
<html>
<head>
<title>Photo Albumtitle>
<style>
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover, .images:visited, .images:active {
border: 4px solid #009EE0;
}
.table {
width: 60%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
.main-image {
float: left;
width: 60%;
height: 100%;
padding-left: 20px;
}
.main-image img {
max-width: 100%;
max-height: 100%;
}
style>
head>
<body>
<div class="table">
<div class="images" onclick="showImage('http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg')">
<img src="http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
div>
<div class="images" onclick="showImage('https://www.drphillipscenter.org/resources/images/default.jpg')">
<img src="https://www.drphillipscenter.org/resources/images/default.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
div>
div>
<div class="main-image">
<img id="mainImage" src="" alt="Selected Image" title="Selected Image">
div>
<script>
function showImage(imageUrl) {
document.getElementById('mainImage').src = imageUrl;
}
script>
body>
html>
In this updated code, the JavaScript showImage function is called when a thumbnail is clicked. This function changes the src attribute of the larger image (#mainImage) to the URL of the clicked thumbnail image, displaying it on the right side. This way, only one image is displayed at a time, improving performance by not hiding all images.
المزيد من المعلومات
لإضافة المزيد من المعلومات وتحسين تجربة المستخدم، يمكنك استخدام تقنية مثل تحميل الصور تلقائيًا عند الحاجة بدلاً من إخفائها جميعًا مسبقًا. يمكنك أيضًا استخدام تأثيرات تحويل الحجم لتجنب استخدام العرض الكامل للصور عند عرضها بحجم أكبر. علاوة على ذلك، يمكنك إضافة تأثيرات تحويلية لتحسين تجربة المستخدم، مثل التحولات والتلاشي عند تغيير الصور.
إليك تعديل على الكود لتحميل الصور تلقائيًا عند الحاجة:
htmlhtml>
<html>
<head>
<title>Photo Albumtitle>
<style>
.images {
float: left;
margin-right: 10px;
border: 1px solid silver;
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 50px;
border: 4px solid transparent;
}
.images img {
height: 100px;
width: auto;
}
.images:hover, .images:visited, .images:active {
border: 4px solid #009EE0;
}
.table {
width: 60%;
height: 100%;
border-right: 1px solid silver;
float: left;
}
.main-image {
float: left;
width: 60%;
height: 100%;
padding-left: 20px;
display: none;
transition: opacity 0.5s ease;
}
.main-image img {
max-width: 100%;
max-height: 100%;
}
.show {
display: block;
}
style>
head>
<body>
<div class="table">
<div class="images" onclick="showImage('http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg')">
<img src="http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
div>
<div class="images" onclick="showImage('https://www.drphillipscenter.org/resources/images/default.jpg')">
<img src="https://www.drphillipscenter.org/resources/images/default.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
div>
div>
<div class="main-image" id="mainImageContainer">
<img id="mainImage" src="" alt="Selected Image" title="Selected Image">
div>
<script>
function showImage(imageUrl) {
var mainImage = document.getElementById('mainImage');
var mainImageContainer = document.getElementById('mainImageContainer');
mainImage.src = imageUrl;
mainImageContainer.classList.add('show');
setTimeout(function() {
mainImageContainer.style.opacity = 1;
}, 50); // Delay to ensure smooth transition
}
script>
body>
html>
في هذا التعديل، تم إضافة فئة CSS جديدة (show) لعنصر الصورة الرئيسي (main-image) لجعله مرئيًا، بعد تعيين src للصورة الرئيسية. تمت إضافة تأثير transition لتحسين التجربة عند تغيير الصور.
