JQuery Image Gallery не всегда работает, и IE трагедия - решить скрипку - PullRequest
Новая
       5

JQuery Image Gallery не всегда работает, и IE трагедия - решить скрипку

1 голос
/ 30 июня 2011

Эта функция использует JQuery и пользовательский интерфейс для постепенного исчезновения изображений в галерее.Я получаю очень странные результаты.

  1. В начале происходит двойная вспышка первого изображения
  2. Последнее изображение не исчезает на первом изображении правильно
  3. Миниатюра (.thumbs) должна анимироваться с текущей анимации и сбрасывать таймер
  4. Неправильно работает в IE 8 (возможно, в других)

Я установилfiddle.

http://jsfiddle.net/TGgc5/57/

Код должен использовать функции классов добавления и удаления, поскольку вместо этого он будет управляться переходами CSS3 на мобильных устройствах. 

$(document).ready(function(){
    var slideShow;
    var slidefirst = $('.thumbs:first');
    console.log(slidefirst);

    $('.thumbs').click(function() {
        var final = $('.cornerimg').last().attr('id').replace('t','');
        var slide = $(this).attr('id').replace('t','');
        $('.cornerimg').removeClass('cornerimgfocus',2000);
        $('#P' + slide).addClass('cornerimgfocus',2000);
        clearTimeout(slideShow);
        slideShow = setTimeout(function() {
            if ($('#P' + slide) == final) {
                $(slidefirst).click();
            }
            else {
                $('.thumbs').click();
            }

        }, 5000);

    });
    $('.thumbs:first').click();
});

Любойидеи?

Чудесные

1 Ответ

1 голос
/ 30 июня 2011

Простое решение

Если кому-то еще понадобится галерея изображений JQuery, которая по умолчанию использует переходы CSS3 для любого устройства, которое поддерживает эти блестящие новые функции. Вам нужен плагин modernizr, чтобы ваш код перехода не попадал в обычный CSS. Затем иметь другой класс CSS, который вы добавляете ко всем изображениям в слайд-шоу, только если modernizr обнаруживает CSS3. Этот класс будет содержать информацию о переходе CSS3, и только добавляемый сейчас не будет загружать устройства без CSS3. Затем создайте третий курс CSS, в котором вы хотите перейти, и примените тот же логин, используя (в этом случае JQuery addClass / removeClass. 

$(document).ready(function(){
    // Standard JQuery Slideshow
    if(!Modernizr.csstransitions) {
    $('.cornerimg').hide(); // Hide all images
    var slideShowTO, slide; // Global vars

    $('.thumbs').click(function() {
    if (slide) $('#P' + slide).fadeOut(2000);
    slide = $(this).attr('id');
    $('#P' + slide).fadeIn(2000);
    clearTimeout(slideShowTO);
    slideShowTO = setTimeout(function() {
        var next = $('#' + slide).next();
        if (next.hasClass('thumbs'))
            next.click();
        else
            $('.thumbs:first').click();

    }, 4000);

    });
    }
    // CSS Transitions Slideshow
    else if(Modernizr.csstransitions) {
    $('.cornerimg').addClass('cornerimgcss'); 
    var slideShowTO, slide; // Global vars

    $('.thumbs').click(function() {
    if (slide) $('#P' + slide).removeClass('cornerimgfocus');
    slide = $(this).attr('id');
    $('#P' + slide).addClass('cornerimgfocus');
    clearTimeout(slideShowTO);
    slideShowTO = setTimeout(function() {
        var next = $('#' + slide).next();
        if (next.hasClass('thumbs'))
            next.click();
        else
            $('.thumbs:first').click();

    }, 4000);

    });
    }
$('.thumbs:first').click();
});

Marvelous

...