1. 程式人生 > >WordPress外掛實現圖片縮圖幻燈展示效果

WordPress外掛實現圖片縮圖幻燈展示效果

在使用WordPress製作企業網站的過程中,經常會因為要展示某個產品的細節效果圖,而需要在產品詳細頁中插入多張圖片。但是如果單純的把圖片一張張從上往下插入的話,對於使用者的閱讀體驗而言可能會大打折扣。好在WordPress有很多功能外掛,可以幫助我們很輕鬆的實現多樣化的相簿展示效果,今天就來介紹一下如何利用外掛實現產品縮圖幻燈展示。

 上面是大致的效果圖:

 現在實現的結構就是大圖下方有一系列的小圖片,點選的時候進行幻燈切換,過度效果可以在外掛中自行設定。在此我們需要用到兩個外掛,一個是大名鼎鼎的NextGEN Gallery,基本上推薦WordPress相簿外掛的文章都會提到它;第二個算是NextGEN Gallery的衍生產品,用於生成幻燈效果的

JJ NextGen JQuery Slider外掛。

 首先安裝好這兩個外掛。先在NextGEN Gallery中建立一個Gallery相簿圖集比如名稱為“demo”,並上傳若干相應的圖片,至於幾張合適,就要視乎幻燈中大圖的寬度能容納多少張縮圖及間隙的寬度總和了。

接下來我們記下這個Gallery相簿的ID號,比如demo圖集的ID號為8的話,那麼我們就可以在產品介紹頁面中插入以下JJ NextGen JQuery Slider的簡碼:

 [jj-ngg-jquery-slider gallery="8" width="524" height="350" controlnavthumbs="nextgen_thumbs" thumbsheight="40" thumbswidth="40" thumbscontainerheight="50" thumbsgap="10" ]

大致的解釋一下里面一些引數的意思:

1.gallery:其值指的是此處應用幻燈效果的NGG相簿ID號;

2.width和height:幻燈中大圖所佔區域的尺寸;

3.controlnavthumbs:以縮圖的形式進行幻燈導航切換控制;

4.thumbsheight和thumbswidth:縮圖的尺寸;

5.thumbscontainerheight:大圖下方縮圖容器的高度,需要比縮圖本身高度大一點;

6.thumbsgap:縮圖之間的間距,以px為單位;

JJ NextGen JQuery Slider外掛的引數還有很多,有興趣的朋友可以到外掛官網主頁進行深入瞭解,需要注意的是,為了效果上的整齊和美觀,相關的圖片儘量在上傳到相簿中之前,能把尺寸處理成一致。

相關推薦

WordPress外掛實現圖片幻燈展示效果

在使用WordPress製作企業網站的過程中,經常會因為要展示某個產品的細節效果圖,而需要在產品詳細頁中插入多張圖片。但是如果單純的把圖片一張張從上往下插入的話,對於使用者的閱讀體驗而言可能會大打折扣。好在WordPress有很多功能外掛,可以幫助我們很輕鬆的實現多樣化的

Qt QListWidget實現圖片列表

目標: 將本機中的多張圖片以縮圖的形式顯示在列表中 環境: 我們已經做好了選單欄和檔案選擇對話方塊。參考:http://blog.csdn.net/v_xchen_v/article/details/71524160 實現: 以縮圖列表展示圖片的功能寫在mymenu類的成員函式s

Apache httpd + php實現圖片訪問

Apache httpd + php + imagic 實現圖片縮圖訪問 環境:CentOS7, Apache httpd 2.4, php 5.4.16 實現思路 利用httpd的重寫規則把特殊的URL訪問對映到PHP指令碼,實現縮圖的返回。PHP利

週記6——css實現類似朋友圈九宮格完美展示

公司有在做一個類似qq空間的開發,發表說說避免不了的要有圖片展示。 產品提出的空間縮圖的展示類似*信朋友圈那種效果——圖片不變形、能看到中間部分。 這裡給出3種解決方案(jsbin地址失效時可複製程式碼到jsbin.com看效果): 1、 img + position + translate <!D

css實現類似朋友圈九宮格完美展示

公司有在做一個類似qq空間的開發,發表說說避免不了的要有圖片展示。 產品提出的空間縮圖的展示類似*信朋友圈那種效果——圖片不變形、能看到中間部分。 這裡給出3種解決方案(複製程式碼到jsbin.com即可看到效果): 1、 img + position + translate <!DOCTYPE htm

