# Shkenca > Informatik dhe Internet > Trajnim & leksione >  Pure CSS Image Gallery demo

## Baptist

Nje "giveaway" nga truqet e mia.
Kodim i faqes per galeri fotografish pa perdorimin e java-skriptit.
[version demonstrativ ne zhvillim].

I testuar ne ie6 fx3.5, opera 9x...
Marre parasysh se kodin e kam bazuar ne CSS v1.0. mund te them me siguri te plote se punon edhe ne IE 5 me gjase ndoshta edhe ne 4.01. Por kjo nuk me kujtohet andaj dhe mund te gabohem.


Rezultati ka kete pamje:


Ndersa kodi eshte ky:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Image Gallery</title>
	<style type="text/css">
		*
		{ 
			margin:	0;
			padding:	0;
			border:	0;
			font-family: 'Trebuchet MS', Helvetica, sans-serif;
		}
		body
		{
			background:	white;
			width:	774px; 
			margin:	5px auto;
		}
		.gallery
		{
			position:	relative;
			height:	100%;
			width:	100%; 
			margin:	4px 0 4px 0px;
			background: url('http://www.layoutstar.com/images/allbackgrounds/bgs/artistic/artistic_background_01.gif') no-repeat 66% 56%; 
		}
		.thumb span
		{
			position:	absolute;
			top:		1px;
			left:		218px;
			border:	outset 1px #f0f9ff; 
			visibility:	hidden;
			text-decoration:	none;
			color:	black;
			padding:	30px; 
		}
		.n1:active span,.n1:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/dry-drought-arid-dirt.jpg')
		}
		.n2:active span,.n2:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/Sun-Valley-golf-course.jpg')
		}
		.n3:active span,.n3:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/close-up-colorful-iris.jpg')
		}
		.n4:active span,.n4:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/stress-fish-blender.jpg')
		}
		.n5:active span,.n5:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/paragliding-valley-sport.jpg')
		}
		.n6:active span,.n6:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/hurricane-space-earth-horizontal.jpg')
		}
		.n7:active span,.n7:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/world-globe-in-oyster-beach.jpg')
		}
		.n8:active span,.n8:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/periodic-table-chemistry-science.jpg')
		}
		.thumb:active span,.thumb:focus span
		{
			visibility:	visible;
			background-repeat: no-repeat;
			background-position: center 30%;
			background-color: #f9f9fa;
		}  
            .thumb:active img,.thumb:focus img
		{
			border: 1px #666 solid
		}

		a img
		{
			height:	102px;
			width:	102px;
		}
		span img
		{
			visibility:	hidden; 
			width:	490px; 
			height:	320px; 
			display:	block; 
		}
		h1
		{
			padding:	30px 20px 30px 15px; 
			background-color: #444;
			color:	#f0f9ff;
			padding-left: 20px;
		}
		h1 i
		{
		color:	#aaff44;
		}
		b.o,b.m,b.x,b.i
		{
			display: block; background: #444; padding-top: 1px;
		}
		b.o 
		{
			margin: 0px 6px
		}
		b.m 
		{
			margin: 0px 3px
		}
		b.x
		{
			margin: 0px 2px
		}
		b.i
		{
			margin: 0px 1px; padding-top:2px
		}
		h2, h2 span
		{
			overflow: hidden;
			font: bold 38pt/1.2em georgia, 'Trebuchet MS';
			position: relative;
			width: 100%;
			text-align: center;
			color: #999;
			background: #444
		}
		h2 span, h2 br
		{
			color: #ddd; 
			top: 0px; left:0px;
			position: absolute; 
			display: block;
			width: 100%;
			height: .575em;
		}
		h1 small
		{
			font-size: 0.5em;
			display: block;
		}
		#botm
		{
			text-align: center;
			width: 100%;
			color: #444;
			line-height: 2em;
			background: #fcfdfe;
		}

		.gallery img
		{
			border: 1px #fff outset
		}
            a
            {
			outline:none 0; 
		}
		#au
		{
			background:	url('http://i35.tinypic.com/xbkdg9.jpg') repeat-x;
			font: normal 11px Tahoma;
			color: #000;
			border-top: 1px solid #ddd; 
			height: 25px;
			line-height: 25px;
			margin-top: 5px
		}
	</style>
