登录 注册

登录

问题 JA Highslide for Joomla! 1.5 缩略图特效插件 1.0 使用語法分享

更多
2008年11月06日 10:23 - 2008年11月06日 10:26 #1 作者: joek1111
看白老師似乎還尚未開始寫JA Highslide for Joomla! 1.5 缩略图特效插件的文章,
小弟我在這邊先下筆搶頭香發表一下,
JA Highslide確實是一個非常好的工具,
但是相關的操作方式並不友善,
所以讓很多不太懂語法的人非常卻步,
其實只要看過下方的範例再加以操作練習一下,
對這一個軟體對很容易上手了,
不廢話了開始分享相關的操作流程。

首先安裝完畢之後要先到 擴充套件 -> 外掛管理 -> Content-JA Highslide for Joomla! 1.5來設定一下,
相信白老師的翻譯非常清楚明白請參考下方附件1.GIF裡面我的設定值,
應該不難理解裡面只有一個東西要注意就是 縮圖路徑 這一個設定,
這關係到後面圖片位置語法的使用請大家先按照原先的設定先不要去動他吧。
最后修改: 2008年11月06日 10:26 由 lansea.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 10:55 - 2008年11月06日 18:38 #2 作者: joek1111
接下來開始示範語法了,
這軟體唯一的缺點就是沒有好的操作介面,
所有的功能都是透過在文章中下達語法來操作,
本軟體提供了幾樣功能
image(圖片縮放功能,就是所謂大圖變小圖)
slideshow-caption(燈箱說明)
slideshow-controlbar(燈箱展示)
html content(鏈結網頁)
iframe(鏈結內插網頁)
flash file(動畫展示)
module(模塊展示)
語法使用簡單到複雜我下面將一一示範
最后修改: 2008年11月06日 18:38 由 kurt998.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 11:08 #3 作者: joek1111
1.image圖片縮放功能,
這功能應該是大家最常用到的,
語法也最為簡單,
 
{highslide type="img" url="test/1.jpg" width=200 captionText='Sample image' } {/highslide}
 
解釋一下裡面語法功能
type="img" 這個是宣告型態

url="test/1.jpg" 這一個是宣告圖片或是檔案所在的位置,
像是我的檔案是放在\images\stories\test\這一個目錄裡面,
而第一篇文章中我已經將縮圖的路徑設定成\images\stories\了,
所以我在這一行中只需要宣告好後面的子目錄跟圖片檔名就可以。

width=200 這一個是宣告圖片的寬度

captionText='Sample image' 這一個是宣告彈跳燈箱中要顯示的說明文字請參考圖片3.GIF


登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 11:14 - 2008年11月06日 11:30 #4 作者: joek1111
2.slideshow-caption(燈箱說明)
這一個功能能夠在頁面展示一整排圖片,
語法開始慢慢多了起來,
 
{highslide type="slideshow-caption" 
url="test/1.jpg,test/2.jpg,test/3.jpg,test/4.jpg" 
width=150 positions="top, right" 
outlineType="rounded-white" }{/highslide}
 

當然上面的語法還是離不開第一個基本的宣告方式,
type="slideshow-caption" 這是宣告我們要使用的格式,

url="test/1.jpg,test/2.jpg,test/3.jpg,test/4.jpg" 這地方是宣告我們要用的圖片,請注意每一張圖片的檔名要用 , 來分隔,

width=150 一樣宣告圖片寬度,後面這一段我就不在多寫了

positions="top, right" 這是宣告對齊的位置

outlineType="rounded-white" 這是宣告彈跳出來的類型



最后修改: 2008年11月06日 11:30 由 narocs_13.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 11:47 #5 作者: joek1111
3.slideshow-controlbar(燈箱展示)
這一個功能跟第二項的很像,
他只是把控制的BAR由文字變成圖形,
語法跟第二項比較起來有變動一點而已,
 
{highslide type="slideshow-controlbar" 
url="test/1.jpg,test/2.jpg,test/3.jpg,test/4.jpg" 
width="150" positions="top, right" } {/highslide}
 
