ما هي أفضل وحدة JQuery "انقر فوق صورة مصغرة وتغيير وحدة الصورة الرئيسية"؟
-
03-07-2019 - |
سؤال
إليك ما لدي (تم إنشاؤه ديناميكيًا ، إذا كان ذلك يحدث فرقًا):
- قائمة الصور
- تعليق لكل صورة
- صورة مصغرة لكل صورة
يجب أن يتم تحميل الصفحة مع صورة واحدة كاملة الحجم وجميع الصور المصغرة. عندما ينقر المستخدم على صورة مصغرة ، تُظهر الصورة بالحجم الكامل تلك الصورة الجديدة مع التسمية التوضيحية. إذا انقروا على صورة مصغرة أخرى ، فإن الصورة (والتسمية) تتغير مرة أخرى.
انها ليست معقدة للغاية. لقد اخترقت حلاً معًا قبل بضعة أشهر ، لكنني بحاجة إلى القيام بذلك مرة أخرى ، وأنا أنظر إلى هذا الرمز المجني وأعتقد أنه يجب أن يكون هناك طريقة أفضل (ومعرفة jQuery ، قام شخص آخر بذلك بالفعل ، وفعلت ذلك انها جيدا).
أفكار؟ روابط؟
شكرًا!
المحلول
إليك واحدة تبدو جميلة ومطابة في jQuery: منزلق الصور
وهنا آخر أحبه بشكل أفضل قليلاً:غاليريا
نصائح أخرى
معظم الإجابات هنا مثل إطلاق ذبابة مع شريعة !!
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});
هذا كل ما تحتاجه .. 4 أسطر من الكود.
انظر هنا : معرض في 4 خطوط
هل جربت Lightbox؟ http://leandrovieira.com/projects/jquery/lightbox/
بناء قبالة إجابة Krembo99 التي ربطها هنا, ، أردت أن أشارك الحل لأنني قمت بالفعل بتحميل مئات الصور عندما طلب موكلي ميزة مثل هذه. مع وضع ذلك في الاعتبار ، من خلال إضافة بعض الخطوط الإضافية إلى الرمز المقدم ، تمكنت من الحصول على حل يناسب المعلمات الخاصة بي.
كنت أعمل أيضًا مع صور أصغر أيضًا ، لذلك لم أكن بحاجة للذهاب من خلال إنشاء إصدارات صغيرة وكبيرة من نفس الملف.
$('.thumbnails img').click(function(){
// Grab img.thumb class src attribute
// NOTE: ALL img tags must have use this class,
// otherwise you can't click back to the first image.
var thumbSrc = $('.thumb').attr('src');
// Grab img#largeImage src attribute
var largeSrc = $('#largeImage').attr('src');
// Use variables to replace src instead of relying on file names.
$('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
$('#description').html($(this).attr('alt'));
});
إليكم كيف تبدو HTML الخاصة بي.
<img src="path/to/file1.jpg" id="largeImage" class="thumb">
<div id="description">1st image Description</div>
<div class="thumbnails">
<img src="path/to/file1.jpg" class="thumb" alt="1st image description">
<img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
<img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
<img src="path/to/file4.jpg" class="thumb" alt="4th image description">
<img src="path/to/file5.jpg" class="thumb" alt="5th image description">
</div>
http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/
A page with 9 different photo slideshows in jQuery ready to use
Check out my galleria implementation: Garden design Landscaper in Essex Gallery
Try Galleriffic, it has everything you need.
A lot of these scripts are out of date and don't work for me plus require a set of different images for thumbnails. I had a serious hunt around and found something very light which is plain js, no need for jquery.
<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>
</head>
<body>
<div id='product-image-wrap'>
<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>
<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>
</div>
<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>
</body>
</html>