<!--[if IE]>
	<style>
	a {outline:expression(hideFocus='true')
	</style>
<![endif]-->
</head>

<body>
<div>
 <b class="o"></b>
 <b class="m"></b>
 <b class="x"></b>
 <b class="i"></b>
<h1>Pure <i>CSS</i> Image Gallery demo<br><small>with <i>on click</i> swap</small></h1> 
 <b class="i"></b>
 <b class="x"></b>
 <b class="m"></b>
 <b class="o"></b>
</div>

<div id="au">
&nbsp; &bull; Aeneas Dardanus &bull;
</div>

<div class="gallery">
<a class="thumb n1" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/dry-drought-arid-dirt.jpg" alt=''><span>
<img src="" alt=''><br>Dried... (Bonneville Salt Flats)</span></a>
<a class="thumb n2" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/Sun-Valley-golf-course.jpg" alt=''><span>
<img src="" alt=''><br>Sun Valley, -looks green... (Idaho USA golf course)</span></a>
<br>
<a class="thumb n3" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/close-up-colorful-iris.jpg" alt=''><span>
<img src="" alt=''><br>Some Colorful surprise.</span></a> 
<a class="thumb n4" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/stress-fish-blender.jpg" alt=''><span>
<img src="" alt=''><br>Feeling safe?</span></a>
<br>
<a class="thumb n5" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/paragliding-valley-sport.jpg" alt=''><span>
<img src="" alt=''><br>Watch this...</span></a> 
<a class="thumb n6" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/hurricane-space-earth-horizontal.jpg" alt=''><span>
<img src="" alt=''><br>Hurricane or typhoon? -Can't tell - but it's Huge!</span></a>
<br>
<a class="thumb n7" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/world-globe-in-oyster-beach.jpg" alt=''><span>
<img src="" alt=''><br>...Some Nut in a shelve</span></a> 
<a class="thumb n8" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/periodic-table-chemistry-science.jpg" alt=''><span>
<img src="" alt=''><br>Need some chemistry to start things over.</span></a>
</div>

<div id=botm>
<p><small> Gallery <i>Images</i> are a property of 
<a href='http://www.billfrymire.com' title="you can see more here">bill frymire visuals</a>
 |&bull;|  b.b. Troy III p.a.e. </small></p>
</div>

<div style='border-top: solid 3px #af4; margin:0'>
<H2 title="TROY III"> TROY III <br><span> TROY III </span> </H2>
 <b class="i"></b>
 <b class="x"></b>
 <b class="m"></b>
 <b class="o"></b>
</div>

</body>
</html>
```

Perparesite ndaj tentimeve te ngjashme qe mund t'i gjeni ne internet:
1. fotografite e medha  nuk ngarkohen bashke me faqen duke shaktuar keshtu nje vonese te madhe dhe te pakuptueshme per shfrytezuesin. .
2. Mundeson shfletimin e fotografive te galerise duke klikuar per dallim nga te tjerat qe kryesisht kerkojne shenjuesin te qendroje mbi mostren. 
3. Validon si DTD HTML 4.01 STRIKT dhe CSS 2.1.
4. Mund te navigohet edhe me TAB-stop pa ndihmen e shenjuesit.

mangesia:
Nuk indikon vizuelisht shkarkimin e fotografise se madhe ne meskohe. [Gje qe mund te rregullohet, por shton kodin pa nevoje].

----------


## 'MAGNUM'

> 2. Mundeson shfletimin e fotografive te galerise duke klikuar per dallim nga te tjerat qe kryesisht kerkojne shenjuesin te qendroje mbi mostren.


Po mendon keshtu dika si keto me poshte ?

*Fotogaleri pa klikime:*



```
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0058)http://home.arcor.de/terrikay/css-galerie/ulle1_demo.html -->
<HTML lang=de xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Ulles Galerie, Version1</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<STYLE type=text/css>HTML {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #c0c0c0; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 100.01%; PADDING-TOP: 0px
}
BODY {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #c0c0c0; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 100.01%; PADDING-TOP: 0px
}
#gallery_position {
	MARGIN: 3em
}
#gallery {
	BORDER-BOTTOM: #000000 1px solid; POSITION: relative; BORDER-LEFT: #000000 1px solid; BACKGROUND-COLOR: #efedec; WIDTH: 456px; HEIGHT: 405px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid
}
#gallery IMG {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN: 25px; WIDTH: 386px; HEIGHT: 256px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid
}
#gallery A {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN: 4px; WIDTH: 80px; DISPLAY: block; FLOAT: left; HEIGHT: 53px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; TEXT-DECORATION: none
}
#gallery A:visited {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN: 4px; WIDTH: 80px; DISPLAY: block; FLOAT: left; HEIGHT: 53px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; TEXT-DECORATION: none
}
#gallery A SPAN {
	BACKGROUND-COLOR: #efedec; DISPLAY: none
}
#gallery A SPAN IMG {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN: 0px; WIDTH: 386px; HEIGHT: 256px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid
}
#gallery A:hover {
	BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid
}
#gallery A:focus {
	BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid
}
#gallery A:unknown {
	BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid
}
#gallery A:hover SPAN {
	Z-INDEX: 2; POSITION: absolute; WIDTH: 402px; DISPLAY: block; TOP: 88px; LEFT: 25px
}
#gallery A:focus SPAN {
	Z-INDEX: 2; POSITION: absolute; WIDTH: 402px; DISPLAY: block; TOP: 88px; LEFT: 25px
}
#gallery A:active SPAN {
	Z-INDEX: 2; POSITION: absolute; WIDTH: 402px; DISPLAY: block; TOP: 88px; LEFT: 25px
}
#gallery A:focus SPAN {
	Z-INDEX: 1
}
#gallery A:active SPAN {
	Z-INDEX: 1
}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.6001.18813"></HEAD>
<BODY>
<DIV id=gallery_position>
<DIV id=gallery><A style="BACKGROUND-IMAGE: url(thumb1.jpg)" 
href="http://home.arcor.de/terrikay/css-galerie/ulle1_demo.html#"><SPAN><IMG 
title="Bild 1" alt=Bild1 src="Ohne%20klick-Dateien/bild1.jpg"> Bildunterschrift 
1 </SPAN></A><A style="BACKGROUND-IMAGE: url(thumb2.jpg)" 
href="http://home.arcor.de/terrikay/css-galerie/ulle1_demo.html#"><SPAN><IMG 
alt=Bild2 src="Ohne%20klick-Dateien/bild2.jpg"> Bildunterschrift 2 </SPAN></A><A 
style="BACKGROUND-IMAGE: url(thumb3.jpg)" 
href="http://home.arcor.de/terrikay/css-galerie/ulle1_demo.html#"><SPAN><IMG 
alt=Bild3 src="Ohne%20klick-Dateien/bild3.jpg"> Bildunterschrift 3 </SPAN></A><A 
style="BACKGROUND-IMAGE: url(thumb4.jpg)" 
href="http://home.arcor.de/terrikay/css-galerie/ulle1_demo.html#"><SPAN><IMG 
alt=Bild4 src="Ohne%20klick-Dateien/bild4.jpg"> Bildunterschrift 4 </SPAN></A><A 
style="BACKGROUND-IMAGE: url(thumb5.jpg)" 
href="http://home.arcor.de/terrikay/css-galerie/ulle1_demo.html#"><SPAN><IMG 
alt=Bild5 src="Ohne%20klick-Dateien/bild5.jpg"> Bildunterschrift 5 
</SPAN></A><IMG class=bild1 alt="Bild 1" src="Ohne%20klick-Dateien/bild1.jpg"> 
</DIV></DIV></BODY></HTML>
```

*Dhe fotogaleri me klikime:*



```
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0043)http://home.arcor.de/terrikay/css-galerie/ -->
<HTML lang=de xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Bildergalerie mit CSS</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<STYLE type=text/css>HTML {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #afafaf; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 100.01%; PADDING-TOP: 0px
}
BODY {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #afafaf; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 100.01%; PADDING-TOP: 0px
}
#gallery_position {
	MARGIN: 3em
}
#gallery {
	BORDER-BOTTOM: #000000 1px solid; POSITION: relative; BORDER-LEFT: #000000 1px solid; BACKGROUND-COLOR: #efedec; WIDTH: 456px; HEIGHT: 405px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid
}
#gallery IMG {
	MARGIN: 25px; WIDTH: 386px; HEIGHT: 256px
}
#gallery A {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN: 4px; WIDTH: 80px; DISPLAY: block; FLOAT: left; HEIGHT: 53px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; TEXT-DECORATION: none
}
#gallery A:visited {
	BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN: 4px; WIDTH: 80px; DISPLAY: block; FLOAT: left; HEIGHT: 53px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; TEXT-DECORATION: none
}
#gallery A SPAN {
	DISPLAY: none
}
#gallery A STRONG {
	DISPLAY: none
}
#gallery A SPAN EM {
	MARGIN: 0px; WIDTH: 384px; DISPLAY: block; HEIGHT: 256px
}
#gallery A:focus {
	BORDER-BOTTOM: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-RIGHT: #666666 1px solid
}
#gallery A:active {
	BORDER-BOTTOM: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-RIGHT: #666666 1px solid
}
#gallery A:focus SPAN {
	Z-INDEX: 1; POSITION: absolute; WIDTH: 386px; DISPLAY: block; COLOR: #000000; FONT-SIZE: 0.8em; TOP: 88px; LEFT: 26px
}
#gallery A:active SPAN {
	Z-INDEX: 1; POSITION: absolute; WIDTH: 386px; DISPLAY: block; COLOR: #000000; FONT-SIZE: 0.8em; TOP: 88px; LEFT: 26px
}
#gallery A:focus STRONG {
	POSITION: absolute; BACKGROUND-COLOR: #efedec; WIDTH: 384px; DISPLAY: block; HEIGHT: 256px; COLOR: #1199ff; FONT-SIZE: 0.8em; TOP: 87px; LEFT: 27px
}
#gallery A:active STRONG {
	POSITION: absolute; BACKGROUND-COLOR: #efedec; WIDTH: 384px; DISPLAY: block; HEIGHT: 256px; COLOR: #1199ff; FONT-SIZE: 0.8em; TOP: 87px; LEFT: 27px
}
</STYLE>

