Jag har sett på hemsidor att en del har galleri. Jag själv har gjort funktioner och listar bilder som finns i en viss mapp, är det mer bilder än 10 så kommer längst ner en "Nästa sida"-länk. <!-- Då denna fråga återkommer ganska ofta, så har jag anpassat och modifierat Det fungerar aldeles utmärkt! (Det första exemplet) Jag har också fått den frågan tidigare, men inte löst det. Hej Bo, Men så bra då. Det står att tråden är LÖST, men det kanske finns andra som är intresserade av hur lösningen ser ut! Så lite kod skadar inte. Galleri
Som jag förstår måste det finnas något program som bygger upp HTML-sidan.
Var får man tag på detta program?
Mao om galleriet innehåller t ex 5 sidor så för varje gång jag bläddrar till nästa sida så byggs en HTML-sida för denna gallerisida.Sv: Galleri
Är det så du menar?
Min funktio är gjord i VBScript (ASP) och inte Javascript dock.Sv: Galleri
ett litet bildgalleri här, du kan välja var du vill ha tumbnailen,
antalet, positionen mm. mm. genom en lätt ändring i koden.
Textbeskrivning under bilderna, samt vid OnMouseOver en liten bildbeskrivning.
Vill du inte ha någon texteffekt under bilderna så är det bara att
ta bort det som står mellan <style> och </style> i koden, du hittar säkert var.
Som du ser finns även en bildbeskrivning när man för musen över bilden också,
den ligger i ALT-taggen. Denna kod går att anpassa mycket mer om man vill,
du får återkomma i så fall. Alla bilder måste vara ungefär lika stora (bredd x höjd) -->
<html>
<head>
<title>Bosses Bildgalleri</title>
<style>
<!--
A:link {
text-decoration: none;
color: lightgreen;
}
A:active {
text-decoration: none;
color: lime;
}
A:visited {
text-decoration: none;
color: gray;
}
A:hover {
text-decoration: underline;
color: yellow;
}
-->
</style>
<script language="javascript">
<!--
if(document.images){
img1=new Image();
img2=new Image();
img3=new Image();
img4=new Image();
img5=new Image();
img6=new Image();
img7=new Image();
img8=new Image();
img9=new Image();
img10=new Image();
img1.src="001.jpg";
img2.src="002.jpg";
img3.src="003.jpg";
img4.src="004.jpg";
img5.src="005.jpg";
img6.src="006.jpg";
img7.src="007.jpg";
img8.src="008.jpg";
img9.src="009.jpg";
img10.src="010.jpg";
}
-->
</script>
</head>
<BODY BGCOLOR="lightblue">
<table style="margin-right:4px" bgcolor =silver width=100% height=100% >
<TD width=100% height=100%>
<p align=center><BR><BR><img name="spotlight" src="001.jpg" border=0 widht=70% height=70% >
</TD>
<!--
Vill du ha tumbnailen till vänster i stället så lägg första td-taggen direkt EFTER </TABLE-taggen>
Då får du oskså ändra länkens placering.
-->
<td style="padding-left:10px"><table cellpadding=5 cellspacing=5 colspan=2 rowspan=5></td>
<td>
Din text
Din text
</td>
<tr><td>
Din text
</td>
<td>
Din text
</td>
<tr><td>
Din text
</td>
<td>
Din text
</td>
<tr><td>
Din text
</td>
<td>
Din text
</td>
<tr><td>
Din text
</td>
<td>
Din text
</td>
</table>
Flera bilder
<!-- I raden här ovan ska du länka till dina näst tio bilder,
d.v.s en fil (kan heta bildgalleri2.htm) med samma kod som denna,
bara ändra bildnamnen. -->
</body>
</html>
---------------------------------------------------------------------------------------------
<!--I exempelet nedan får man lägga varje bild som bakgrund i en egen popupruta.
Och sedan anropa denna med hjälp av koden nedan. Detta exempel gör att man ej
är beroende av bildstorleken, bara att anpassa popupstorleken efter bildens storlek.
De två översta bilderna aktiveras med OnMouseOver, de två nedre med OnClick.
Jag har ännu fler exempel på bildgalleri som jag gjort. men detta kanske räcker -->
<HTML>
<HEAD>
<TITLE> bilder </TITLE>
<style type="text/css">
p.margin {margin-left: 0cm}
</style>
</HEAD>
<BODY BGCOLOR=GREEN >
<TABLE WIDTH= 150 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TD>
onMouseOver="w = window.open('bild1.jpg','PopUp','width=420,height=320, top=60,left=200, menubar=no'); return true;"
onMouseOut=" w.window.close(); return true;">
</TD>
<TD>
onMouseOver="w = window.open('bild2.jpg','PopUp','width=420,height=320, top=80,left=200, menubar=no'); return true;"
onMouseOut=" w.window.close(); return true;">
</TD>
</TABLE>
<BR><BR><BR>
<TABLE CELLPADDING=0 CELLSPACING=0 >
<TR>
<TD>OnClick="w = window.open('bild3.jpg','PopUp','width=450,height=350, top=50,left=200, menubar=yes'); return true;"
OnMouseOver=" w.window.close(); return true;">
</TD>
<TD>OnClick="w = window.open('bild4.jpg','PopUp','width=500,height=400, top=80,left=250, menubar=yes'); return true;"
OnMouseOver=" w.window.close(); return true;">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Svara
Sv: Galleri
Men...
om jag vill att en valfri text ska visa under den stora bilden (spotlight) hur gör jag det?
Text om jag för pekaren över lilla bilden så ska dels den visas förstorad i spotligth men också ska en motsvarande text visas under spotlighten.Sv: Galleri
Om jag får tid och lust i helgen (beror lite på vädret) så ska jag försöka klura lite.
Kommer jag på nåt så skriver jag!Sv: Galleri
tack för hjälpen och tips på bra programförslag.
Nu fungerar gallerisidan utmärkt (jag har också lyckats få in en text ruta under bilden med beskrivande text.
Återigen tack för hjälpen :-)Sv: Galleri