script eller liknande sökes, för presentation av fotografier på en hemsida, ca 40 talet. Någon som har ett script java eller liknande. eller en länk (Obs reklamfri)
bildbank
6 svar · 540 visningar · startad av Jonte23
HEJ!
Varför inte koda ihop en sida i lämplig design, tex 4 rader med 10 bilder i, eller 4 kolumner med 10 bilder i?
Tydligen vet du hur många bilder det är, och det ska inte ändras?
Dvs, vad vill du egentligen ha för funktioner eftersom du ställer frågan i Javascript-forumet?
Vilka filnamn har bilderna? Vilka funktioner förväntar du dig av skriptet? (Popup, bildtext osv)
Jag har gjort ett ganska simpelt galleri i ASP.NET som du kan få om du vill.
man tackar Vimp för det och kollar. Sen har vi Nitro troligt jpg /gif och jag vill bara att man skall se bilder och kunna förstora dom. vidare så svarar jag dej Johnny. Vill undvika en massa html sidor eller liknande, bilderna kommer att bytas ut, det är ett familje album jag tänkte mej, där vänner o kära skall kunna hämta ner bilder på barn o barnbarn
Du kan ju kolla om detta kan va nåt!
<html>
<head>
<title>Bildgalleri</title>
<style type="text/css">
html, body
{background-color:lightblue; }
table
{background-color:blue width:80%; height:100%;border:2px solid black;
font-family:arial, verdana; font-size:14pt;}
td
{position:absolute; left:0%; top:1%; background-color:blue;
border:2px solid black; color:yellow;}
div
{width:11%;height:95%;position:absolute;left:87%;top:1%;overflow:auto;direction:rtl;
scrollbar-base-color: darkblue;scrollbar-track-color:white;scrollbar-arrow-color:blue;}
<!--
Vill man ha plats med många småbilder i diven här ovan
så är det bara att öka procenttalet för height
-->
#bild1 {display:none; border:inset 10px white;}
#bild2 {display:none; border:inset 10px silver;}
#bild3 {display:none;}
#bild4 {display:none;}
#bild5 {padding:15; background-color:white; display:none; border:inset 8px white;}
#bild6 {padding:15; background-color:silver; display:none; border:inset 8px white;}
#bild7 {display:none;}
#bild8 {display:none;}
#bild9 {display:none;}
#bild10 {display:none;}
#bild11{padding:15; background-color:white; display:none;}
#bild12{padding:15; background-color:silver; display:none;}
</style>
<script type="text/javascript" language=javascript>
<!--
function bild(currPic){thisText=document.getElementById(currPic).style
if (thisText.display == "block"){thisText.display="none"}
else { thisText.display = "block" } }
-->
</script>
</head>
<body>
<table>
<td>
Jag gjorde för något år sedan detta lilla exempel på ett bildgalleri.
<BR><BR>
Scriptet känner av bildens storlek, jag har här satt 570 x 430 som max bildstorlek
<BR>
för bilderna 4 t.o.m. 9, vilket alltså inte behövs .
<BR>
Du kan själv ange önskad maxstorlek på bilderna.
<BR><BR>
Padding 15px på bild 5, 6, 11 och 12 gör att de får en ram (sk. passpartou).
<BR>
Padding resp. inset gör bara att man får lite olika ramar om så önskas.
<BR><BR>
Bilderna som ej har någon storleksangivelse visas som de är.
<BR>
Dock bör inte storleken överstiga 580 x 440.
<BR>
Detta gäller vid skärmupplösning 800 x 600.
<BR><BR>
<font color=red> OBS! </font>Har man annan upplösning så får man ändra bildernas maxstorlek.
<BR><BR>
Är ursprungsbilden större än angiven storlek i koden
<BR>
så visas de förminskade inom den storlek jag angivit här.
<BR><BR>
<font color=red> OBS! </font> Om man anger annan bildstorlek än ursprungsbilden
<BR>
så måste det anges proportionellt, annars förvrängs ju bilden.
<BR><BR>
Bara att välja om man vill ha OnClick eller OnMouseOver på bilderna
<BR>
För bild 1 t.o.m 6 gäller: Klicka för att visa bilderna, klicka åter för att dölja bilden.
<BR>
För bild 7 t.o.m 12 gäller: OnMouseOver på bilderna.
<BR><BR>
Detta går att bygga ut och anpassa nästan som man vill.
<BR>
I koden heter bilderna 001.jpg t.om. 012.jpg
<BR>
Byt bara dessa bildnamn mot dinbild1.jpg dinbild2.jpg o.s.v.
<BR>
Eftersom man ej behöver någon bodyscroll för denna sida så kan man
<BR>
lägga in scroll=no i body-taggen.
<BR>
Att denna tabell blir högre än sidan beror på denna informationstext.
<BR>
Den anpassas åter till 100% om du tar bort min textbeskrivning.
<BR>
d.v.s allt som ligger mellan < td > och < / td > i denna tabell
</td>
<!-- Nedan anger du maxstorleken, obs! Om bilden beskärs så måste det göras proportionellt, annars förvrängs bilden -->
<td id="bild1"><IMG SRC=001.jpg alt="bildbeskrivning"></td>
<td id="bild2"><IMG SRC=002.jpg alt="bildbeskrivning"></td>
<td id="bild3"><IMG SRC=003.jpg alt="bildbeskrivning"></td>
<td id="bild4"><IMG SRC=004.jpg width=570 height=430 alt="bildbeskrivning"></td>
<td id="bild5"><IMG SRC=005.jpg width=540 height=400 alt="bildbeskrivning"></td>
<td id="bild6"><IMG SRC=006.jpg width=540 height=400 alt="bildbeskrivning"></td>
<td id="bild7"><IMG SRC=007.jpg width=570 height=430 ></td>
<td id="bild8"><IMG SRC=008.jpg width=570 height=430 ></td>
<td id="bild9"><IMG SRC=009.jpg width=570 height=430></td>
<td id="bild10"><IMG SRC=010.jpg width=400 height=300></td>
<td id="bild11"><IMG SRC=011.jpg width=400 height=300><BR>bildbeskrivning om man vill</td>
<td id="bild12"><IMG SRC=012.jpg width=400 height=300><BR>bildbeskrivning om man vill</td>
</table>
<div>
<A HREF OnClick="bild('bild1');" OnClick="bild('bild1');"><img src=001.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild2');" OnClick="bild('bild2');"><img src=002.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild3');" OnClick="bild('bild3');"><img src=003.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild4');" OnClick="bild('bild4');"><img src=004.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild5');" OnClick="bild('bild5');"><img src=005.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnClick="bild('bild6');" OnClick="bild('bild6');"><img src=006.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild7');" OnMouseOut="bild('bild7');"><img src=007.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild8');" OnMouseOut="bild('bild8');"><img src=008.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild9');" OnMouseOut="bild('bild9');"><img src=009.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild10');" OnMouseOut="bild('bild10');"><img src=010.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild11');" OnMouseOut="bild('bild11');"><img src=011.jpg width=60 height=55 title="din bildbeskrivning"></A>
<A HREF OnMouseOver="bild('bild12');" OnMouseOut="bild('bild12');"><img src=012.jpg width=60 height=55 title="din bildbeskrivning"></A>
<BR>
<A HREF=bildsida2.htm>Se flera bilder </A>
<!--
Om man ej vill ha alla småbilderna på en sida länkar man bara till en sida med exakt samma kod som denna,
som då kan heta bildsida2.htm. Man måste förstås ändra bildnamnen till bild13, bild14 o.s.v.
-->
</div>
</body>
</html>
Jonte23 skrev:
Sen har vi Nitro troligt jpg /gif och jag vill bara att man skall se bilder och kunna förstora dom.
Jag menar inte filtypen. Jag menar snarare hur är bilderna sorterade? Finns det någon slags numrering, tex bild001.gif, bild002.gif osv, eller har de helt andra namn?