プラグインのダウンロード&読み込み

プラグインを下記URLからダウンロードするかCDNから使用します。

malditoprotozoo/picBeautifier-3000

使用するのは「src/app.js」です。
使用するHTMLでjQueryと一緒に読み込みましょう。 

  1. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  2. <script src="https://cdn.rawgit.com/malditoprotozoo/picBeautifier-3000/dev/src/app.js"></script>

使用方法

HTMLは下記のようにfigureで囲む形でimgを配置します。

  1. <figure>
  2. 	<img src="img/01.jpg">
  3. </figure>

JavaScriptです。
たとえばホバーでセピア調にしたい場合下記のようにします。 

  1. <script type="text/javascript">
  2. (function($) {
  3. 	$(function() {
  4. 		objFunctions.applyFilteryHover('figure', 'sepia', '100')
  5. 	});
  6. })(jQuery);
  7. </script>
イメージホバー表示例

拡大スケールの場合はhoverLargeScaleを使用します。

  1. objFunctions.hoverLargeScale('figure', '1.3');

2つ記述することで、セピア調にしつつ拡大させることもできます。

  1. objFunctions.applyFilteryHover('figure', 'sepia', '100');
  2. objFunctions.hoverLargeScale('figure', '1.3');

その他にもいろいろエフェクトがありますので、下記デモページをご確認ください。

Pic Beautifier Demo