адаптивный бэкграунд для конкретного элемента

NikroVir

Извращённый отшельник
Регистрация
27 Апр 2008
Сообщения
346
Реакции
117
Суть вот в чём:
Использую Для просмотра ссылки Войди или Зарегистрируйся для подбора цвета бэкграунда. Но плагин рассчитан на подбор бэкграунда для родительского элемента, в котором находится картинка. Дабы в вёрстке небыло костылей, а структура иначе не позволяет, нужно сделать так, чтобы бэкграунд задавался для указанного мной элемента (в примере для класса .feed_content).

В js и jq не бум-бум, поэтому нужна ваша помощь, товарищи!

Тут можно найти очень упрощённый пример вёрстки: Для просмотра ссылки Войди или Зарегистрируйся
 
Плагин принимает опции, одна из них parent, это уровень родителя для которого будет применяться фон. Я внес изменения и теперь кроме уровня родителя можно передать класс внутри родителя, к которому будет применяться плагин. Выглядит это так:

$(document).ready(function(){
$.adaptiveBackground.run({ parent: ".feed_content" });
});

Что изменилось? Если в parent передается значение с типом string значит ищем класс (который передан в parent) внутри родителя, иначе делаем все как и раньше по документации.

Для просмотра ссылки Войди или Зарегистрируйся
Пример: Для просмотра ссылки Войди или Зарегистрируйся


И кстати, если будете подставлять свои картинки в пример учтите что вы должны дать разрешения на доступ к выбранным ресурсам с сервера - Для просмотра ссылки Войди или Зарегистрируйся
В документации плагина написано:

Enabling CORS on S3

To enable CORS for images hosted on S3 buckets, follow the Amazon guide Для просмотра ссылки Войди или Зарегистрируйся; adding the following to the bucket's CORS configuration:

<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
For all images, you can optionally also include a cross-origin attribute in your image. This is not absolutely necessary since the anonymous origin is set in the Javascript code, but kudos to you for being a super-developer.

<img src="/image.jpg" data-adaptive-background cross-origin="anonymous"/>

Но это нужно только если картинки не на том же домене на котором вы запускаете скрипт
 
Последнее редактирование:
Назад
Сверху