php實現按指定大小等比放生成上傳圖片的方法

/** * * *等比縮放 * @param unknown_type srcImage源圖片路徑∗@paramunknowntypetoFile 目標圖片路徑 * @param unknown_type maxWidth最大寬∗

php實現等比例生成圖片不失真

//等比例生成圖片縮圖不失真 function resizeImage($im,$maxwidth,$maxheight,$name,$filetype){     $pic_width = imagesx($im);     $pic_height = imagesy($

安卓載入視訊展示於ListView中,完美實現

安卓獲取視訊縮圖,展示於ListView中,完美實現應用場景:獲取安卓手機外部儲存視訊列表,介面卡繼承至CursorAdapter,利用ViewHolder進行優化;並利用非同步載入和快取機制,在加上一個繫結TAG機制。在ListView中展示視訊某一幀的圖片,視訊名稱,視訊

使用PHP實現生成固定大小圖片功能(智慧裁剪,圖片不失真)

<?php //影象處理類 class Image { private $file; //圖片地址 private $width; //圖片長度 private $height; //圖片長度 private $type; //圖片型別

安卓非同步載入圖片(顯示)的實現

/** * 根據指定的影象路徑和大小來獲取縮圖 * 此方法有兩點好處: * 1. 使用較小的記憶體空間,第一次獲取的bitmap實際上為null,只是為了讀取寬度和高度, * 第二次讀取的bitmap是根

C#實現圖片放(包括和旋轉)

using System; using System.Collections; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Web; using Syst

Windows Server 2008 顯示圖片

在 Windows Server 2008 中,圖片不能顯示縮圖。 解決辦法: 1. 開啟資源管理器,依次選擇 Organize -> Folder and search options 2. 點選 View 選項卡,將 Always show icons, never thumb

JAVA生成圖片、JAVA擷取圖片區域性內容

目前,google已經有了更好的處理JAVA圖片的工具,請搜尋:Thumbnailator    package com.ares.image.test; import java.awt.Color; import java.awt.Graphics; impor

Nginx-Lua-FastDFS-GraphicsMagick動態圖片

Nginx-Lua-FastDFS-GraphicsMagick動態圖片縮圖 公司使用FastDFS來當作圖片伺服器,客戶端通過Nginx請求圖片。某些情況下,客戶端對請求的圖片有尺寸要求, 如 http://10.100.1.145/group1/M00/00/1

Winform下使用ListView控制元件和ImageList控制元件顯示圖片

一、基本概念 1、ImageList控制元件 ImageList元件,又稱為圖片儲存元件,它主要用於儲存圖片資源,然後在控制元件上顯示出來,這樣就簡化了對圖片的管理。ImageList元件的主要屬性是Images,它包含關聯控制元件將要使用的圖片。每個單獨的圖片可以通過其索引值或鍵值來訪問。

Windows7無法顯示.png、.jpg圖片的問題

實驗環境(藍色粗體字為特別注意內容) 1,環境:Windows 7 Ultimate 2,參考文獻http://www.xiazaizhijia.com/rjjc/20481.html 今天開啟電腦的時候突然發現電腦的.png檔案和.jpg檔案的圖示都無法正常顯示,其他格式的縮圖比如wo

使用Opencv實現圖片

方法一: 實現步驟   1. load 載入圖片     2. info    讀取圖片資訊       3. resize   設定寬高   

CKfinder上傳圖片問題

CKfinder上傳圖片縮圖問題     專案裡CKFinder要求上傳的圖片大小不縮略。 把配置檔案的這個屬性擴大就可以。 附帶ckfinde

JAVA生成圖片、JAVA擷取圖片區域性內容的案例

JAVA生成圖片縮圖 package com.ares.image.test; import java.awt.Color; import java.awt.Graphics; import java.awt.Image; import java.awt.image.Bu

SSM中使用Kindeditor外掛實現圖片的批量上傳與回顯

圖片上傳的方式: 1.上傳到資料庫中的Blob型別,從資料庫中取出來並顯示。詳細見下面連結 http://blog.sina.com.cn/s/blog_5b0745e80102we31.html 2.上傳到伺服器的固定目錄下,在資料庫中僅儲存圖片的地址。詳細見下文 效果