裡面只有修改了highslide type="slideshow-controlbar"這一段,
請大家跟第二段的語法比較一下吧。

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 13:33 #6 作者: Pooh

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 14:33 #7 作者: overcet6
老大!你要是有空
就来这里开专栏吧!!

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 18:59 - 2008年11月06日 19:09 #8 作者: joek1111
4.html content(鏈結網頁)
這一個部分開始複雜了一點,
對網頁原始碼不是很懂的朋友大概會死不少腦細胞,
這一個功能是針對文字的連結跳出一段網頁的部分,
因為裡面牽涉到HTML碼,
所以這一段語法插入必須要在原始碼的地方貼上才有作用,
 
<div id="test" style="display: none"><img style="padding-right: 10px; float: left" height="113" alt="test image" width="150" src="/etasis/images/stories/test/1.jpg" />日文名:安倍なつみ
 
英文名:Abe Natsumi
 
出生年月日:1981810日
 
出生地:北海道室蘭巿
 
星座:獅子座 
 
血型:A型 
 
身高:150.7 cm
 
體重:42 kg 
 
興趣:唱歌、做料理、卡拉OK、聊天、到不知名的地方散步
 
●電視
 
「荒太的狗日記」
 
「秀逗男護士」</div>
{highslide type="html" contentid="test" outlineType="rounded-white" width=400 height=320 captiontext="This is demo content" } 按下我看更多資料{/highslide}
 
看似複雜其實一點都不難,
首先把上面的東西分成兩段來解釋,
上面部分的HTML碼,
這裡面就是你要彈跳出來的網頁內容,
首先要先使用網頁語法中的div先給他一個框架,
要注意的地方就只有div id的部分,
其他的內容就看你要他跳出來的框裡面有什麼東西你就自己輸入吧,
接下來就是下半部的部分,
highslide type="html" 宣告我們要使用HTML語法
contentid="test" 這一個地方要輸入的是我們剛剛在上面div id的名稱
outlineType="rounded-white" 宣告彈跳出來的類型
width=400 height=320 宣告彈跳出來的框大小
captiontext="This is demo content" 宣告彈跳框的說明
後面的按下我看更多資料這一個部分就是呈現在前台的文字連結了。

最后修改: 2008年11月06日 19:09 由 qustlyj.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 19:23 #9 作者: joek1111
5.iframe(鏈結內插網頁)
這一個功能跟剛剛第4項有點類似,
不同的是他是直接連結網頁有點像是超連結,
不是像第4項功能裡面我們要在文章裡面宣告框
 
{highslide type="iframe" 
url="http://www.joomlagate.com/" outlineType="rounded-white" 
width=900 height=500} 按我連結到白老大的站{/highslide}
 
這一段範例是連結到Joomla! 之門所以沒有美女圖範例可以看,
大家就將就一點吧,
highslide type="iframe" 宣告我們要連結網頁
url=" www.joomlagate.com/ " 宣告要連結的網址
outlineType="rounded-white" 宣告彈跳出來的類型
width=900 height=500 宣告彈跳框的大小(因為是宣告網頁所以要注意調整一下大小)
按我連結到白老大的站在前台頁面出現文字,請參考圖片8.GIF

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 19:36 #10 作者: joek1111
6.flash file(動畫展示)
這一段也沒有美女範例可以看,
理由是我沒有時間做,
大家注意彈跳框語法的部分,
跟前面的有一點不一樣,
當然出來的效果也不一樣囉,
請把圖片10.GIF跟前面的作一下比較吧
 
{highslide type="flash" 
url="test/play.swf" width=400 height=300 
outlineType="outer-glow" }按下我觀看FLASH動畫{/highslide}
 
highslide type="flash" 宣告內容是FLASH
url="test/play.swf" 宣告檔案位置(跟前面宣告圖片一樣方法)
width=400 height=300 宣告彈跳框的大小(請配合FLASH的大小作調整)
outlineType="outer-glow" 宣告彈跳出來的類型(眼尖的應該發現框不一樣了吧)
按下我觀看FLASH動畫在前台頁面出現文字

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 20:39 #11 作者: anycall
最好有埋演示地址!!
還有一點的是..image圖片縮放功能
url 支持外鏈?

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 21:15 #12 作者: joek1111