<META name=GENERATOR content="MSHTML 8.00.6001.18813"></HEAD>
<BODY>
<DIV id=gallery_position>
<DIV id=gallery><A style="BACKGROUND-IMAGE: url(thumb1.jpg)" title=loading 
href="http://home.arcor.de/terrikay/css-galerie/#"><STRONG>Loading......</STRONG> 
<SPAN><EM style="BACKGROUND-IMAGE: url(bild1.jpg)">&nbsp;</EM> Bildunterschrift 
1 </SPAN></A><A style="BACKGROUND-IMAGE: url(thumb2.jpg)" title=loading 
href="http://home.arcor.de/terrikay/css-galerie/#"><STRONG>Loading......</STRONG> 
<SPAN><EM style="BACKGROUND-IMAGE: url(bild2.jpg)">&nbsp;</EM> Bildunterschrift 
2 </SPAN></A><A style="BACKGROUND-IMAGE: url(thumb3.jpg)" title=loading 
href="http://home.arcor.de/terrikay/css-galerie/#"><STRONG>Loading......</STRONG> 
<SPAN><EM style="BACKGROUND-IMAGE: url(bild3.jpg)">&nbsp;</EM> Bildunterschrift 
3 </SPAN></A><A style="BACKGROUND-IMAGE: url(thumb4.jpg)" title=loading 
href="http://home.arcor.de/terrikay/css-galerie/#"><STRONG>Loading......</STRONG> 
<SPAN><EM style="BACKGROUND-IMAGE: url(bild4.jpg)">&nbsp;</EM> Bildunterschrift 
4 </SPAN></A><A style="BACKGROUND-IMAGE: url(thumb5.jpg)" title=loading 
href="http://home.arcor.de/terrikay/css-galerie/#"><STRONG>Loading......</STRONG> 
<SPAN><EM style="BACKGROUND-IMAGE: url(bild5.jpg)">&nbsp;</EM> Bildunterschrift 
5 </SPAN></A><IMG alt=bild src="mit%20klick-Dateien/bild1.jpg"> 
</DIV></DIV></BODY></HTML>
```

----------


## 'MAGNUM'

Ja shiko si ta kam perfekcionuar fotogalerine:




Ja edhe Kodi:



```
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Image Gallery</title>
	<style type="text/css">
		*
		{ 
			margin:	0;
			padding:	0;
			border:	0;
			font-family: 'Trebuchet MS', Helvetica, sans-serif;
		}
		body
		{
			background:	black;
			width:	777px; 
			margin:	10px auto;
		}
		.gallery
		{
			position:	relative;
			top:		2px;
			height:	100%;
			width:	100%; 
			margin:	4px 0 4px 0px;
			background: url('http://www.layoutstar.com/images/allbackgrounds/bgs/artistic/artistic_background_01.gif') no-repeat 66% 56%; 
		}
		.thumb span
		{
			position:	absolute;
			top:		0px;
			left:		220px;
			border:	outset 2px #FF0000;
			visibility:	hidden;
			text-decoration:	none;
			color:	red;
			padding:	30px; 
		}
		.n1:active span,.n1:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/dry-drought-arid-dirt.jpg')
		}
		.n2:active span,.n2:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/Sun-Valley-golf-course.jpg')
		}
		.n3:active span,.n3:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/close-up-colorful-iris.jpg')
		}
		.n4:active span,.n4:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/stress-fish-blender.jpg')
		}
		.n5:active span,.n5:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/paragliding-valley-sport.jpg')
		}
		.n6:active span,.n6:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/hurricane-space-earth-horizontal.jpg')
		}
		.n7:active span,.n7:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/world-globe-in-oyster-beach.jpg')
		}
		.n8:active span,.n8:focus span
		{
			background:	url('http://www.billfrymire.com/gallery/webJpgs/periodic-table-chemistry-science.jpg')
		}
		.thumb:active span,.thumb:focus span
		{
			visibility:	visible;
			background-repeat: no-repeat;
			background-position: center 35%;
			background-color: #F5F5DC;
		}  
            .thumb:active img,.thumb:focus img
		{
			border: 2px #C0C0C0 solid
		}
 
		a img
		{
			height:	101px;
			width:	101px;
		}
		span img
		{
			visibility:	hidden; 
			width:	490px; 
			height:	323px; 
			display:	block; 
		}
		h1
		{
			padding:	10px 20px 10px 15px; 
			background-color: #444;
			color:	#f0f9ff;
			padding-left: 165px;
		}
		h1 i
		{
		color:	#FF0000;
		}
		b.o,b.m,b.x,b.i
		{
			display: block; background: #444; padding-top: 1px;
		}
		b.o 
		{
			margin: 0px 5px; background: #888
		}
		b.m 
		{
			margin: 0px 3px; background: #777
		}
		b.x
		{
			margin: 0px 2px; background: #666
		}
		b.i
		{
			margin: 0px 1px; background: #555; padding-top:2px
		}
		h2, h2 span
		{
			overflow: hidden;
			font: bold 38pt/1.2em georgia, 'Trebuchet MS';
			position: relative;
			width: 100%;
			text-align: center;
			color: #999;
			background: #444
		}
		h2 span, h2 br
		{
			color: #ddd; 
			top: 0px; left:0px;
			position: absolute; 
			display: block;
			width: 100%;
			height: .575em;
		}
		h1 small
		{
			font-size: 0.5em;
			display: block;
                        padding-left: 145px;
		}
		#botm
		{
			background:	url('http://i35.tinypic.com/xbkdg9.jpg') repeat-x;
			font: normal 13px Tahoma;
                        padding-left: 185px;
			color: #000;
			border-top: 1px solid #ddd; 
			height: 25px;
			line-height: 25px;
			margin-top: 5px
			color: #444;
		}
 
		.gallery img
		{
			border: 2px #FF0000 outset
		}
            a
            {
			outline:none 0; 
		}
		#au
		{
			background:	url('http://i35.tinypic.com/xbkdg9.jpg') repeat-x;
			font: normal 11px Tahoma;
                        padding-left: 175px;
			color: #000;
			border-top: 1px solid #ddd; 
			height: 25px;
			line-height: 25px;
			margin-top: 0px
		}
	</style>
