jQuery greyScale не отображает оттенки серого и отображает неправильные изображения

Я использую этот плагин jQuery в оттенках серого. Пример страницы, страница разработчика.

Теперь эффект работает только в Internet Explorer. У меня есть три изображения на этой странице. Первые два не отображаются в оттенках серого — я всегда вижу их в цвете (с эффектом наведения или без него). Третье изображение в градациях серого, но если я наведу на него указатель мыши, я увижу изображение в градациях серого второго изображения.

Вот как я создаю функцию greyScale:

<script type="text/javascript">
    jQuery(function() {
        // fade in the grayscaled images to avoid visual jump
        jQuery("[class^='wp-image-'], [class*=' wp-image-']").hide().fadeIn(1000);
    });
    // user window.load to ensure images have been loaded
    jQuery(window).load(function () {
        jQuery("[class^='wp-image-'], [class*=' wp-image-']").greyScale({
            // call the plugin with non-defult fadeTime (default: 400ms)
            fadeTime: 500,
            reverse: false
        });
    });
</script>

Это вывод второго изображения в Firebug:

<div class="gsWrapper" style="position: relative; display: inline-block;">
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture2.jpg" title="Picture" class="size-full wp-image-317 alignnone" style="display: inline;">
</div>

Это вывод третьего изображения в Firebug:

<div class="gsWrapper" style="position: relative; display: inline-block;">
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/picture3.jpg" title="Picture 3" class="alignnone size-full wp-image-320" style="display: inline;">
    <canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
    <canvas style="left: 0px; position: absolute; top: 0px;" width="80" height="80" class="gsCanvas"></canvas>
    <canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>

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

Я попытался загрузить сценарии в functions.php с помощью wp_enque_script, чтобы избежать конфликтов jQuery. Также я поместил свой код jQuery ниже wp_head() в header.php и изменил свои вызовы здесь с $ на jQuery. В настоящее время я использую jQuery 1.7.2 (пробовал с 1.8.2 с тем же эффектом). Пробовал отключать все плагины, эффект тот же.

Теперь я сохранил страницу в Internet Explorer и открыл ее в Firefox. После этого страница работает. Кажется, это связано с рендерингом?

Изменить:

Так что плагин работает с canvas в FF. Каждое изображение должно иметь canvasimage:

<div class="gsWrapper" style="position: relative; display: inline-block;">
    <img width="80" height="80" alt="" src="http://www.adomain.com/wp-content/uploads/2012/04/image4.jpg" title="image4" class="alignnone size-full wp-image-1515" style="display: inline;">
    <canvas style="left: 0px; position: absolute; top: 0px; opacity: 1;" width="80" height="80" class="gsCanvas"></canvas>
</div>

В моем случае только последнее изображение имеет поле холста (здесь последнее изображение имеет все поля холста!). Таким образом, код добавляется к неправильным элементам. Плагин имеет следующий JS-код:

this.each(function(index) {
    $(this).wrap('<div class="gsWrapper">');
    gsWrapper = $(this).parent();
    // ...

Итак, сначала он оборачивает вокруг себя элемент, а затем снова обращается к нему. Возможно, ошибка в этих строках вместе с index?


javascript wordpress image jquery grayscale
person testing    schedule 01.10.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, я нашел ошибку. У домена был временный URL. Теперь сайт вышел в интернет и получил новый домен. Скрипт сделал прокси-запрос, а тут как-то добавился не к тому элементу.

Теперь я изменил ссылки в HTML на новый домен, и теперь он работает нормально. Тем не менее, прокси-запрос, кажется, терпит неудачу и должен быть улучшен:

$.getImageData({
    url: $(this).attr('src'),
    success: $.proxy(function(image) {
        can = greyScale(image, image.width, image.height);
        if ($options.reverse) { can.appendTo(gsWrapper).css({"display" : "block", "opacity" : "0"}); }
        else { can.appendTo(gsWrapper).fadeIn($options.fadeTime); }
      }, gsWrapper),
    error: function(xhr, text_status){
      // silently fail on error
    }
});
person testing    schedule 01.10.2012