jQuery Plugin – LightBox2

這篇文章也在馬老師舊的部落格出現過,不過既然搬家了就重新做一次吧!其實在馬老師雲端研究室裡面也大量應用了這樣的效果,無論你在這點選了圖片或Flash都會觸發這個效果,相信大家也看過很多次了,接下來我們就看看怎麼樣在自己的網頁中加入這樣的效果,首先大家可以先到LightBox2的官方網站下載他們打包好的jQuery和CSS…等資源,或按我直接下載。

LightBox2 範例圖1

下載後會有以下三個資料夾比較重要:

LightBox2 範例圖2
  • CSS資料夾是放LightBox2所需要用到的CSS樣式表
  • images資料夾是放LightBox2所需要用到的圖檔(例如上一張、下一張的按鈕)
  • js資料夾是放LightBox2所需要用到的jQuery檔

接下來就可以開始製作網頁,在製作前也需要先準備一些大圖和小圖,如下圖例:

LightBox2 範例圖3

範例中檔名有s的表示縮圖(160×120)、另外就是大圖(640×480),在網頁裡面首先置入縮圖,在縮圖上製作超連結到大圖。

LightBox2 範例圖4

接下來就要開始針對語法做些處理了,在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>

在這邊也提供整個製作完成的範例讓大家下載參考,或直接觀賞網頁檔,其實這個範例還有一些額外的小東西可以改,比如說彈出視窗的圖片標題,按鈕中文化…等,還要請大家再多多研究一下囉!希望這個範例對大家有所幫助,如果還有疑問,也可以在這邊回應唷~

You may also like...

