Starta lytebox automatiskt när sidan är laddad

Permalänk
Medlem

Starta lytebox automatiskt när sidan är laddad

Hej

Jag har använt lytebox innan för att visa lite foto men har då haft text-länkar som man klickar på för att första bilden ska ploppa upp och man ska kunna bläddra bland bilderna.

Hur gör man för att när sidan som vi kan kalla bilder.html har laddats så ploppar den upp automatiskt och visar första bilden?

Tacksam för svar

/Alexander

Visa signatur

Citera för svar!

Permalänk
Medlem

Ofta har sådana här någon form av trigger du kan utlösa "manuellt" genom ett funktions anrop.

Gå igenom dokumentationen och sedan kan du skriva något i still med:

<script language="javascript"> start_lytebox(); </script>

ha denna kod längst ner i din sida.

Eller om du använder något javascript framework typ prototype eller jQuery så använd deras funktion för att utlösa saker när dokumentet är laddat.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

Ok, letade men hittade inte hur jag ska göra, överlycklig om någon kunde ta sig en titt?

http://pastebin.com/f194f4e13 <--- koden

Visa signatur

Citera för svar!

Permalänk
Medlem

Vad händer om du anropar antingen:

LyteBox()

eller

initLytebox()

?

Måste du ha dom funktionerna som är specifika för Lytebox eller räcker Lightbox scriptet av Lokesh Dahkar ?

För jag har för mig att i originalet kan man enkelt trigga igång det med ett anrop istället för en eventlistner som du hittar längst ner i detta script ungefär.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

Kan hända att du behöver Kommentera ut

Kod segementet som skapar en "eventlistner" i koden.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

Det du anropar är, såvitt jag kan se;

myLytebox.start(bild, false, false);

Så det enklaste för dig är att byta ut initLytebox som ligger längst ned i scriptet mot detta:

function initLytebox(){ myLytebox = new LyteBox(); var bild = document.getElementById('minBild'); myLytebox.start(bild, false, false); }

Om du har en sån bild: <img id="minBild" src="enBild.png">

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av azoapes
Det du anropar är, såvitt jag kan se;

myLytebox.start(bild, false, false);

Så det enklaste för dig är att byta ut initLytebox som ligger längst ned i scriptet mot detta:

function initLytebox(){ myLytebox = new LyteBox(); var bild = document.getElementById('minBild'); myLytebox.start(bild, false, false); }

Precis.

Om du har en sån bild: <img id="minBild" src="enBild.png">

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

... och glöm inte att sätta rel="lytebox" på din bild, eller rel="lytebox[grupp]" om du vill gruppera den. Det ska också vara en länk runt bilden, jag tänkte inte på att du kanske inte visste hur man använder Lytebox i vanliga fall heller.

Här är en vanlig bild:

<a href="enStorBild.jpg" rel="lytebox"><img src="enLitenBild.jpg"></a>

Här är en gruppering (ger Prev/Next):

<a href="enStorBild1.jpg" rel="lytebox[grupp]"><img src="enLitenBild1.jpg"></a>
<a href="enStorBild2.jpg" rel="lytebox[grupp]"><img src="enLitenBild2.jpg"></a>

För att köra din specialare, som kommer upp när man laddar sidan, måste du ha ett ID på länken, såhär:

<a id="minBild" href="enStorBild1.jpg" rel="lytebox[grupp]"><img src="enLitenBild1.jpg"></a>
<a href="enStorBild2.jpg" rel="lytebox[grupp]"><img src="enLitenBild2.jpg"></a>

Om du inte vill ha en tumnagel utan bara en vanlig länk med text, gör såhär:

<a href="enStorBild.jpg" rel="lytebox">Klicka här för att se bilden</a>

Permalänk
Medlem

Tack alla för att ni hjälpt till!

Visa signatur

Citera för svar!