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>
在這邊也提供整個製作完成的範例讓大家下載參考，或直接觀賞網頁檔，其實這個範例還有一些額外的小東西可以改，比如說彈出視窗的圖片標題，按鈕中文化…等，還要請大家再多多研究一下囉！希望這個範例對大家有所幫助，如果還有疑問，也可以在這邊回應唷～
Utilisez le 1xBet Aller 2024 et profitez de l’offre VIP 1xBet de 200% jusqu’a 78 000 XOF sur les paris sportifs. Inscrivez-vous avec un code promotionnel et recevez un bonus de bienvenue. Vous pouvez utiliser l’argent du bonus pour parier sur des sports ou jouer dans des casinos en ligne. La promotion 2024 est valable pour tous les nouveaux clients.
Рекомендую именно этот Реабилитационный центр Киев
Отличный сайт! Всем рекомендую!салон оптики
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервисные центры по ремонту техники в москве
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Отличный сайт! Всем рекомендую!очки купить в Москве
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники
1xBet
Promo codes on 1xBet unlock bonuses like deposit matches, free bets, or free spins. These codes can be entered during registration or when making a deposit to claim the corresponding bonus.
oral lioresal – baclofen 25mg drug piroxicam generic
Отличный сайт! Всем рекомендую!оптика Москва
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: ремонт бытовой техники в казани
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Профессиональный сервисный центр по ремонту стиральных машин с выездом на дом по Москве.
Мы предлагаем: ремонт стиральных машин москва
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники в новосибирске
Отличный сайт! Всем рекомендую!слив курсов.net
Если вы искали где отремонтировать сломаную технику, обратите внимание – сервис центр в нижнем новгороде
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем: сервис центры бытовой техники москва
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Если вы искали где отремонтировать сломаную технику, обратите внимание – ремонт бытовой техники
Отличный сайт! Всем рекомендую!слив курсов.net
Профессиональный сервисный центр по ремонту видео техники а именно видеокамер.
Мы предлагаем: ремонт веб-камеры
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
buy diclofenac online cheap – voveran price order nimotop for sale
Промокод на Fonbet 2024 https://mcv26.ru/news/aktualnuy_promokod_fonbet_pri_registracii.html
Fonbet предлагает промокоды, действующие в 2024 году, которые предоставляют различные бонусы и привилегии для пользователей. Примером такого промокода является ‘GIFT200’, который активирует бесплатные ставки и другие награды для новых игроков. Эти промокоды делают игру на платформе более привлекательной и выгодной, предлагая дополнительные возможности для выигрыша.
Отличный сайт! Всем рекомендую!Slivkursov
Если вы искали где отремонтировать сломаную технику, обратите внимание – профи услуги
Thought it was a hemorrhoid.
Most online stores will guarantee you the does bactrim make you pee a lot keep them away from direct sunlight.
And Anipryl may be tried to combat pituitary-dependent Cushing’s.
The flu virus is highly communicable and can be transmitted by a kiss, grasping a doorknob, or inhaling the virus from a sneeze or cough.
Some pharmacies give free consultation when you amoxicillin dosage on the grounds that it is economical and powerful
Alpha-interferon can shrink some lung carcinoids that have spread to other parts of the body and relieve symptoms of carcinoid syndrome.
Отличный сайт! Всем рекомендую!slivkursov.net
Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
Мы предлагаем:ремонт крупногабаритной техники в новосибирске
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
but what amount of which combinations of variables turns a relationship truly toxic?Relationship science can’t answer that question with precision,at least not yet.ラブドール 男
Ретрит http://ретриты.рф международное обозначение времяпрепровождения, посвящённого духовной практике. Ретриты бывают уединённые и коллективные; на коллективных чаще всего проводится обучение практике медитации.
Профессиональный сервисный центр по ремонту планшетов в Москве.
Мы предлагаем: ремонт планшетов цены
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
FXTM offers countless opportunities through easy access to hundreds of financial instruments across forex, commodities, stocks, and indices. Being the best broker for forex trading in India, FXTM offers exceptional value, allowing traders to trade their favorite assets with tight spreads, pinpoint execution, and low commissions. There is a wealth of first-class educational resources that are available free of cost for beginners to learn and hone their trading skills. Moreover, FXTM prioritizes client security by storing client funds in fully segregated bank accounts and insuring them with up to $1 million. The buying and selling of global currencies The information on this website is not intended for residents of certain jurisdictions, including the United States, Singapore, Australia, China, and jurisdictions listed on the FATF and EU UN sanctions lists. It is not intended for distribution or use where such distribution or use would be contrary to local law or regulation. While the Authority has granted a securities or derivatives investment business licence to the Licensee, it does not endorse the products offered.
https://photoclub.canadiangeographic.ca/profile/21358048
With a track record of trust from over 27 million traders worldwide, FBS is a long-standing player in the Forex industry. Offering a single account type that allows trading across Forex, commodities, stocks, indices, and cryptocurrencies, FBS ensures simplicity and accessibility for traders. What sets FBS apart is its remarkably low minimum deposit requirement of just $5, enabling even the most budget-conscious traders to participate in the market. HF Markets minimum deposit is $5 for the Cent Account, $5 for the Premium Account, & $5 for the Zero Spread Account (these accounts may have a low minimum deposit, but they charge higher spreads from 1.2 pips and beyond). On another note, traders can make deposits and withdrawals using a variety of payment options. These include Wire transfers, Credit Debit cards, Skrill, and Neteller. The spreads associated with this broker are reasonably low starting from 0.8 pips on the standard account and 1.0 pips on the MetaTrader account with no commission. On the other hand, the raw account features spreads from as low as 0.0 pips with a fixed commission of $5 per $100k traded. The trading platforms available to traders include MetaTrader 4, MetaTrader 5, TradingView, and Forex Trader.