m.InfoPage.pl » Moje porady dla ludzi z netu » wersja mobilna.

Powrot do strony glownej m.InfoPage.pl | Wszystkie artykuly - lista


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

Data dodania: 2013-02-20 18:40:17

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


Powrot do strony glownej m.InfoPage.pl | Wszystkie artykuly - lista


Serwis: m.infopage.pl ma charakter edukacyjny. Bardzo prosze nie kopiowac zawartosci mojego serwisu.