jQuery rollover الارتباك

Question

محاولة الحصول على rolovers الخاص بي لتغيير SRC على التمرير. هذا يعمل موافق، على الرغم من وجود خطأ. بعد النقر فوق صورة مصغرة، يمكن أن تحتوي SRC أحيانا على SRC الخطأ (لا تزال حالة التمديد حتى في Mouseout). وبعد للعثور على الخطأ، انقر فوق عدد قليل من الصور المصغرة والفتح قليلة، يجب أن ترى أن SRC Rollover لا يزال من أجل النقر عليها بالفعل. العرض التوضيحي لم يعد متاحا، آسف!

جيكيري -

function image_gallery (){

if ($('ul.thumbs').length > 0) {
    $('.gallery').each(function(){
        $('ul.thumbs li img:gt(0)').addClass('unselected');
        $('ul.thumbs li img:eq(0)').addClass('selected');

        function mouse_overs () {
            var unselected = $('li img.unselected');
            unselected.hover(function(){
                    var thumb = $(this);
                    thumb.attr('src',thumb.attr('src')
                           .replace(/([^.]*\d)\.(.*)/, "$1r.$2"));
                }, function(){
                      var thumb = $(this);
                  thumb.each(function(){
                      $(this).attr('src',$(this)
                           .attr('src').replace('r.jpg','.jpg'));
                  });
            });
        };
        mouse_overs();
        var img_main = $(this).find('img.main:first');
        $(this).find('ul.thumbs img').each(function(){
            $(this).click(function(){
                var thumb =  $(this);
                var src = thumb.attr('src');
                if ( src.indexOf('r.jpg') == -1) {
                     $(this).attr('src',thumb.attr('src')
                                .replace(/([^.]*)\.(.*)/, "$1r.$2"));
                }
                var selected = $('ul.thumbs li img.selected');

                // previous img remove r.jpg
                selected.attr('src',selected.attr('src')
                                    .replace('r.jpg','.jpg'));
                  selected.removeClass('selected');
                selected.addClass('unselected');

                //current thumb add class "selected", remove "unselected"
                thumb.addClass('selected');
                thumb.removeClass('unselected');
                mouse_overs();
                var rel = $(this).parent('a').attr('rel');
                img_main.fadeOut(500, function(){
                    img_main.attr('src', rel);
                    img_main.fadeIn('slow');
                });

                thumb.mouseout(function(){
                    var src = $(this).attr('src');
                    if ( src.indexOf('r.jpg') == -1) {
                        $(this).attr('src',thumb.attr('src')
                                      .replace(/([^.]*)\.(.*)/, "$1r.$2"));
                    }
                    else return false;
                });
            });
});
    });
   }
}

HTML:

<div class="gallery">
<img class="main" src="images/gallery/yes-campaign/NL1.jpg"/>
<ul class="thumbs">
        <li><a rel="images/gallery/yes-campaign/NL1.jpg"><img src="images/thumbs/yes-campaign/NL-1r.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL2.jpg"><img src="images/thumbs/yes-campaign/NL-2.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL3.jpg"><img src="images/thumbs/yes-campaign/NL-3.jpg"/></a></li>
        <li><a rel="images/gallery/yes-campaign/NL4.jpg"><img src="images/thumbs/yes-campaign/NL-4.jpg"/></a></li>
    </ul>
</div>

يتكرر هذا HTML أوقات مختلفة في جميع أنحاء الصفحة. تحتاج الدول إلى nl1r.jpg، nl2r.jpg إلخ. يتم تنظيم الصور في مجلدات، لذلك استخدم جميع أسماء الملفات المصورة نفس اتفاقية التسمية.

Answer 1

هل يمكنني اقتراح التعليمات البرمجية التالية بدلا من لك؟

