Starta lytebox automatiskt när sidan är laddad

Trädvy Permalänk
Medlem
Plats
Växjö
Registrerad
Okt 2002

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

Citera för svar!

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005

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.

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.

Trädvy Permalänk
Medlem
Plats
Växjö
Registrerad
Okt 2002

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

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

Citera för svar!

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005

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.

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.

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005

Kan hända att du behöver Kommentera ut

Kod segementet som skapar en "eventlistner" i koden.

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.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

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">

Trädvy Permalänk
Medlem
Plats
Västerås
Registrerad
Jun 2005
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">

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.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

... 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>

Trädvy Permalänk
Medlem
Plats
Växjö
Registrerad
Okt 2002

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

Citera för svar!