jQuery Plugin – LightBox2
這篇文章也在馬老師舊的部落格出現過，不過既然搬家了就重新做一次吧！其實在馬老師雲端研究室裡面也大量應用了這樣的效果，無論你在這點選了圖片或Flash都會觸發這個效果，相信大家也看過很多次了，接下來我們就看看怎麼樣在自己的網頁中加入這樣的效果，首先大家可以先到LightBox2的官方網站下載他們打包好的jQuery和CSS…等資源，或按我直接下載。
下載後會有以下三個資料夾比較重要：
- CSS資料夾是放LightBox2所需要用到的CSS樣式表
- images資料夾是放LightBox2所需要用到的圖檔（例如上一張、下一張的按鈕）
- js資料夾是放LightBox2所需要用到的jQuery檔
接下來就可以開始製作網頁，在製作前也需要先準備一些大圖和小圖，如下圖例：
範例中檔名有s的表示縮圖（160×120）、另外就是大圖（640×480），在網頁裡面首先置入縮圖，在縮圖上製作超連結到大圖。
接下來就要開始針對語法做些處理了，在HTML中<head>…</head>區段加入以下的程式碼：
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
第1~3行是連結LightBox2中jQuery的程式，第4行則是連結LightBox2中CSS的樣式表，再來處理超連結的語法，在原本製作圖片超連結的部份加入rel=”lightbox[g1]”的語法，如下：
<a href="foods/location_pic_1.jpg" rel="lightbox[g1]"><img src="foods/location_pic_1_s.jpg" width="160" height="120" border="0" /></a> <a href="foods/location_pic_2.jpg" rel="lightbox[g1]"><img src="foods/location_pic_2_s.jpg" width="160" height="120" border="0" /></a> <a href="foods/location_pic_3.jpg" rel="lightbox[g1]"><img src="foods/location_pic_3_s.jpg" width="160" height="120" border="0" /></a>
其中g1的部份是表示這個圖片的群組，如果三張圖片都是g1則點選任一張，都可以在畫面中切換看到這三張，但若兩張圖片是g1第三張是g2的話，點選第一張圖片後只能切換到第二張，第三張則為獨立的圖檔，大家可以依照自己的情形修改括號內的文字，整體製作好的網頁語法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LightBox2</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> </head> <body> <a href="foods/location_pic_1.jpg" rel="lightbox[g1]"><img src="foods/location_pic_1_s.jpg" width="160" height="120" border="0" /></a> <a href="foods/location_pic_2.jpg" rel="lightbox[g1]"><img src="foods/location_pic_2_s.jpg" width="160" height="120" border="0" /></a> <a href="foods/location_pic_3.jpg" rel="lightbox[g1]"><img src="foods/location_pic_3_s.jpg" width="160" height="120" border="0" /></a> </body> </html>
在這邊也提供整個製作完成的範例讓大家下載參考，或直接觀賞網頁檔，其實這個範例還有一些額外的小東西可以改，比如說彈出視窗的圖片標題，按鈕中文化…等，還要請大家再多多研究一下囉！希望這個範例對大家有所幫助，如果還有疑問，也可以在這邊回應唷～
Erling Haaland https://manchester-city.erling-haaland-ar.com born on July 21, 2000 in Leeds, England, began his football journey at an early age.
Brazilian footballer Neymar https://al-hilal.neymar-ar.com known for his unique playing style and outstanding achievements in world football, has made a surprise move to Al Hilal Football Club.
Harry Kane https://bayern.harry-kane-ar.com one of the most prominent English footballers of his generation, completed his move to German football club Bayern Munich in 2023.
En iyi kumarhaneyi tavsiye ederim Sweet bonanza
Yacine Bounou https://al-hilal.yassine-bounou-ar.com known simply as Bono, is one of the most prominent Moroccan footballers of our time.
Andreson Souza Conceicao https://al-nassr.talisca-ar.com known as Talisca, is one of the brightest stars of modern football.
The story of Leo Messi https://inter-miami.lionelmessi.ae‘s transfer to Inter Miami began long before the official announcement. Rumors about Messi’s possible departure from Barcelona appeared in 2020
Guvenilir bir kumarhanede sans?n?z Sweet bonanza
Pedro Gonzalez Lopez https://barcelona.pedri-ar.com known as Pedri, was born on November 25, 2002 in the small town of Tegeste, located on Tenerife, one of the Canary Islands.
i-tec.ru https://multimedijnyj-integrator.ru .
Bu kumarhanedeki en iyi oyunlar Sweet bonanza
i-tec.ru http://multimedijnyj-integrator.ru .
Guvenilir bir kumarhanede oynay?n Sweet bonanza
Отличный сайт! Рекомендую!взлом замков москва
En guvenilir kumarhanede kazan?n Sweet bonanza
There are narcissistic mothers who are disinterested in their children; others who are over-involved.Some act aggressive,セックス ロボット
Robert Lewandowski https://barcelona.robertlewandowski-ar.com is one of the most prominent footballers of our time, and his move to Barcelona has become one of the most talked about topics in world football.
Toni Kroos https://real-madrid.tonikroos-ar.com the German midfielder known for his accurate passes and calmness on the field, has achieved remarkable success at one of the most prestigious football clubs in the world.
Victor Osimhen https://napoli.victorosimhen-ar.com born on December 29, 1998 in Lagos, Nigeria, has grown from an initially humble player to one of the brightest strikers in modern football.
Vinicius Junior https://real-madrid.vinicius-junior-ar.com the Brazilian prodigy whose full name is Vinicius Jose Baixao de Oliveira Junior, has managed to win the hearts of millions of fans around the world in a short period of time.
Earvin “Magic” Johnson https://los-angeles-lakers.magicjohnson.biz is one of the most legendary basketball players in history. NBA history.
Nuno Mendes https://paris-saint-germain.nuno-mendes.com, a talented Portuguese left-back, He quickly became one of the key figures in the Paris Saint-Germain (PSG) team.
Bruno Miguel Borges Fernandes https://manchester-united.brunofernandes-br.com was born on September 8, 1994 in Maia, Portugal.
Daniel Alves https://paris-saint-germain.danielalves.net is a name that symbolizes the greatness of the world of football.
Rodrygo Silva de Goes https://real-madrid.rodrygo-br.com, known simply as Rodrygo, emerged as one of the the brightest young talents in world football.
これらについて解説していくので、セックス ロボット最後まで読むと使いやすいサイトがわかり、安心してイラストを投稿することができます。
Anderson Silva https://killer-bees-muay-thai-college.andersonsilva.net was born in 1975 in Curitiba Brazil. From a young age he showed an interest in martial arts, starting to train in karate at the age of 5.
Seveceginiz bir kumarhane Sweet bonanza
“Your article on [specific topic] was an extraordinary example of comprehensive analysis combined with innovative insights.The depth and breadth of your exploration into [specific subtopic] were truly remarkable.ダッチワイフ
En guvenilir online casino Sweet bonanza