$(function gallery (){

        var transparency = .5;
        var selectedClassName = 'selected';
        var imageFadeSpeed = 'fast';

        $('.gallery').each(function(i, gallery) {
            var $gallery = $(gallery);

            var $main = $gallery.find('.main');

            $gallery.find('.thumbs a')

                // image preloader
                .each(function(){
                    var tempImg = $('<img src="'+ $(this).attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body').hide();
                })

                .hover(function() {
                    if ($(this).is('.'+selectedClassName))
                        return;
                    $(this).children().css('opacity', 1);
                }, function() {
                    if ($(this).is('.'+selectedClassName))
                        return;
                    $(this).children().css('opacity', transparency);
                })

                .click(function(ev) {
                    ev.preventDefault();

                    var self = $(this);

                    $main.fadeOut(imageFadeSpeed, function() {                      
                        var tempImg = $('<img src="'+ self.attr('rel') +'" width="'+ $main.width() +'" />').appendTo('body');
                        var newHeight = tempImg.height();
                        tempImg.remove();

                        $(this)
                            .attr('src', self.attr('rel'))
                            .height(newHeight);

                        $(this).fadeIn(imageFadeSpeed);
                    });

                    $gallery.find('.'+selectedClassName)
                        .removeClass(selectedClassName)
                        .children()
                        .css('opacity', transparency);

                    self
                        .addClass(selectedClassName)
                        .children()
                        .css('opacity', 1);
                    return;
                })

                .children()
                .css('opacity', transparency)
                .end()

                .filter(':first')
                .addClass(selectedClassName)
                .children()
                .css('opacity', 1);
        });
});

لقد استبدلت صفحتك مبادلة على التحويل مع تغيير التعتيم الذي يقطع حمل الخادم ولكن يمكنك بسهولة استبدال هذه مع تبديل SRC. ستحتاج إلى استخدام الصور باستخدام "r.jpg" التي تنتهي فقط.

لقد انسحبت أيضا بعض متغيرات التكوين حتى تتمكن من اللعب حول الأشياء قليلا.

Answer 2

على الرغم من أنني أعتقد أن مات فعلت وظيفة رائعة مع البرنامج النصي (+1 لذلك)، إلا أنني ما زلت أوصي باستخدام GalleryView Plugin. (التجريبي هنا).

---

ما زلت أتعلم كذلك، لذلك قد لا أكون صحيحة في افتراضاتي أدناه، لذلك لا تتردد في تصحيح لي إذا كنت مخطئا. ولكن بعد إلقاء نظرة أخرى على التعليمات البرمجية الخاصة بك، أردت إضافة هذه التعليقات:

• يبدو أن وظيفة Mouse_overs الخاصة بك لإصلاح الفئات "غير المحددة" الأولي. أفضل طريقة حولها ستكون لاستخدام jQuery's "يعيش"معالج الأحداث. بهذه الطريقة عند تغيير الفصل المحدد الخاص بك إلى غير محدد، أو العكس، سيتم تحديث الحدث المباشر (ملاحظة: التحويم غير مدعوم مع الإصدار الحالي من JQUERY، لذلك يجب عليك استخدام Mouseover و Mouseout) . يبدو أيضا أن الجزء الفحلي من التحويم يسمى 3 مرات والتي قد تكون ذات صلة أيضا.
• Regex المستخدمة في وظيفة استبدال لا تعمل بشكل صحيح. بعد النقر فوق صورة مصغرة لتبديل الصورة، لاحظت أنه بمجرد أن تتمكن من وظيفة Mouseout (والتي هي من الإبهام. انتهى الأمر مع عنوان URL هذا "http://staticrrrrrrrrrrr.yourdomain.com/someimage.jpg.". أنا لا أعرف regexp الخاص بي جيدا، لذلك لا يمكنني مساعدتك في إصلاح هذا.
• بدلا من تعديل عنوان URL، سيكون من الأسهل بكثير القيام به كما اقترح مات واستخدام العتامة، ولكن إذا كنت ترغب في استخدام صورة مختلفة، فقد قمت بتخزين عنوان URL في سمة IMG الخاصة ب IMG وإيقاف تشغيله بهذه الطريقة، ثم سوف كن أقل شيئ لمشكلة تحدث مع عنوان URL.