WGaleria obrazków

Galeria obrazków

Czasami potrzebujemy wyświetlić na stronie galerię obrazków w postaci:
duży obrazek
szereg miniatur
w której, po kliknięciu na miniaturkę, wyświetli jej powiększenie jako duży obrazek. Wykonamy to w postaci formularza ze skrypem javascript.

Skrypt javascript wygląda następująco:

<!--
image_thumb = new Array(10);
image = new Array(10);

image_thumb[0]="images/thumb_006.jpg"
image_thumb[1]="images/thumb_003.jpg"
image_thumb[2]="images/thumb_001.jpg"
image_thumb[3]="images/thumb_002.jpg"
image_thumb[4]="images/thumb_004.jpg"
image_thumb[5]="images/thumb_005.jpg"

image[0]="images/reg_006.jpg"
image[1]="images/reg_003.jpg"
image[2]="images/reg_001.jpg"
image[3]="images/reg_002.jpg"
image[4]="images/reg_004.jpg"
image[5]="images/reg_005.jpg"

	nn4=(document.layers)?1:0;
	ie=(document.all)?1:0;
	screen_w=screen.availWidth-20;
	screen_h=screen.availHeight-40;
		
		var current_image=0;
		
		function LoadMidPicture(image_index)
		{			
			current_image=image_index;			
			document.big_photo.src = image[image_index];
			return;
		}		

		function ShowBigPicture(image_index)
		{
			//if (ie)
			{
				NewWindow=window.open('', '','width='+400+',height='+300+',toolbar=no,directories=no,menubar=no,locations=no,status=no,scrollbars=yes,resizable=yes,fullscreen=no');
				NewWindow.document.open();
  
				NewWindow.document.writeln("<html>\n<head>\n</head>");
				NewWindow.document.writeln("<body leftmargin=0 topmargin=0 style=\"font-family:Arial, Helvetica, sans-serif; font-size:11pt; background-color:#ffffff\">");
				NewWindow.document.writeln("<title>Widok</title>");
				NewWindow.document.writeln("<table width=100% height=100% style=\"font-family:Arial, Helvetica, sans-serif; font-size:11pt; background-color:#ffffff\">");
				NewWindow.document.writeln("<tr><td valign=center align=center>\n<a href=\"javascript:window.close();\"><img src="+image[image_index]+" border=0></a></td></tr>");
				NewWindow.document.writeln("<tr><td align=center style=\"font-family:Arial, Helvetica, sans-serif; font-size:11pt; background-color:#ffffff\"><a href=\"javascript:window.close();\">Zamknij okno</a>\n</td></tr>");
				NewWindow.document.writeln("</table>");
				NewWindow.document.writeln("</body>\n</HTML>\n");
				NewWindow.document.close(); 
				NewWindow.focus(); 		
			} 
			return;
		}
//-->

Kod skryptu zapisujemy na stronie lub w postaci zewnętrznego pliku image.js
W powyższym skrypcie jest możliwość umieszczenia 10 miniatur, której liczbę możemy ustawić wg własnych potrzeb.

image_thumb - miniaturka
image - duży obrazek

Galerię wykonamy w postaci:

<input type="hidden" name="current_photo_path" value="" />
<div class="images">
<script type="text/javascript">
<!--
document.write('<a href="javascript: ShowBigPicture(current_image)">')
//-->
</script>
<img name="big_photo" alt="Widok" src="images/reg_006.jpg" height="225" width="300" class="image"/>
<div>

Jest to blok odpowiedzialny za wyświetlenie dużego obrazku. Po nim umieszczamy blok miniatur w postaci:

<div class="thumbs">
<table cellspacing="0" cellpadding="0" border="0">
<tr> <td>
<a href="">
<script type="text/javascript">
<!--
   document.write('<a href="javascript: LoadMidPicture(0)">')
//-->
</script>             
<img alt="Widok ogólny" src="images/thumb_006.jpg" height="75" width="100" class="thumb" /></a>
</td>
<td>
<a href="">
<script type="text/javascript">
<!--
   document.write('<a href="javascript: LoadMidPicture(1)">')
//-->
</script>
<img alt="Elewacja frontowa" src="images/thumb_001.jpg" height="75" width="100" class="thumb" /></a>
</td>
<td>
<a href="">
<script type="text/javascript">
<!--
   document.write('<a href="javascript: LoadMidPicture(2)">')
//-->
</script>
<img alt="Elewacja boczna" src="images/thumb_003.jpg" height="75" width="100"  class="thumb" /></a>
</td>
</tr><tr>
<td>
<a href="">
<script type="text/javascript">
<!--
   document.write('<a href="javascript: LoadMidPicture(3)">')
//-->
</script>
<img alt="Elewacja tylna" src="images/thumb_004.jpg" height="75" width="100"  class="thumb" /></a>
</td>
<td>
<a href="">
<script type="text/javascript">
<!--
   document.write('<a href="javascript: LoadMidPicture(4)">')
//-->
</script>
<img alt="Elewacja ogrodowa" src="images/thumb_002.jpg" height="75" width="100"  class="thumb" /></a>
</td>
<td>
<a href="">
<script type="text/javascript">
<!--
   document.write('<a href="javascript: LoadMidPicture(5)">')
//-->
</script>
<img alt="Przekrój" src="images/thumb_005.jpg" height="75" width="100"  class="thumb" /></a>
</td> </tr>
                                   	
</fieldset></form></table> 
</div>

Ja umieściłem blok miniatur w tabeli, ale rozwiązanie jest zależne wyłącznie od Twoich potrzeb. W tym skrypcie jest jeszcze jedna "ukryta" właściwość. Po kliknięciu w polu dużego obrazka możemy go wyświetlić w osobnym okienku przeglądarki. Wielkość dużego obrazka, miniatur i okienka ustawiamy oczywiście wg własnych potrzeb. Oczywiście, parametry class również dopasowywujemy też wg siebie. Efekty naszej pracy możemy zobaczyć ponieżej.

Przykład