同一頁網站-單獨顯示點選的圖片

Jonas 2015-07-07 02:01:12 ‧ 4150 瀏覽

分享至

各位邦友好

請問，Firefox的圖片預覽功能是怎麼做的呢？
畫面如下↓

P.S 圖片預覽功能，還包含可直接點圖片或兩邊的箭頭瀏覽其他圖片，怎麼達到的呀？

附上它的原始碼

&lt;div id="imgs">
            &lt;a href="screenshot/fxtw-install-09.png" title="Firefox 台灣版 安裝模式選擇" rel="tw-screenshot">&lt;img src="screenshot/fxtw-install-09.png" alt="Firefox 台灣版 安裝模式選擇" />&lt;/a>
            &lt;a href="screenshot/fxtw-install-08.png" title="Firefox 台灣版 自訂安裝選項" rel="tw-screenshot">&lt;img src="screenshot/fxtw-install-08.png" alt="Firefox 台灣版 自訂安裝選項" />&lt;/a>
            &lt;a href="screenshot/extension-basic.png" title="套件清單 - 基本安裝" rel="tw-screenshot">&lt;img src="screenshot/extension-basic.png" alt="套件清單 - 基本安裝" />&lt;/a>
            &lt;a href="screenshot/extension-all.png" title="套件清單 - 全選安裝" rel="tw-screenshot">&lt;img src="screenshot/extension-all.png" alt="套件清單 - 全選安裝" />&lt;/a>
            &lt;a href="screenshot/extension-none.png" title="套件清單 - 自訂安裝並全部不選" rel="tw-screenshot">&lt;img src="screenshot/extension-none.png" alt="套件清單 - 自訂安裝並全部不選" />&lt;/a>
        &lt;/div>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

外獅佬

iT邦大師 1 級 ‧ 2015-07-07 12:04:00

網路上找一堆lightbox的library可以用....
例如...FancyBox
---------------------（我是分隔線）-------------
如果CSS、JavaScript功力夠強，自己做也是可以的

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

外獅佬 iT邦大師 1 級 ‧ 2015-07-07 12:04:31 檢舉

你的範例這個...看起來就像是使用fancybox

Jonas iT邦新手 4 級 ‧ 2015-07-07 12:48:11 檢舉

wiselou大大你好

小弟在您介紹FancyBox之後，小弟有找到類似的範例(ex.Floatbox)
FancyBox就看不太懂了

外獅佬 iT邦大師 1 級 ‧ 2015-07-07 15:27:14 檢舉

javascript的部份

&lt;pre class="c" name="code">
$(function(){ $('.fancybox').fancybox();});

html的部份

&lt;pre class="c" name="code">
&lt;a href="http://www.getjoys.net/sharingSub/gj130678327355945838390.jpg" rel="group" class="fancybox" title="林志玲1">
		&lt;img src="http://www.getjoys.net/sharingSub/gj130678327355945838390.jpg" alt="林志玲1" />
	&lt;/a>
	&lt;a href="http://pic.pimg.tw/skyeyefilm/6e900292e1d0a8d8eb8034ac24d1d26d.jpg" rel="group" class="fancybox" title="林志玲2">
		&lt;img src="http://pic.pimg.tw/skyeyefilm/6e900292e1d0a8d8eb8034ac24d1d26d.jpg" alt="林志玲2" />
	&lt;/a>

Jonas iT邦新手 4 級 ‧ 2015-07-09 01:55:23 檢舉

wiselou你好

小弟有Try您的範例，只是，不懂的Code如下：

&lt;pre class="c" name="code">&lt;a href="http://www.getjoys.net/sharingSub/gj130678327355945838390.jpg" rel="group" class="fancybox" title="林志玲1">

不過，奇怪的是，總然我把**rel="group" class="fancybox" title="林志玲1"**都去除掉，還是有+、-

雖然跟預期的效果不同，當然是可以達到相同效果為原則，不行的話，就‧‧

外獅佬 iT邦大師 1 級 ‧ 2015-07-09 09:17:08 檢舉

有道是修行在個人....如果什麼都要旁人指點到位...

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22202 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