Hur installerar jag lightbox?

[emmawa]

Jag försöker installera lightbox på min hemsida med instruktioner från deras hemsida.(http://www.lokeshdhakar.com/projects/lightbox2/#how)

Men jag förstår verkligen inte hur jag ska göra.

Är det någon som kan förklara mer ingående hur jag går tillväga?

[happyfejs]

Du laddar ner filen som ligger på hemsidan, lägger in de filerna som finns i mappen och länkar till dem, förlsagsvis lägger du javascriptfilerna i en mapp som du döper till scripts eller js, och css filen i en mapp som du döper till styles(förmodligen har du din default css i denna mapp). Sen måste du även importera jQuery biblioteket för att det ska funka(förklaras konstigt nog inte på lightbox hemsida). Koden för allt detta ser ut så här(Läggs i headtaggen)

 

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="scripts/lightbox.js"></script>
<link rel="stylesheet" href="styles/lightbox.css" type="text/css" media="screen" />

 

Sen relaterar du dina bilder du vill ska visas i lightboxen när man ska kolla på dem så här, där "href" självklart är sökvägen till bilden som ska visas

<a href="images/image-1.jpg" rel="lightbox>image #1</a>

 

Om du har ett galleri med bilder får du lägga till vilket galleri det tillhör också, så här

<a href="images/image-1.jpg" rel="lightbox[sammagalleri]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[sammagalleri]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[sammagalleri]">image #3</a>

 

Lycka till!

[Jonas__B]

nej, originalet lightbox använder inte jquery utan prototype så där har du fel, happyfejs.

 

Dock finns det varianter av lightbox som använder jquery istället för prototype.

[emmawa]

Tack för svaret! Hur menar du att jag ska länka till styles och js mapparna? jag har lagt in dem bland mina hemsidemappar i frontpage som jag använder, länkar jag till dem när jag lägger in scripten i headern?

 

Sen undrar jag över bildkoden, min bildkod ser ut såhär :

<img border="0" src="../maintest.JPG" width="100" height="118">

 

Ska jag skriva egna bildkoder istället för att importera in dom genom frontpage?

 

 

 

 

[happyfejs]

Sorry Jonas, såg det nu att den inte använde jQuery, klantigt av mig..

Du behöver alltså inte importera jQuery biblioteket jag pratade om dvs att du inte ska ta med den här raden

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

 

 

Ligger dina javascript filer i samma mapp som index.html(eller din indexfil .php .htm vet inte vad du använder)? Isf ska du länka så här bara

 

<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
osv...

 

Har du den däremot i en mapp i samma mapp som din indexfil ligger så ska du länka till den mappen

dvs

<script type="text/javascript" src="dinmapp/scriptaculous.js?load=effects,builder"></script>
osv...

 

Samma sak med css filen..

 

Du måste göra bilden till en länk och det är länken som refererar till vilken bild som ska öppnas så här.

 

<a href="sökväg_till_bild_du_vill_öppna" rel="lightbox" title="Den här texten kommer visas under bilden och är valfri">
<img src="sökväg_till_bild_du_vill_ska_visas_som_en_thumbnail" width="100" height="118"/>
</a> 

 

Där är <a href> taggen länken, emellan den ligger din bild(<img> taggen) du vill ha som länk på din sida. i ditt fall då ../maintest.JPG (ligger den i en mapp under mappen med din indexfil?)

Och efter den taggen ser du </a> taggen, den avslutar länken, dvs att allt mellan <a href> och </a> är en länk, som i detta fall refererar till lighbox och öppnas däri.

[emmawa]

Det känns som om jag är på rätt väg men det går liksom inte hela vägen. när jag förhandsgranskar sidan är bilderna länkar men länken leder bara till ett felmeddelande som lyder : "den här sidan finns inte"

så här ser mina koder ut (en stor röra jag vet!)

Jag har rödmarkerat det som handlar om lightbox.

Vill verkligen få det att fungera!!!

 

 

<head>

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

<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

 

<body link="#FFFFCC" rel="stylesheet" href="lightbox.css" type="text/css" media="screen"/

bgcolor="#000000" link="#FFFFCC" vlink="#FFFFCC" alink="#FFFFCC" text="#FFFFCC">

<div align="center">

<font color="#FFFFCC"> </body>

<a style="text-decoration: none" target="_self" href="index.html">

<font color="#FFFFCC" style="font-size: 65pt" face="Edwardian Script ITC">

E</font><font color="#FFFFCC" style="font-size: 60pt" face="Edwardian Script ITC">mma

Walthersson</font></a></font><p> </p>

<p> </div>

<div align="center">

 </div>

 

<div align="center">

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" id="table1" width="864" height="534">

<!-- MSTableType="layout" -->

<tr>

<td valign="top" background="bild/main1.jpg" width="179">

<!-- MSCellType="NavBody" -->

 </td>

<td valign="top" height="532" width="679">

<!-- MSCellType="ContentBody" -->

<div style="position: absolute; width: 125px; height: 49px; z-index: 6; left: 746px; top: 123px; border: 4px dotted #FF6600; background-color: #FF6600" id="lager22">

<font size="5" face="Edwardian Script ITC" color="#FFFF00">

    

</font>

<font size="6" face="Edwardian Script ITC" color="#FFFF00">

<a style="text-decoration: none; " href="art.html">

Konst</a></font></div>

<div style="position: absolute; width: 121px; height: 29px; z-index: 6; left: 582px; top: 128px; border: 4px double #800000; background-color: #800000" id="lager23">

<font face="Edwardian Script ITC" size="5" color="#FFFFCC">

      Nyheter</font></div>

<div style="position: absolute; width: 124px; height: 30px; z-index: 7; left: 402px; top: 128px; border: 4px double #CC66FF; background-color: #CC66FF" id="lager25">

<font face="Edwardian Script ITC" size="5">    

<a style="text-decoration: none" href="contakt.html">

Kontakt</a></font></div>

<div style="position: absolute; width: 114px; height: 40px; z-index: 6; left: 235px; top: 128px; border: 4px double #008080; background-color: #008080" id="lager20">

<font face="Edwardian Script ITC" color="#800000">

<a style="text-decoration: none" target="_self" href="shows.html">

<font size="5">Utställningar</font></a></font></div>

 

<a href="maintest.JPG" rel="lightbox[galleri1]"image #2 title="Den här texten kommer visas under bilden och är valfri">

<img src="maintest.JPG" width="100" height="118"/></a>

<a href="main2.JPG" rel="lightbox[galleri1]"image #3 title="Den här texten kommer visas under bilden och är valfri">

<img src="main2.JPG" width="100" height="118"/></a>

 

<p>  </td></tr>

</table>

</div>

[Jonas__B]

Jösses, det var en del kod.

 

Du borde ta en titt på att ha css i en extern fil istället.

Men så länge behöver du justera följande rader:

<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

<body link="#FFFFCC" bgcolor="#000000" link="#FFFFCC" vlink="#FFFFCC" alink="#FFFFCC" text="#FFFFCC">

Har du rätt sökväg till js-filerna?

 

 

 

<a href="maintest.JPG" rel="lightbox[galleri1]" title="Den här texten kommer visas under bilden och är valfri">
<img src="maintest.JPG" width="100" height="118"/></a>
<a href="main2.JPG" rel="lightbox[galleri1]" title="Den här texten kommer visas under bilden och är valfri">
<img src="main2.JPG" width="100" height="118"/></a>

Sedan länkar du till samma bild som du visar - skall du inte visa en annan version, men större?

[happyfejs]

Yes, som Jonas säger, du har lite konstiga element på en del ställen, body taggen är lite konstig och du har lite skumma saker i dina img taggar, kopiera min eller Jonas kod rakt av och lägg in dina sökvägar där det står att du ska lägga in dem, lägg inte till nått annat förens du ser att det funkar..

 

Kan du visa oss vart din hemsida ligger? samt vart bilden ligger som du vill visa i lightboxen? Så kan vi visa hur du ska länka..

[emmawa]

Vet någon av er vart man kan hitta någon som kan css och skulle kunna fixa till hemsidan, och hur mycket det skulle kosta? är så less på att pussla med detta när jag igentligen inte kan. Samma med lightbox? vad kan det tänkas kosta att anställa någon som får ordning på koderna?

 

 

[Jonas__B]

Ett alternativ är att köpa ett färdigt tema som du kan utgå ifrån. Då är det korrekt kod, semantiskt sett och jag tror att det är lättare för dig.

 

Lightbox funktionen kommer ofta färdiginstallerat med temat också.

 

http://themeforest.net/category/site-templates/personal