| Hjem | Hardware | Netværk | Programmering | software | Fejlfinding | systemer | 
Programmering  
  • C /C + + Programming
  • Computer Programmeringssprog
  • Delphi programmering
  • Java programmering
  • JavaScript Programmering
  • PHP /MySQL programmering
  • Perl programmering
  • Python Programming
  • Ruby Programming
  • Visual Basics Programmering
  •  
    Computer Viden >> Programmering >> JavaScript Programmering >> Content
    Javascript Lightbox Tutorial
    Lysbord er et gratis open-source JavaScript bibliotek, som du kan bruge til at præsentere et billede galleri på din webside i en visuelt tiltalende måde . Når en bruger klikker på en af ​​dine miniaturebilleder vil Lysbord fade ud sidens baggrund og zoome ind på billedet til at fylde browservinduet. Skaberen af ​​Lysbord har gjort det muligt at tilføje denne funktionalitet til dit websted med kun et par mindre ændringer til din HTML-kode . Ting du skal en Web browser
    HTML side (r)
    Images
    Vis Flere Instruktioner
    1

    Åbn din webbrowser og gå til Lightbox hjemmeside (se Resources). Download den nyeste version af biblioteket.
    2

    Udpak ZIP- fil, du har downloadet . Den indeholder en prøve HTML-fil og tre mapper : " css ", som indeholder stylesheets anvendes af Lysbord , "billeder ", der indeholder billeder brugt af biblioteket , og " js ", som indeholder Lightbox kildekode samt Prototype og Scriptaculous biblioteker , der kræves af Lysbord .
    3

    kopiere " css ", " billeder" og " js " mapper til en placering, der er tilgængelig fra din webside . De resterende trin vil antage, at du har placeret dem i samme mappe som din HTML-fil , hvis du lægger dem i en anden placering, vil du nødt til at justere de stier i disse handlinger herefter
    4

    . Åbn HTML -fil, der skal bruge Lysbord i din foretrukne teksteditor.
    5 p Hvis du ikke allerede bruger Prototype og Scriptaculous biblioteker på din webside , skal du tilføje følgende to linjer i " ; "i HTML-filen : Hej

    < script type = " text /javascript " src = " js /scriptaculous.js ? belastning = effekter builder ">
    p Du kan springe dette trin, hvis du allerede bruger Prototype og Scriptaculous .
    6 < p > Tilføj følgende to linier i " " sektionen efter de linjer, der load Prototype og Scriptaculous : Hej

    < script type = "text /javascript " src = " js /lightbox.js " >
    7

    Tilføj lightbox effekt til et billede links ved tilføjelse af rel = " lightbox " attribut til linkets " -tag" , og give en valgfri titel, der vil blive vist i pop- up box . For eksempel, hvis du har et link på følgende form: href="Image1.jpg">

    < br >

    Re -write linket som følger : Hej

    < img src = " Image1Thumbnail . jpg "/>

    Forrige :

    næste :
      Relaterede artikler
    ·Sådan Konverter OS Grid til GPS 
    ·JavaScript Tutorial for aritmetiske operatorer 
    ·Hvordan du aktiverer JavaScript Debugging 
    ·Sådan Indsæt jQuery 
    ·Lyskasse Tutorial 
    ·Hvordan til at bære en Shift Dress 
    ·Sådan Skjul flere Elementer i Javascript 
    ·Sådan ændre menu af billeder på mouseover i JavaScri…
    ·3- D-effekter med Javascript 
    ·Sådan Kommentar i en Java Script 
      Anbefalede Artikler
    ·Hvordan debug i Visual Studio NET 
    ·Sådan at rydde op en Listbox i Python 
    ·Sådan Set Up PHP på IIS 6.0 
    ·Sådan Vedhæft en streng til en anden String i Struts …
    ·Sådan udgives med CPP 
    ·Sådan bruges Refedit i VBA 
    ·Sådan Slet dubletter med Oracle SQL 
    ·Sådan pakkes attributter med Python 
    ·Sådan indstilles Indskudstegn holdning på en DIV på …
    ·Hvad er et værktøjstip i VB 
    Copyright © Computer Viden http://www.computerdk.com