Imgcolr grabs image color

(0.0)
0
Wersja: 1.0.1
Numer wersji wtyczki
Dokumentacja
Sprawdź wszystkie opcje jakie oferuje plugin
Strona wtyczki
Oficjalna witryna wtyczki
Github
Repozytorium Github
Wersja jQuery: jquery >=1.7.2
Wersja jQuery z którą współpracuje plugin
Licencja: MIT
Licencja
Zobacz więcej
Imgcolr to plugin umożliwiający pobranie dominującej barwy obrazu.
W prosty sposób można np. dostosować tło strony www do aktualnie wyświetlanego obrazu. Minimalna wersja biblioteki jQuery to 1.7.2.
Tagi
Instalacja
  • Biblioteki
  • HTML
  • JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="imgcolr.html5.min.js"></script>
<div class="ctrl">
	<input type="url" id="img-url" placeholder="http://jquery.netid.pl/media/sample/450x600/1.jpg" />
	<button class="btn btn-primary" id="btn">Render</button>
</div>
<div class="img-box">
	<img id="img" src="http://jquery.netid.pl/media/sample/450x600/1.jpg" alt=""/>
</div>
(function ($) {

  var imgUrl = $('#img-url');
  var imgBox = $('.img-box');

  $('#btn').on('click', function () {
    var url = imgUrl.val().trim();
    if (!url) {
      url = imgUrl.attr('placeholder');
    }

    $('img', imgBox).remove();
    $('<img />').
        appendTo(imgBox).
        attr('src', url).
        imgcolr(function (img, color) {
	          $('body').css("background", color);
        });
  });

})(jQuery);
Demo
Pobierz demo
lub zobacz wersję on-line
mobile