Dator > JavaScript ljusbord tutorial

  • JavaScript ljusbord tutorial


  • Ljusbord är ett gratis open-source JavaScript-bibliotek som du kan använda för att presentera ett bildgalleri på din webbsida på ett estetiskt tilltalande sätt. När en användare klickar på en av dina miniatyrbilder kommer Lightbox tonar ut sidans bakgrund och zooma bilden för att fylla i webbläsarfönstret. Skaparen av Lightbox har gjort det möjligt att lägga till denna funktionalitet till din webbplats med endast några mindre ändringar i HTML- koden

    Du behöver : .
    webbläsare
    HTML-sida ( er).
    Bilder.
     


    1 .
    Öppna din webbläsare och gå till Lightbox hemsidan (se Resurser ) . Hämta den senaste versionen av biblioteket .
    2 .
    Extrahera zip -filen som du har hämtat . Den innehåller en HTML- fil och tre mappar : " css ", som innehåller formatmallar som används av Lightbox , " bilder ", som innehåller bilder som används av biblioteket , och " js ", som innehåller Lightbox källkod samt Prototype och Scriptaculous bibliotek som krävs av Lightbox .
    3 .
    Kopiera " css "," bilder " och " js " mappar till en plats som är tillgänglig från din webbsida . De återstående åtgärder kommer anta att du har placerat dem i samma katalog som HTML- filen , om du sätter dem på en annan plats , måste du justera sökvägarna i dessa åtgärder i enlighet därmed
    4

    Öppna HTML-filen som kommer att använda Lightbox i en textredigerare .
    5 .
    Om du inte redan använder prototypen och Scriptaculous bibliotek på din webbsida , lägg till följande två rader i " "i HTML-filen :

     


     



    Du kan hoppa över detta steg om du redan använder Prototype och Scriptaculous .
    6 .
    Lägg till följande två rader i " "efter de linjer som lasten Prototyp och Scriptaculous :

     



    7 .
    Lägg till Lightbox effekten att en bild länkar genom att lägga till rel=" lightbox " attribut till länkens " " tag , och ge ett valfritt namn som ska visas i popup- rutan . Till exempel , om du har en länk i följande format :

    ;

    omskrivning länken som följer:

    <; img src=" Image1Thumbnail. jpg "/>
     

    tips och varningar


     

    • Bilder kan också grupperas , så att användaren kan navigera snabbt till föregående eller nästa bild i ett galleri utan att stänga och åter öppna Lightbox fönstret . Om du vill associera en bild med en grupp, placera gruppen namn inom hakparenteser efter " ljusbord "i " rel "attribut . Till exempel :
    • Användaren kan klicka på " Föregående " och "Nästa " knapparna i Lightbox för att gå igenom uppsättning bilder som delar samma gruppnamn .
    70 72 73 74 75 76


Previous:nothing Next:hur man kan kontrollera för tomma var i JavaScript





Relaterade artiklar


  • vad är hårdvara & mjukvara?
  • om hårdvara
  • hur man fixar hårdvara
  • hur du uppgraderar hårdvaran i en Inspiron 6400
  • hur man kan ändra teckensnitt färger med javascript
  • hur man använder flera namnrymder
  • Var kan jag återvinna hårdvara?
  • hur man skapar en fil i java
  • hur man installerar enda tangent på laptop tangentbord hårdvara
  • Ta bort en fil i php