InfoPage.pl » 2w1. Galeria JavaScript dla lekarza. Dwa okna w jednym. » Moje porady dla ludzi z netu
   InfoPage - strona główna bloga InfoPage - Lista artykułów znajdująca się na moim blogu InfoPage - zmiana adresu mojego bloga InfoPage - zmiana layoutu mojego bloga Infopage - linki do zaprzyjaźnionych stron
top
Powiększ tekst:

2w1. Galeria JavaScript dla lekarza. Dwa okna w jednym.

February 20th, 2013, 18:40 @ java script, Programowanie, Programy, Strony www
0 votes

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ł…



Zostaw komentarz:

Komentarze są moderowane, nie wysyłaj więc jednego komentarza kilka razy...