圖像比較是一個簡單的插件,可讓您通過比較圖像前后的對比來展示產品和服務的功能。您可以通過簡碼或VC元素使用這款wordpress插件。

插件功能
- 從左到右或從上到下比較圖像
- 在所需位置設置起點比較點
- 在圖像的前后添加標簽
- 使用您自己的CSS進一步自定義
插件功能
您可以從左到右或從上到下比較圖像。為圖像添加標簽,以便客戶了解您的服務效率。更改比較點以獲得最大效果。使用您自己的CSS類進一步自定義它。

如何使用?
如果您需要一個簡單的圖像比較顯示,只有兩張照片并排顯示,那么這個簡單的短代碼就可以解決問題:
[images-comparison image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果希望選擇水平或垂直比較圖像的方式,則需要使用direction參數。水平表示您的比較點將在圖像之間左右移動。垂直意味著您的比較點將在圖像之間上下移動。默認為水平。
[images-comparison orientation="vertical" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果要更改兩個圖像之間的比較點的位置,可以使用??default_offset_pct參數。它的值可以在0到1之間。它定義了該點距左邊距(水平方向)或頂部距邊緣(垂直方向)的距離(以百分比為單位)。例如:0.5表示距邊距的50%,0.3表示距邊距的30%,0.8表示距邊距的80%。默認值為0.5。
[images-comparison orientation="vertical" default_offset_pct="0.4" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果希望為照片添加標簽,則可以使用before_label和after_label參數。前標簽用于圖像1,后標簽用于圖像2。
[images-comparison before_label="Before" after_label="After" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
如果希望為元素添加CSS類,則可以使用el_css參數。您可以添加用逗號分隔的類。
[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]
我可以添加自己的CSS嗎?
是的,您在VC元素中有一個專用字段,并且有一個用于簡碼的參數:
[images-comparison el_css="class_css" image_1="http://www.curlythemes.com/image1" image_2="http://www.curlythemes.com/image2"]