<!--[if IE]>
	<style>
	a {outline:expression(hideFocus='true')
	</style>
<![endif]-->
</head>
 
<body>
<div>
<div style='border-bottom: solid 3px #FF0000; margin:0'>
 <b class="o"></b>
 <b class="m"></b>
 <b class="x"></b>
 <b class="i"></b>
<h1>Pure <i>CSS</i> Image Gallery demo<br><small>with <i>on click</i> swap</small></h1> 
</div>
 
<div id="au">
&nbsp; &bull; Dikur m'pate kupe m'pate hupe n'shupe deri t'pata gjete m'pate kupe - <i>'MAGNUM'</i> &bull;
</div>
 
<div class="gallery">
<a class="thumb n1" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/dry-drought-arid-dirt.jpg" alt=''><span>
<img src="" alt=''><br>Dried... (Bonneville Salt Flats)</span></a>
<a class="thumb n2" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/Sun-Valley-golf-course.jpg" alt=''><span>
<img src="" alt=''><br>Sun Valley, -looks green... (Idaho USA golf course)</span></a>
<br>
<a class="thumb n3" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/close-up-colorful-iris.jpg" alt=''><span>
<img src="" alt=''><br>Some Colorful surprise.</span></a> 
<a class="thumb n4" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/stress-fish-blender.jpg" alt=''><span>
<img src="" alt=''><br>Feeling safe?</span></a>
<br>
<a class="thumb n5" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/paragliding-valley-sport.jpg" alt=''><span>
<img src="" alt=''><br>Watch this...</span></a> 
<a class="thumb n6" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/hurricane-space-earth-horizontal.jpg" alt=''><span>
<img src="" alt=''><br>Hurricane or typhoon? -Can't tell - but it's Huge!</span></a>
<br>
<a class="thumb n7" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/world-globe-in-oyster-beach.jpg" alt=''><span>
<img src="" alt=''><br>...Some Nut in a shelve</span></a> 
<a class="thumb n8" href="#">
<img src="http://www.billfrymire.com/gallery/webthumbs/periodic-table-chemistry-science.jpg" alt=''><span>
<img src="" alt=''><br>Need some chemistry to start things over.</span></a>
</div>
 
<div id=botm>
<p><small> Gallery <i>Images</i> are a property of 
<a href='http://www.billfrymire.com' title="you can see more here">bill frymire visuals</a>
 |&bull;|  'MAGNUM'- Desert Eagle </small></p>
</div>
 
<div style='border-top: solid 3px #FF0000; margin:0'>
<H2 title="'MAGNUM'"> 'MAGNUM' <br><span> 'MAGNUM' </span> </H2>
 <b class="i"></b>
 <b class="x"></b>
 <b class="m"></b>
 <b class="o"></b>
</div>
 
</body>
</html>
```


Emrin dhe firmen nderroja vet, poashtu nderroja vet edhe ngjyrat, sipas shijes tende. 


Tungat zotni

----------


## 'MAGNUM'

Ja se si duket me ato ngjyrat e tua:




Kjo fotogaleria jote nuk te funkcionon edhe aq mire, kercen e ter faqja kur te klikosh per ti nderruar fotot, pastaj te duhet te klikosh dikund jashta fotogalerise qe te mund ti rishikosh edhe nje here fotot etj. per ate arsye ta solla ate fotogalerine tjeter me klikime dhe pa klikime, qe ta shikosh vet se si eshte krijuar ajo fotogaleri, dhe ti rregullosh ato defekte ne kete fotogalerine tende. Fotogalerine qe e solla une e ke ne postimin tim te pare ne kete teme.

Tung

----------


## Baptist

> Kjo fotogaleria jote nuk te funkcionon edhe aq mire, kercen e ter faqja kur te klikosh per ti nderruar fotot, pastaj te duhet te klikosh dikund jashta fotogalerise qe te mund ti rishikosh edhe nje here fotot etj. per ate arsye ta solla ate fotogalerine tjeter me klikime dhe pa klikime, qe ta shikosh vet se si eshte krijuar ajo fotogaleri, dhe ti rregullosh ato defekte ne kete fotogalerine tende. Mirpo ti vendose ta kalosh uren me sy mbyllur. Fotogalerine qe e solla une e ke ne postimin tim te pare ne kete teme, nese nuk te vjen inati ta rishikosh edhe nje here.
> 
> Tung


Me vjen keq qe po kercejne, por kjo do te thote se ke prezentuar ndonje gabim ri diku ne kod. Sepse kodi origjinal nuk kercen askund.
Me pelqen ajo qe kishe bere me thuresit e skajeve rrethore. 
megjithese qeshtja e ngjyrave eshte qeshtje e shijes mendoj se ne prapavi te zeze serish rri me mire ngjyra e se gjelbertes se re se e kuqja, sidomos kur pala tjeter jane te bardha, ndersa kornizat e mostrave te fotografive i ke theksuar me teper se c'duhet. 

kodi i gjermanit eshte i mire por ka pak teprim ne keqperdorim te html tiketave qe nuk ben te perdoren jashte semantikes se vet, si dhe nuk ka gjetur menyren si ta ndaje css nga html por galeria e tij eshte e paisur me ate qe une kam cekur se nuk e kam.

etj...

----------


## benseven11

Ku eshte bazuar vendosja e sfondit gri e erret, shkronja te bardha dhe css dhe on click ne jeshile?Ku eshte mbeshtetur ky kombinim ngjyrash?Perse ky kombinim?

----------


## 'MAGNUM'

> Me vjen keq qe po kercejne, por kjo do te thote se ke prezentuar ndonje gabim ri diku ne kod. Sepse kodi origjinal nuk kercen askund.


E kisha fjalen per kodin tende qe ke sjellur ketu me larte, edhe ai kercen dhe nuk eshte e mundur ti shikosh fotot sipas qefit tende por duhet ti shfletosh me rradhe, nga e para larte, separi foton e majt e pastaj te djathten e keshtu me rradhe, se per ndryshe ngecet ose nuk te hapen fotot qe ishin para asaj fotoje qe e ke hapur separi, pastaj ne fund te duhet te klikosh dikund jashta fotogalerise qe te mund ti rishikosh edhe nje here fotot. Perveq nese e ke sjellur qellimisht me defekte, per arsye te Copyright, atehere eshte dika tjeter dhe s'ka nevoje ta diskutojme fare. Une nuk i kerkova fare arsyet e defekteve te lartepermendura, se pertova.




> Me pelqen ajo qe kishe bere me thuresit e skajeve rrethore.


Vetem kjo te pelqeu ? 




> megjithese qeshtja e ngjyrave eshte qeshtje e shijes mendoj se ne prapavi te zeze serish rri me mire ngjyra e se gjelbertes se re se e kuqja, sidomos kur pala tjeter jane te bardha, ndersa kornizat e mostrave te fotografive i ke theksuar me teper se c'duhet.


Natyrisht, secili shijen e vet, mirpo une i zgjodha ngjyrat rastesisht dhe nuk iu kushtova shum rendesi pershtatjes mes vete, thjesht e bera pak a shum kuq e zi, My favorite color mixture.




> kodi i gjermanit eshte i mire por ka pak teprim ne keqperdorim te html tiketave qe nuk ben te perdoren jashte semantikes se vet, si dhe nuk ka gjetur menyren si ta ndaje css nga html por galeria e tij eshte e paisur me ate qe une kam cekur se nuk e kam.
> 
> etj...


"Tunde" mire, mledhja "tlynin" per sypri e tjetrat gjuje posht. Ai eshte qellimi.

----------


## 'MAGNUM'

Edhe kjo me poshte eshte njera nga mundesite e shumta, por gjithnje sipas shijes se njeriut:





Syri eshte njeri nder "pleqnaret" qe vendos per po ose per jo. Nese nuk gabohem.

----------


## benseven11

Nuk zgjidhen ngjyrat ashtu,ne menyre empirike,me hamendje,si duken per syte apo shijet personale.
Teknikisht eshte nje metode qe percakton kombinimin perfekt te dy apo me shume ngjyrave.

----------


## 'MAGNUM'

> Nuk zgjidhen ngjyrat ashtu,ne menyre empirike,me hamendje,si duken per syte apo shijet personale.
> Teknikisht eshte nje metode qe percakton kombinimin perfekt te dy apo me shume ngjyrave.


Nuk jam ndonje ekspert i madh i kombinimit te ngjyrave. Ishte thjesht nje ide per zbukurim. E vazhdova me te gjelberten dhe te kuqen pasiqe i kishim zgjedhur me heret. Cilat ngjyra do te pershtateshin me mire ne kete rast ?

----------


## javan

> E kisha fjalen per kodin tende qe ke sjellur ketu me larte, edhe ai kercen dhe nuk eshte e mundur ti shikosh fotot sipas qefit tende por duhet ti shfletosh me rradhe, nga e para larte, separi foton e majt e pastaj te djathten e keshtu me rradhe, se per ndryshe ngecet ose nuk te hapen fotot qe ishin para asaj fotoje qe e ke hapur separi, pastaj ne fund te duhet te klikosh dikund jashta fotogalerise qe te mund ti rishikosh edhe nje here fotot. ...


Perdorimi i "vizited" duhet ta heqe qafe kete difektin.

----------


## 'MAGNUM'

> Perdorimi i "vizited" duhet ta heqe qafe kete difektin.


Ne Mozilla Firefox 3.5 po funkcionon perfekt. Ndersa ne Internet Explorer 8 po ndodhin ato qe i permenda.

----------


## javan

> Ne Mozilla Firefox 3.5 po funkcionon perfekt. Ndersa ne Internet Explorer 8 po ndodhin ato qe i permenda.


Sigurisht.




> I testuar ne *ie6* *fx3.5*, opera 9x...

----------


## Baptist

> Sigurisht.


Jo jo, kodi im origjinal (nga posti i pare) do te punoje si ne ie6 si ne ie 12!
Eshte plotesisht "forward-compatible" ndersa per "backward-compatibility"  une pa e testuar fare ju garantoj edhe ie5, madje e le te hapur edhe mundesine qe ky kod mund te funksionoje fare bukur edhe ne ie4.01, pra me versionin e lansuar ne Dhjetor te vitit 1997. Ose 12 vjet me mbrapa.

Modifikimi i kodit te huaj nenkupton edhe mundesine e introdukcionit  te gabimeve modifikuesit ne te.

----------


## javan

Magnum, cilin kod po teston ne IE8, kodin origjinal te Baptistit apo ate te modifikuarin me ngjyra?

Kam idene se IE8 ka pasur probleme me ngjyrat (ne CSS) te cilat transferohen probleme ne rollover, casacding, scalable corners...

http://msdn.microsoft.com/en-us/libr...82(VS.85).aspx

----------


## javan

> Jo jo, kodi im origjinal (nga posti i pare) do te punoje si ne ie6 si ne ie 12!
> Eshte plotesisht "forward-compatible" ndersa per "backward-compatibility"  une pa e testuar fare ju garantoj edhe ie5, madje e le te hapur edhe mundesine qe ky kod mund te funksionoje fare bukur edhe ne ie4.01, pra me versionin e lansuar ne Dhjetor te vitit 1997. Ose 12 vjet me mbrapa.
> 
> Modifikimi i kodit te huaj nenkupton edhe mundesine e introdukcionit  te gabimeve modifikuesit ne te.


Ne se kodi do kishte marre gabime gjate adoptimit me ngjyrave, problemi do shfaqej ne te gjithe versionet fx3.5, ie6 dhe ie8, ndersa kodi origjinal do te punonte ne te gjithe versionet.

Fakti qe kodi nuk punon vetem ne ie8 le te kuptosh se dicka nuk shkon jo me logjiken e kodit por me CSS ne ie8.

Megjithate, ne populli javan te falenderoj per punen e sjelle.

----------


## Sirius

> Jo jo, kodi im origjinal (nga posti i pare) do te punoje si ne ie6 si ne ie 12!
> Eshte plotesisht "forward-compatible" ndersa per "backward-compatibility"  une pa e testuar fare ju garantoj edhe ie5, madje e le te hapur edhe mundesine qe ky kod mund te funksionoje fare bukur edhe ne ie4.01, pra me versionin e lansuar ne Dhjetor te vitit 1997. Ose 12 vjet me mbrapa.
> 
> Modifikimi i kodit te huaj nenkupton edhe mundesine e introdukcionit  te gabimeve modifikuesit ne te.




Ne vend se te ngutesh mu pergjigj ke mund me provu para se te pergjigjesh, kodi ka at gabim edhe aj qe ke sjell ti.

----------


## Baptist

> Ne vend se te ngutesh mu pergjigj ke mund me provu para se te pergjigjesh, kodi ka at gabim edhe aj qe ke sjell ti.


Cfare gabimi - a di ta pershkruash saktesisht?

----------


## Sirius

> Cfare gabimi - a di ta pershkruash saktesisht?




Nuk eshte gabim por mospershtatje e IE8
Aj qe ka cek magnum ne IE8 ndodh edhe me kodin tend (mendova se e ke te kjart tu u bazu ne pergjigjen tende qe ke dhan Magnum).

----------


## Baptist

Nuk mund te jete mos pershtatje.
Ose eshte gabim ose nuk ekziston. 
Ju po thuani qe ekziston - atehere eshte gabim!

Dhe ky gabim ndodhe se eshte duke u shkaktuar nga: 
<!--[if IE]>
	<style>
	a {outline:expression(hideFocus='true')
	</style>
<![endif]-->
Sepse ne kondicional nuk kam cekur versionin, nderkohe qe kodi mund te funksionoje edhe pa te.

----------

