1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

[Решено] Проигрывать gif изображения по клику

Главные вкладки

Аватар пользователя mozh mozh 10 августа 2015 в 11:13

Всем привет, создал поле изображение в типе материала. В данной поле можно вставлять гиф анимацию, но когда это поле проходит через Стиль, гифка ломается, можно ли как-то отменить применения стиля изображения для гиф.
Нашел патч но он видимо для 6-го дурпала, у себя модуля imagecache не нашел https://www.drupal.org/files/issues/imagecache-gif_0.patch

UPD задача изменилась, решение ниже в комменте моем

Комментарии

Аватар пользователя mozh mozh 10 августа 2015 в 12:19

"ХулиGUN" wrote:
и если это gif стиль нужно применить к каждому слайду

впринципе хватило бы просто пропустить гифку не меняя её стиль.
Патч для модуля ядра image?

Аватар пользователя Nikit Nikit 10 августа 2015 в 13:41

1. Использовать ImageMagiсk, вместо gd2
2. Использовать как указано выше hook_image_styles_alter
3. Переопределить вывод поля, для gif показывать original

Аватар пользователя mozh mozh 10 августа 2015 в 16:19

не понятно как это должно работать
в Общем создал шаблон для поля field--field_image_image.tpl.php (поле называется field_image_image)
в шаблоне делаю так

<?php$element[0]['#image_style'] = '50_on_50';
dpm($element);?>

смотрю вывод изменился

но изображение все равно оригинальное выводится

через hook_image_styles_alter получаю следующую инфу о текущих стилях и как быть дальше

ImageMagiсk требует какуе-то библиотеку на хостинге

Аватар пользователя mozh mozh 7 сентября 2015 в 13:03

Задача изменилась, нужно гифки проигрывать по клику
В общем решил так:
1. Прогоняем все изображения через стиль 840px на auto height, в общем неважно каким
2. далее такой скрипт, который по клику на изображение просто подменяет src картинки

$(function(){
$('.field-name-field-image-image .field-item img').click(function(){
        img_path = ($(this).attr("src"));//all path
        //if format image gif
        if(img_path.indexOf('.gif') !== -1){
                //if visible animate gif img
                if(img_path.indexOf('files/article_images') !== -1){
                        gif_path = img_path.replace("files/article_images", "files/styles/840_for_post/public/article_images");
                }else{ //visible static gif
                        gif_path = img_path.replace("files/styles/840_for_post/public/article_images", "files/article_images");
                }
                $(this).attr("src", gif_path);
        }
})
})

Добавим кнопочку play на изображение исходное и готово.
может кривой jquery, вроде работает

если одобрите
когда-нибудь оформлю в виде модуля с выбором типа материала, полей и т.д

Аватар пользователя mozh mozh 8 сентября 2015 в 12:27

доработал js, добавляет картинку кнопки play поверх гифки

$(function(){
$('.field-name-field-image-image .field-item img').each(function(){
        gif = ($(this).attr("src"));//all path
        if(gif.indexOf('.gif') !== -1){
                $(this).after("<span class='play-gif'></span>");
        }
})
        $('.field-name-field-image-image .field-item .play-gif').click(function(){
                img_path = ($(this).siblings("img").attr("src"));//all path
                //if format image gif
                if(img_path.indexOf('.gif') !== -1){
                //visible static gif
                if(img_path.indexOf('files/article_images') !== -1){
                        gif_path = img_path.replace("files/article_images", "files/styles/840_for_post/public/article_images");
                        $(this).css("opacity", 1);
                }
                else{ //if visible animate gif img
                        gif_path = img_path.replace("files/styles/840_for_post/public/article_images", "files/article_images");
                        $(this).css("opacity", 0);// делаем прозрачным слой кнопки play
                }
                $(this).siblings("img").attr("src", gif_path);
                }
        })
})
.field-name-field-image-image .field-item{
    position: relative;
}
.play-gif{
    background: url(../img/play.png) center no-repeat;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

поле будет выглядеть так

<div class="field field-name-field-image-image field-type-image field-label-hidden">
    <div class="field-items">
        <div class="field-item even"><img typeof="foaf:Image" src="/sites/default/files/styles/840_for_post/public/article_images/1_0.gif?itok=naKqDv2f" width="460" height="276" alt="">
        <span class="play-gif" style="opacity: 1;"></span></div>
        <div class="field-item odd"><img typeof="foaf:Image" src="/sites/default/files/styles/840_for_post/public/article_images/3_2.gif?itok=_FZ08L_s" width="320" height="200" alt="">
        <span class="play-gif" style="opacity: 1;"></span></div>
    </div>
</div>

демо

UPD понадобилось все фотки отображать в lightbox
что бы для гифок удалить ссылки, добавьте в js строки

if(gif.indexOf('.gif') !== -1){
        if($(this).children('a').length > 0){
                link = $(this).children('a');
                link.replaceWith(link.html());//delete link if colorbox or lightbox2
        }
        $(this).find('img').after("<span class='play-gif'></span>");
}