Gå til innhold

trenger hjelp til noe små koding ang. bilder

cmi

Av cmi
i Programmering og webutvikling

Anbefalte innlegg

cmi

cmi

Skrevet
Skrevet

Hallo!

 

Det jeg lurer på er om noen kan hjelpe meg over msn eller noe med litt små koding, trenger og få inn noe css koder på siden min som gjør at bilde åpner seg på en spesiell måte, jeg har kronkret eksempel.

 

Takk på forhånd til de som gidder :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
cmi

cmi

Skrevet
  • Forfatter
Skrevet

Her er nå kodene om de hjelper, jeg skal ha de blandet inn i min så jeg får den effekten på bildene:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

 

<title>Lightbox JS v2.0 | Test Page</title>

 

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

 

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

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

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

 

<style type="text/css">

body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }

</style>

 

</head>

<body>

 

 

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

 

 

 

 

</body>

</html>

Lenke til kommentar
KiKKA

KiKKA

Skrevet
Skrevet (endret)
Det er greit, men står det hvor på min side jeg skal putte det? neh!

6580988[/snapback]

 

 

Det står jo høvelig bra forklart! Du laster ned zip-fila, ekstrakterer den, og legger inn denne koden mellom <head> og </head> i kildekoden på din side:

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

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

 

Deretter legger du inn rel="lightbox" på en link-tag (a-tag) som vist nedenfor!

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

 

Da skal det funke!

 

PS

I mappa vil følgende filer/mapper ligge:

/images

/js

/css

index.html

 

Så kan du legge din_side.html i samme mappa!

 

Bedre nå?

Endret av KiKKA
Lenke til kommentar
cmi

cmi

Skrevet
  • Forfatter
Skrevet (endret)

Ok, gjorde det og tror det funket :) skal <head> koden se sånn ut nå?:

 

<head>

<title>Index</title>

<link rel="stylesheet" href="style.css" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="author" content="Homefront Studios" />

<link rel="stylesheet" href="style.css" type="text/css" />

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

 

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

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

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

</head>

Endret av cmi
Lenke til kommentar
cmi

cmi

Skrevet
  • Forfatter
Skrevet (endret)

Ja ok :) ja ingenting som er freeka ut ennå, nå må jeg bare få inn et bilde for og se om det funker :)

 

 

<tr>

<td>

<table width="739">

<tr>

<td width='156' class=bakgrunnAktKal rowspan=2 align="center">

<img border="0" src="minitayrbilder/fotoga1.jpg" align="right" style="border: 3px double #FFFFFF"></td>

<td width="73%">

<b class=ingress>Smålom (Gavia arctica)</b> <br><br>

Hovet, Buskerud, Norge - 2006</td>

</tr>

<tr>

<td>

 </td>

</tr>

<tr>

<td colspan=2 bgcolor=#ffffff align="center"></td>

 

hvor inn der skal jeg putte det til bilde? regner med det er inn der :)

Endret av cmi
Lenke til kommentar
KiKKA

KiKKA

Skrevet
Skrevet

Du må legge til en link-tag "rundt" miniatybildet. Og det er viktig at du husker rel="lightbox"!

 

<a href="link_til_stort_bilde.jpg" title="stort bilde" rel="lightbox"> <img border="0" src="minitayrbilder/fotoga1.jpg" align="right" style="border: 3px double #FFFFFF"/></a>

 

Da skal det være greit.. Tror jeg..

Lenke til kommentar
KiKKA

KiKKA

Skrevet
Skrevet (endret)

Jeg sier at du må linke til storbildet, hvis det er det du ønsker!

Se her hvordan man linker!

 

I stedet for å ha (som på linja ovenfør) en tekst som en link, regner jeg med at man skal trykke på thumbnailen til det spesifikke bildet for å få opp det store. Dermed må du legge en link-tag "rundt" bildet. I din kode har du dette bildet:

 

