【WordPress】画像ズームプラグインWP Image Zoom

WordPress

January 11, 2018

WP Image Zoom
WP Image Zoomは画像ズームプラグインです。4タイプのズーム(インナーズーム、ラウンドレンズ、スクエアレンズ、アウターズーム)、アニメーションイージングエフェクト、フェード効果、ズームレンズのサイズ、ボーダーカラー、ボーダーサイズ、シャドー、丸みのあるコーナーなど設定が可能。

WP Image Zoomプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> WP Image Zoomを検索
有効化にするとWP Image Zoomが追加されます。

WP Image Zoom

WP Image Zoom
Zoom SettingsではStep2を見本にレンズの形状を選択します。

General

Cursor Type カーソルタイプ
Animation Easing Effect アニメーションイージングエフェクト
Zoom Level ズームレベル

WP Image Zoom
Lens

Lens Size レンズのサイズ
Border Thickness ボーダー厚さ
Border Color ボーダーの色
Fade Time フェードタイム
Tint 色合い
Tint Color 淡彩
Tint Opacity 色合いの不透明度

WP Image Zoom
Zoom Window

Zoom Window Width ズームウィンドウの幅
Zoom Window Height ズームウィンドウの高さ
Positioning ポジショニング
Distance from the Main Image メイン画像からの距離
Border Thickness ボーダー厚さ
Border Color ボーダーの色
Shadow Thickness 影の厚さ
Rounded Corners 丸角
Fade Time フェードタイム

WP Image Zoom
Custom Text

Text Align テキストの整列

WP Image Zoom
General Settings

Enable the zoom on WooCommerce products WooCommerce製品のズームを有効にする
Exchange the thumbnail with main image on WooCommerce products WooCommerce製品のメイン画像とサムネイルを交換する
Enable the zoom on WooCommerce category pages WooCommerceカテゴリページのズームを有効にする
Enable the zoom on mobile devices 携帯端末のズームを有効にする

エディタ

WP Image Zoom
ビジュアルにImage Zoomが追加されます。

WP Image Zoom
メディアから追加する画像を選択し、サイズをフルサイズ以外のものにし、画像選択状態でImage Zoomをクリックするとクラスにzoooomが追加されます。

ビジュアルにせずメディアから画像を追加し、zoooomをクラスに追加するだけでも使用可能。
Example:

<img src="img/instagram_gallery.jpg" alt="" width="960" height="720" class="alignnone size-full wp-image-231 zoooom" />

WP Image Zoom

Latest Posts

Related Posts