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>
在這邊也提供整個製作完成的範例讓大家下載參考，或直接觀賞網頁檔，其實這個範例還有一些額外的小東西可以改，比如說彈出視窗的圖片標題，按鈕中文化…等，還要請大家再多多研究一下囉！希望這個範例對大家有所幫助，如果還有疑問，也可以在這邊回應唷～
Inter Miami FC https://mls.inter-miami-fr.com has become a major player in MLS thanks to its star roster, economic growth and international influence.
order leflunomide 20mg generic – buy calcium carbonate online cheap buy cheap cartidin
купить диплом с внесением в реестр купить диплом с внесением в реестр .
Отличный сатй! Всем рекомендую!скупка золота москва
The new Premier League https://premier-league.chelsea-fr.com season has gotten off to an intriguing start, with a new-look Chelsea looking to return to the Champions League, but serious challenges lie ahead.
купить диплом в артеме asxdiplomik24.ru .
An exploration of the history of Turin’s https://turin.juventus-fr.org iconic football club – Juventus – its rivalries, success and influence on Italian football.
The iconic Anfield https://enfield.liverpool-fr.com stadium and the passionate Liverpool fans are an integral part of English football culture.
Единственная в России студия кастомных париков https://wigdealers.ru, где мастера индивидуально подбирают структуру волос и основу по форме головы, после чего стригут, окрашивают, делают укладку и доводят до идеала ваш будущий аксессуар.
montenegro cities weather in Montenegro
Explore the rich history and unrivaled atmosphere of the iconic Old Trafford Stadium https://old-trafford.manchester-united-fr.com, home of one of the world’s most decorated football clubs, Manchester United.
How Taylor Swift https://midnights.taylor-swift-fr.com reinvented her sound and image on the intimate and reflective album “Midnights,” revealing new dimensions of her talent.
The inspiring story of Travis Scott’s https://yeezus.travis-scott-fr.com rise from emerging artist to one of modern hip-hop’s brightest stars through his collaboration with Kanye West.
An exploration of Nicole Kidman’s https://watch.nicole-kidman-fr.com career, her notable roles, and her continued quest for excellence as an actress.
A fascinating story about how Elon Musk https://spacex.elon-musk-fr.com and his company SpaceX revolutionized space exploration, opening new horizons for humanity.
The fascinating story of the creation and meteoric rise of Amazon https://amazon.jeff-bezos-fr.com from its humble beginnings as an online bookstore to its dominant force in the world of e-commerce.
Olympique de Marseille https://liga1.marseilles-fr.com after several years in the shadows, once again becomes champion of France. How did they do it and what prospects open up for the club
The fascinating story of Gigi Hadid’s rise to Victoria’s Secret Angel https://victorias-secret.gigi-hadid-fr.com status and her journey to the top of the modeling industry.
Travel to the pinnacle of French football https://stadede-bordeaux.bordeaux-fr.org at the Stade de Bordeaux, where the passion of the game meets the grandeur of architecture.
Parisian PSG https://paris.psg-fr.com is one of the most successful and ambitious football clubs in Europe. Find out how he became a global football superstar.
Une ascension fulgurante au pouvoir Donald Trump https://usa.donald-trump-fr.com et son empire commercial
Max Verstappen and Red Bull Racing’s https://red-bull-racing.max-verstappen-fr.com path to success in Formula 1. A story of talent, determination and team support leading to a championship title.
The story of Joe Biden’s https://president-of-the-usa.joe-biden-fr.com triumphant journey, overcoming many obstacles on his path to the White House and becoming the 46th President of the United States.
The astonishing story of Emmanuel Macron’s https://president-of-france.emmanuel-macron-fr.com political rise from bank director to the highest office in France.
Kim Kardashian’s https://the-kardashians.kim-kardashian-fr.com incredible success story, from sex scandal to pop culture icon and billion-dollar fortune.
The fascinating story of the creation and rapid growth of Facebook https://facebook.mark-zuckerberg-fr.biz under the leadership of Mark Zuckerberg, who became one of the most influential technology entrepreneurs of our time.
The legendary boxing world champion Mike Tyson https://ufc.mike-tyson-fr.biz made an unexpected transition to the UFC in 2024, where he rose to the top, becoming the oldest heavyweight champion.
The fascinating story of how Lewis Hamilton https://mercedes.lewis-hamilton-fr.biz became a seven-time Formula 1 world champion after signing with Mercedes.
The story of Fernando Alonso https://formula-1.fernando-alonso-fr.com in Formula 1: a unique path to success through talent, tenacity and strategic decisions, inspiring and exciting.
The powerful story of Conor McGregor’s https://ufc.conor-mcgregor-fr.biz rise to a two-division UFC championship that forever changed the landscape of mixed martial arts.