<img border="0" src="minitayrbilder/fotoga1.jpg" align="right" style="border: 3px double #FFFFFF"/>

 

 

Du må legge en link-tag rundt dette, slik som jeg har gjort i min forrige post!

 

Link-tagen som du skal bruke ser slik ut:

<a href="link_til_stort_bilde.jpg" title="stort bilde" rel="lightbox">DET MAN SKAL TRYKKE PÅ</a>

 

Siden du skal trykke på en thumb (gjetter jeg) må du legge inn den første koden ovenfor i stedet for "DET MAN SKAL TRYKKE PÅ". Der med blir det som følger:

 

<a href="link_til_stort_bilde.jpg" title="stort bilde" rel="lightbox"> <img border="0" src="minitayrbilder/fotoga1.jpg" align="right" style="border: 3px double #FFFFFF"/></a>

 

Dette er det samme som i min forrige post!

Endret av KiKKA
Lenke til kommentar
cmi

cmi

Skrevet
  • Forfatter
Skrevet (endret)

Humm, fikk linket til bilde, men fikk ikke effekten :hmm:

 

Kodene nå:

 

<td>

<table width="739">

<tr>

<td width='156' class=bakgrunnAktKal rowspan=2 align="center">

<a href="Fugle bilder/Smaalom (1).jpg" title="stort bilde" rel="lightbox"> <img border="0" src="minitayrbilder/fotoga1.jpg" align="right" style="border: 3px double #FFFFFF"/></a>

<td width="73%">

<b class=ingress>Smålom (Gavia arctica)</b> <br><br>

Hovet, Buskerud, Norge - 2006</td>

</tr>

<tr>

<td>

 </td>

</tr>

<tr>

<td colspan=2 bgcolor=#ffffff align="center"></td>

</tr>

 

 

Noe som er galt her siden effekten ikke er her??

Endret av cmi
Lenke til kommentar
KiKKA

KiKKA

Skrevet
Skrevet

Se på hjemmesiden til scriptet:

 

Support:

 

It doesn't work at all. The image opens up in a new page. What's wrong?

    This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:

    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">

    A quick fix to this problem is to append the initLightbox() to the onload attribute as so:

    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

 

Hvis du nå bytter ut <body> med <body onload="initLightbox()"> på siden din tror jeg det vil fungere!

Lenke til kommentar
cmi

cmi

Skrevet
  • Forfatter
Skrevet

Det kan godt hende jeg virker dum, men vil ha dette riktig, er det denne <body> jeg skal bytte ut med <body onload>??

 

<body>

<div id="container" style="width: 760px; height: 522px">

<div id="header-wrap">

<div id="header" style="width: 760px; height: 200px">

<div id="navcontainer">

<ul id="nav">

<li><a href="index.html">Hjem</a></li>

<li><a href="#">Foto Galleri</a></li>

<li><a href="observasjoner.htm">Observasjoner</a></li>

<li><a href="gjestebok.htm">Gjestebok</a></li>

<li><a href="#">Tutorials</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

<p><img src="images/Header%20org.jpg"></p></div><!-- header -->

</div><!-- header-wrap -->

Lenke til kommentar
KiKKA

KiKKA

Skrevet
Skrevet

Du bytter ut selve der det står <body> med <body onload="initLightbox()"> ! Da blir koden slik:

 

<body onload="initLightbox()">
<div id="container" style="width: 760px; height: 522px">
<div id="header-wrap">
<div id="header" style="width: 760px; height: 200px">
<div id="navcontainer">
<ul id="nav">
<li><a href="index.html">Hjem</a></li>
<li><a href="#">Foto Galleri</a></li>
<li><a href="observasjoner.htm">Observasjoner</a></li>
<li><a href="gjestebok.htm">Gjestebok</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<p><img src="images/Header%20org.jpg"></p></div><!-- header -->
</div><!-- header-wrap -->

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...