最好有埋演示地址!!
還有一點的是..image圖片縮放功能
url 支持外鏈?


我文章還有一個功能沒寫完勒,就有人提問了,
回答1.
因為我的網站不是我個人擁有的所以我沒辦法提供演示地址,
所以我貼圖,貼圖,貼圖,貼圖,

回答2.
竟然語法是用URL囉當然支持外鏈,不過你全部都用路徑宣告,那麼語法會變的很長你會亂七八糟的吧

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 21:50 #13 作者: joek1111
7.module(模塊展示)
這一個功能可以支援直接展示JOOMLA裡面的模組區塊,
啥?!不知道什麼是模組區塊,
請回到你的JOOMLA的管理頁面,
點選 擴充套件 -> 模組管理,
你在裡面看到的就是你JOOMLA所有在前台呈現功能的模組了,
下面的語法範例我用了JOOMLA的預設最新訊息的模組來作示範,
不過要使用這一個功能有一點麻煩,
先看看下方的語法在說吧。
 
{highslide type="module" modulename="mod_newsflash" 
outlineType="rounded-white" width=500 height=350 
captiontext="demo test" } 按下我觀看最新訊息模組展示 {/highslide}
 

highslide type="module" 宣告我們要使用的是模組功能
modulename="mod_newsflash" 要使用的模組名稱
outlineType="rounded-white" 一樣是框的樣式拉
width=500 height=350 一樣是定義框的長跟寬拉
captiontext="demo test" 宣告框的說明
按下我觀看最新訊息模組展示 在前台頁面出現文字

我上面提出的麻煩就是modulename="mod_newsflash"這一個宣告部分
因為JOOMLA的模組通常是設定在 \modules\ 這一個目錄底下,
但是我們在外掛設定中我們設定的位置是 \images\stories\ 所以麻煩出來了,
聰明的人應該想到了,是的 對應位置不正確無法正常顯示
我想到了兩個方式來處理,結果都正常有成功,
方法不一定正確大家研究看看吧,
方法1.使用FTP工具到\modules\裡面,將你要的模組複製一份到\images\stories\裡面
方法2.修改第一篇文章中的路徑設定也是可以的
看看哪一種對大家來說方便吧。

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月06日 21:53 #14 作者: joek1111
以上是我知道的這一個外掛的功能,
是不是還能有新發現,
也請大家多多指教,
以上文章獻給Joomla! 之门及白老師,
如要轉載請註明出處Joomla! 之门,謝謝

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月10日 10:01 #15 作者: 忧伤b小调
没想到JA HIGHSLIDE 有这么多的漂亮的功能,感谢Joek提供使用方法.

真实打造华人最大暗黑艺术网站: http://www.cnhell.com 采用joomla! 2.5 搭建

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月12日 16:32 #16 作者: miloli
不错不错,这个小插件的功能挺好的

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年11月17日 14:12 #17 作者: ljoooooooo
说的太详细了,感谢分享。

PDair 手机电池,A+优芯制造,你的高容量手机电池!  www.pdair.mobi     ljooo.taobao.com

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年12月15日 14:52 #18 作者: snowtrip
请教一个问题,前述第2及3项关于灯箱多图展示的语句,{highslide type="slideshow-controlbar"
url="test/1.jpg,test/2.jpg,test/3.jpg,test/4.jpg"
width="150" positions="top, right" } {/highslide}

如果想给每张图分别加上不同的说明文字CaptionText,该如何做?如在语句中加入CaptionText='test',则所有图片的说明都是一样的test,我试过用多个CaptionText赋值或是用,号分隔不同的说明文字都不可行。
请指教。

joomla新手。本地环境xampp 1.6.8/joomla 1.5.8多语言集成版。

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年12月16日 11:07 #19 作者: joek1111
這插件宣告文字語法的功能,
他只能應用在單一張圖片,
並沒有支援多張展示功能,
如果你有需多圖片都需要加宣告,
建議用第一個範例說明一個一個個別處理。

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年12月16日 15:10 #20 作者: snowtrip
哦,谢谢了。

joomla新手。本地环境xampp 1.6.8/joomla 1.5.8多语言集成版。

登录 或者   注册一个会员帐号 来参与讨论