12,634 Responses

  1. coming off neurontin neurontin medicine what is the generic name for neurontin what mg does gabapentin come in

  2. priligy come funziona priligy 60 mg price online purchase of priligy who can prescribe priligy?

  3. I like what you have to offer. Keep up the good work!

  4. HaInd表示:

    Der Jackpot im Eurolotto darf jetzt maximal auf 120 Millionen Euro ansteigen. Erfolgt eine Zwangsausschüttung, wenn niemand sieben Richtige angekreuzt hat? Nein. Anders als bei Lotto am Mittwoch oder Lotto am Samstag bleibt die Gewinnsumme von 120 Millionen Euro bestehen, bis jemand fünf Richtige plus die zwei Eurozahlen getippt hat. Allerdings steigt die Gewinnsumme in der zweiten Gewinnklasse stetig an, bis diese ebenfalls den Wert von 120 Millionen erreicht hat. Dann würde sich auch in Gewinnklasse 3 die Jackpotsumme erhöhen. Digital- & Trendreporte 500 kg Kokain in Kaffeebohnen – «nicht möglich, jeden Container zu prüfen» Am Freitag erreichte der Europot erstmals in der 16-jährigen Geschichte von EuroMillionen die Marke von 200 Millionen Euro und damit seinen Maximalwert. Ein glücklicher Franzose hat den Mega-Gewinn prompt gewonnen und hat nun bis März Zeit, ihn abzuholen. https://www.divephotoguide.com/user/e3adcfs360/ Wer die Geschichte von Alice in Wonderland liebt, wird von diesem Slot begeistert sein. Big Time Gaming hat das Thema perfekt umgesetzt – begeben wir uns mit dem White Rabbit Slot auf eine abenteuerliche Reise mit tollen Gewinnchancen und zahlreichen magischen Funktionen. Fans der nordischen Mythologie und Naschkatzen aufgepasst! Bei unseren 5 neuen Top Slots der Woche ist für jeden was dabei. Jetzt kostenlos spielen! Willst du unbegrenzt kostenlose Münzen und Geld gewinnen, um stundenlang süchtig nach Stars Slots Casino Free Slot Machines Vegas 777 zu werden? In GAMERSLANCE werden Sie fündig! Wir stellen Ihnen einen Generator von Münzen und Geld zur Verfügung, mit dem Sie Ihre Spielstunden verlängern und eine tolle Zeit haben können, bis Sie es nicht mehr aushalten können. In unserem Restaurant verwöhnen wir Sie täglich von 18:00 – 21:00 Uhr, danach in unserer Bar-Lounge.

  5. you’re in reality a just right webmaster. The web site loading velocity is incredible. It sort of feels that you’re doing any distinctive trick. In addition, The contents are masterpiece. you’ve performed a great process on this topic!

  6. tyjwtxjh表示:

    http://hydroxychloroquinex.com/ buy hydroxychloroquine canada

  7. cialis canada price cialis daily review how to get a viagra prescription how to buy cialis without a prescription

  8. stopping neurontin buy generic neurontin online neurontin for hot flashes and insomnia how long to take gabapentin for shingles

  9. HaInd表示:

    After linking your bitcoin wallet to the Bitcoin exchange of your choice, the last step is the easiest — deciding how much Bitcoin you want to buy. While a single Bitcoin costs tens of thousands of dollars, the cryptocurrency (trading symbol BTC or XBT) can be bought and sold for fractional shares, so your initial investment could be as low as, say, $25. Find out if Bitcoin will hit an all-time high in 2022 Bitcoin was invented in 2009, by Satoshi Nakamoto, whose true identity had yet to be released. Bitcoin.org was registered on 18th August 2008, shortly prior to the first Bitcoin block being mined on 3rd January 2009. The Bitcoin cryptocurrency is denoted by a в‚ї and abbreviated as either BTC or XBT. A Bitcoin is divisible into 8 decimal places. Smaller unit is called a millibitcoin or mBTC and the smallest unit is satoshis or sat. 100,000 satoshi equals 1 mBTC. 1000 mBTC equals 1 BTC. https://bbs.pku.edu.cn/v2/jump-to.php?url=https://premirbitcoin.com/ We hope you’ve enjoyed reading CFI’s guide to Bitcoin. To learn more about financial markets, check out the following CFI resources. Bitcoin is clearly the pioneer, and the most traded crypto. Its market cap is ways bigger than the market cap of the number two Ethereum, which offers many applications and use cases, such as decentralized finance (DeFi) and non-fungible token (NFT). If Bitcoin is sometimes called “digital gold”, Ethereum would then be the “digital silver”! Bank of England’s KnowledgeBank guide explains what are cryptoassets. Miners get rewarded for their efforts with a small amount of new Bitcoins, and the mining reward is halved every four years as a measure to slow the creation of new Bitcoins. At the current rate of mining, all Bitcoins will be mined by somewhere around 2140.

  10. snwitntz表示:

    erythromycin ophthalmic ointment for pink eye https://erythromycin1m.com/#

  11. tollashi表示:

    বাংলা প্রশ্ন উত্তর সাইট তল্লাশি, আজই আপনার সমস্যা নিয়ে প্রশ্ন করুন , অভিজ্ঞ ব্যক্তিগন আপনার প্রশ্নের উত্তর দিয়ে সহযোগিতা করবে । তাছাড়াও অন্যাদের প্রশ্নের উত্তর দিয়ে, জিতে নিন আকর্ষণীয় পুরস্কার । তল্লাশিতে যেকোনো বিষয়ে প্রশ্ন করতে পারেন।।

  12. lonilb表示:

    Features:• Provide an option to allow users to be able to create links automatically through the process of creating a document in SharePoint• Can include access restriction to the content of the short URL• Option to include the original web link where the link is pointing• Option to exclude the actual webpage from being accessed, automatically prefill the title and description of the page• Option to exclude the website webpages titles and description.• Dashboard shows the usage statistics generated through date

    Interesting https://www.extremo.digital/wp-content/uploads/2022/06/inKey.pdf
    50e0806aeb lonilb

  13. cjzdfxoy表示:

    http://erythromycinn.com/# uses for erythromycin ophthalmic ointment

  14. Slonmob表示:

    9rpd5

    xrx0x

    m2bq

  15. halpap表示:

    Rating: 8/10

    5 Smartphone Tracker

    Smartphone Tracker is an easy to use system which reads out your mobile’s ID number and the mobile provider’s network connection status from your Wi-Fi or Cellular Data connection and alerts you instantly if your cellphone suffers from a geolocation incident.

    Product details

    Smartphone Tracker is an easy to use system which reads out your mobile’s ID number and the mobile provider’s network https://mangalamdesigner.com/webroot-system-analyzer-crack-torrent-activation-code-latest/
    50e0806aeb halpap

  16. flougle表示:

    // ———————————————————————–
    //
    // Copyright (c) 2016 Google Inc. All rights reserved.
    //
    //
    // Copyright (c) 2016 Google Inc. http://iptvpascher.com/?p=1257
    50e0806aeb flougle

  17. symedelm表示:

    You will have to call the ‘Connect’ method to re-enable the control again. Because of this limitation, you are free to use the demo for testing purposes only and we recommend that you purchase a copy of the original TALtech Bar Code ActiveX Control if your applications support ActiveX controls.
    ■ The control is shipped pre-configured to work with metric units, However, you are required to switch the control to work with Imperial measurements by simply configuring the control through https://mywaterbears.org/portal/checklists/checklist.php?clid=3749
    50e0806aeb symedelm

  18. hilann表示:

    Q:

    how to password protect directories in a directory using python?

    I have a web application that needs to share files with a asp.net website.
    So I have created a python script that sits somewhere on my desktop and is named sftp.py that does what I want it to. So I call the script like so sftp.py and it will put files from the desktop in the ~/Invision/InvisionGear/PDF/New folder https://www.eurofiveconseil.com/wp-content/uploads/2022/06/phylcar.pdf
    50e0806aeb hilann

  19. carrraib表示:

    The source code of Pascal is well suited for compiling in Java. Instead of object oriented, the Pascal language is denoted class. But you can add blocks to make this verbose language really Java.
    This tool has been decomposed in three parts: the compiler with its own interpreter, a coroutine library to deal with the synchronization and data flow and a JVM interpreter to deal with the exceptions during the execution. All these three parts are written in Java.

    The source code https://efekt-metal.pl/witaj-swiecie/
    50e0806aeb carrraib

  20. jakkquan表示:

    If you have any questions, let me know in the comments section.

    We all know that taking selfies has been a big trend lately, and that is not going away anytime soon. I like to keep it simple when it comes to taking photos because my phone camera is good enough most of the time. However, some people would rather capture the moment on a different level and get someone else to take the perfect selfies with them.
    From professional fashion photographers to big name YouTubers https://www.slowyogalife.com/wp-content/uploads/2022/06/QVerify.pdf
    50e0806aeb jakkquan

  21. chaphe表示:

    User reviews

    User rating

    Add a Comment

    Your Name/Nickname

    Your Email

    Your Website

    About Review

    Review Comment

    Kelana88|2013-07-02

    It works! I am very easy to use.

    heli.p|2013-06-17

    Kelana,

    Thank you for your review. Yes, you can use this tool and make the changes in the settings https://cuisinefavorits.online/wp-content/uploads/2022/06/obakri.pdf
    50e0806aeb chaphe

  22. defyude表示:

    The program has been optimized for portable use and it can even run without installation on a USB key.

    SmartUtilis Web Font Manager is a free utility designed to upload web fonts to your server and have them made available online.
    The application can also be used by webmasters to upgrade fonts that they have on their own server, thus saving cost and time spent on having to manually download the fonts.

    The program can import various document file formats as well as convert images with a http://www.gahir.ca/wp-content/uploads/2022/06/PolyNodeExtractor_for_MapInfo.pdf
    50e0806aeb defyude

  23. jaitho表示:

    Therefore, it is a worthy download for your free time or for your professional needs.

    OKplayer News

    OKplayer 2.7.9 is the second update of the publisher’s OKplayer player to make multimedia playing with all major streaming platforms and video playing component smoothly. With lot of improvements, it makes users happy than ever. OKplayer 2.7.9 offers…

    OKplayer 1.5 is a free and lightweight multimedia player for Windows, Mac and Linux https://dbspecialtyservices.org/wp-content/uploads/2022/06/ControlBar.pdf
    50e0806aeb jaitho

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。