Powiększ tekst:
luty 20th, 2013, 18:40 @ java script, Programowanie, Programy, Strony www
Zdjęcia PRZED operacją oraz zdjęcia PO operacji w jednym oknie.
Kolega – lekarz – zapytał się mnie, czy nie spotkałem się w sieci z programem, za pomocą którego mógłby przedstawić równolegle dwa zdjęcia na jednym ekranie. Z lewej strony zdjęcie przed operacją, a z prawej ? zdjęcie po operacji. Po krótkiej chwili zaproponowałem mu pakiet Office, a w nim Power Point. Szybko się zorientowałem, że nie o to mu chodziło. W Power Point musiałby tworzyć prezentację dodawać zdjęcia ? popracować nad tym, a jemu chodziło o wrzucenie zdjęć i BACH, galeria gotowa.
Zaproponowałem mu, że pochylę się nad tematem i spróbuję coś naskrobać w HTMLu bez bazy i bez dynamicznych galerii. Niestety, jak się okazało, nie było to takie łatwe. W internecie nic nie znalazłem. Zacząłem eksperymentować z pojedynczymi zdjęciami i JavaScript. Udało się!
Poniższy kod został sprawdzony w większości przeglądarek internetowych.
<html>
<head>
<title>2w1 – Galeria dla lekarzy.</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-2″>
<style type=”text/css”>
table { font-size: 14px; font-family: monospace }
a { font-size: 14px; color: white }
p { font-size: 30px; color: white; }
body { background-color:#555; font-size: 16px; color: white }
</style>
</head>
<body>
<table border=”0″ width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″>
<tr height=”20px”>
<td align=”center”><p>PRZED</p></td><td align=”center”><p>PO</p></td></tr><tr>
<td width=”50%” valign=”midle” align=”center”>
<img src=”przed/01.jpg” name=”photoslider1″ width=”100%” height=”100%”>
</td>
<td width=”50%” valign=”midle” align=”center”>
<img src=”po/01.jpg” name=”photoslider2″ width=”100%” height=”100%”>
</td>
</tr>
<tr><td height=”10px” colspan=”2″>
<table border=”0″ width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr><td align=”left”>
<form method=”POST” name=”rotater1″>
<script language=”JavaScript1.1″>
var photos1=new Array()
var which1=0
photos1[0]=”przed/01.jpg”
photos1[1]=”przed/02.jpg”
photos1[2]=”przed/03.jpg”
photos1[3]=”przed/04.jpg”
photos1[4]=”przed/05.jpg”
photos1[5]=”przed/koniec.jpg”
</script>
</form>
</td><td width=”300px” align=”center”>
<form method=”POST” name=”rotater”>
<script language=”JavaScript1.1″>
function backward(){
if (which2>0 && which1>0){
window.status=”
which2–
which1–
document.images.photoslider2.src=photos2[which2]
document.images.photoslider1.src=photos1[which1]
}
}
function forward(){
if (which2<photos2.length-1 && which1<photos1.length-1){
which2++
which1++
document.images.photoslider2.src=photos2[which2]
document.images.photoslider1.src=photos1[which1]
}
else window.status=’End of gallery’
}
</script>
<input type=”button” value=” << ” name=”B2″ onClick=”backward()”>
<input type=”button” value=” >> ” name=”B1″ onClick=”forward()”>
<br>
<a href=”#” onClick=”which2=1;which1=1;backward();return false”>Pierwsze zdjęcie</a>
</form>
</td><td align=”right”>
<form method=”POST” name=”rotater2″>
<script language=”JavaScript1.1″>
var photos2=new Array()
var which2=0
photos2[0]=”po/01.jpg”
photos2[1]=”po/02.jpg”
photos2[2]=”po/03.jpg”
photos2[3]=”po/04.jpg”
photos2[4]=”po/05.jpg”
photos2[5]=”po/koniec.jpg”
</script>
</form>
</td></tr></table>
</td></tr></table>
</body>
</html>
A paczkę można pobrać tu: 2w1galeria.
Poniżej dołączam instrukcję użytkowania:
Aby dodać zdjęcia PRZED i PO należy dodać w dwóch miejscach skryptu poniższą linie:
photos1[4]=”przed/05.jpg”
pamiętając o zwiększeniu liczby [4] na [5] i tak dalej oraz 05 na 06 i tak dalej, zawsze zwiększając o jeden.
W katalogach ?przed? oraz ?po? należy dorzucić zdjęcia z nazwą 06.jpg i tak dalej.
Nie jest dużo roboty, ale w zamian mamy pewność, że galeria ruszy na komputerach z zainstalowaną przeglądarką www i systemem czy to windows, czy to linux.
Gotową galerię przekazałem koledze – lekarzowi i jak się później dowiedziałem, w ogóle z niej nie korzystał…
