Добавяне на описание към галерия

P

paneznam

Registered
http://web-tourist.net/login/login/view.php?st=2572
Как към тази галерия, към всяка картинка да добавя и описание?В смисъл като избера друга картинка от галерията да излиза описание до нея. И така за всяка картинка. :)
 
Ето така ще имаш и описание:

gallery.js

Код: 
var loading = new Image();

loading.src = 'images/loading2.gif';

var i;

//masiv za golemite kartinki

var bigImages = new Array();

bigImages[bigImages.length] = 'images/Winter.jpg';

bigImages[bigImages.length] = 'images/Water lilies.jpg';

bigImages[bigImages.length] = 'images/Blue hills.jpg';

bigImages[bigImages.length] = 'images/Sunset.jpg';

bigImages[bigImages.length] = 'images/azul.jpg';



bigImages[bigImages.length] = 'images/azul.jpg';

bigImages[bigImages.length] = 'images/Sunset.jpg';

bigImages[bigImages.length] = 'images/Water lilies.jpg';

bigImages[bigImages.length] = 'images/Blue hills.jpg';

bigImages[bigImages.length] = 'images/Winter.jpg';



bigImages[bigImages.length] = 'images/loading2.gif';


var duma = new Array();

duma[duma.length] = 'Winter';

duma[duma.length]= 'Water lilies';

duma[duma.length] = 'Blue hills';

duma[duma.length] = 'Sunset';

duma[duma.length] = 'azul';



duma[duma.length] = 'azul';

duma[duma.length] = 'Sunset';

duma[duma.length] = 'Water lilies';

duma[duma.length] = 'Blue hills';

duma[duma.length] = 'Winter';



duma [duma.length] = 'images/loading2.gif';



//masiv zamalkite kartinki

var smallImages = new Array();

smallImages[smallImages.length] = 'images/Winter.jpg';

smallImages[smallImages.length] = 'images/Water lilies.jpg';

smallImages[smallImages.length] = 'images/Blue hills.jpg';

smallImages[smallImages.length] = 'images/Sunset.jpg';

smallImages[smallImages.length] = 'images/azul.jpg';



smallImages[smallImages.length] = 'images/azul.jpg';

smallImages[smallImages.length] = 'images/Sunset.jpg';

smallImages[smallImages.length] = 'images/Water lilies.jpg';

smallImages[smallImages.length] = 'images/Blue hills.jpg';

smallImages[smallImages.length] = 'images/Winter.jpg';



smallImages[smallImages.length] = 'images/loading2.gif';



//na vseki element s opredelen indeks ot ediniq masiv syotvetstva element sys syshtiq indeks ot drugiq masiv



var pages = Math.ceil(bigImages.length/5)-1;//broi na stranicite

var currentPage = 0;//tekushta stranica



function info(){

	document.getElementById('cPageNumber').innerHTML = currentPage+1;

} //promqna na tekushtata stranica



function go(where){//funkciq za promqna na malkite kartinki



	currentPage += where;

	if(currentPage<0) currentPage = 0;

	else if(currentPage>pages) currentPage = pages;

	else{

	

	for(i=0;i<5;i++){

	

		if(smallImages[i+currentPage*5]){//pokazvane na sledvashtite 5 ili po-malko kartinki

			with(galleryImages[i]){

				style.visibility = 'visible';

				src = smallImages[i+currentPage*5];

				alt =bigImages[i+currentPage*5];
				id =duma[i+currentPage*5];

			}

		}else{

		

			galleryImages[i].style.visibility = 'hidden';

			//ako broq na kartinkite ne e cheten na 5 praznite praznite kartinki  stavat nevidimi

		

		}

	

	}

	

	info();

	}



}



function changeImage(obj){//promqna na golqmata kartinka



	document.getElementById('bossImage').src = obj.alt;

    document.getElementById('dumi').innerHTML= obj.id;

}


index.html

Код: 
<html>

	

	<head>

		

		<title>JavaScript галерия</title>

		

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		

		<link type="text/css" rel="Stylesheet" href="gallery.css" />

		

		<script type="text/javascript" src="gallery.js"></script>

		

	</head>

	

	<body>

		

		<div id="gallery">

			

			<div id="bigImages"><img src="images/Winter.jpg" alt="" id="bossImage" /></div>

			<div id="dumi">Forest</div>

			<div id="smallImages">

				

				<img src="images/LeftArrow.gif" onclick="go(-1);" title="<-" style="position: absolute; top: 0px; left: 0px; height: 70px; cursor: pointer;" />

				<img src="images/RightArrow.gif" onclick="go(1);" title="->" style="position: absolute; top: 0px;  right: 0px; height: 70px; cursor: pointer;" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt=""  id="" class="smallImage" onclick="changeImage(this);" />

				

			</div>

			

			<div id="pagesInfo">

			

				Брой страници: <span id="pagesNumber">12</span>

				Вие сте на: <span id="cPageNumber">10</span> страница

			

			</div>

			

		</div>

		<script type="text/javascript">

			document.getElementById('pagesNumber').innerHTML = pages+1;//popalvame v poleto broq na stranicite

			var AllDocumentImages = document.getElementsByTagName('img');//selektirame vsichki kartinki v dokumenta

			var galleryImages = new Array();//masiv za kartinkite s klass smallImage

			for(i=0;i<AllDocumentImages.length;i++){

				

				if(AllDocumentImages[i].className == 'smallImage'){

					galleryImages[galleryImages.length] = AllDocumentImages[i];

				}

				

			}//popalvame samo tezi kartinki s klass smallImage

			

			window.onload = function(){

				go(0);

			}//zarejdame pyrvite 5 kartinki sled kato stranicata e zaredena

		</script>

	</body>

	

</html>
 
а как може да се добави линк към голямата картинка, като натисниш на нея и тя да се отваря в нов прозорец
 
Doris каза:
Ето така ще имаш и описание:

gallery.js

Код: 
var loading = new Image();

loading.src = 'images/loading2.gif';

var i;

//masiv za golemite kartinki

var bigImages = new Array();

bigImages[bigImages.length] = 'images/Winter.jpg';

bigImages[bigImages.length] = 'images/Water lilies.jpg';

bigImages[bigImages.length] = 'images/Blue hills.jpg';

bigImages[bigImages.length] = 'images/Sunset.jpg';

bigImages[bigImages.length] = 'images/azul.jpg';



bigImages[bigImages.length] = 'images/azul.jpg';

bigImages[bigImages.length] = 'images/Sunset.jpg';

bigImages[bigImages.length] = 'images/Water lilies.jpg';

bigImages[bigImages.length] = 'images/Blue hills.jpg';

bigImages[bigImages.length] = 'images/Winter.jpg';



bigImages[bigImages.length] = 'images/loading2.gif';


var duma = new Array();

duma[duma.length] = 'Winter';

duma[duma.length]= 'Water lilies';

duma[duma.length] = 'Blue hills';

duma[duma.length] = 'Sunset';

duma[duma.length] = 'azul';



duma[duma.length] = 'azul';

duma[duma.length] = 'Sunset';

duma[duma.length] = 'Water lilies';

duma[duma.length] = 'Blue hills';

duma[duma.length] = 'Winter';



duma [duma.length] = 'images/loading2.gif';



//masiv zamalkite kartinki

var smallImages = new Array();

smallImages[smallImages.length] = 'images/Winter.jpg';

smallImages[smallImages.length] = 'images/Water lilies.jpg';

smallImages[smallImages.length] = 'images/Blue hills.jpg';

smallImages[smallImages.length] = 'images/Sunset.jpg';

smallImages[smallImages.length] = 'images/azul.jpg';



smallImages[smallImages.length] = 'images/azul.jpg';

smallImages[smallImages.length] = 'images/Sunset.jpg';

smallImages[smallImages.length] = 'images/Water lilies.jpg';

smallImages[smallImages.length] = 'images/Blue hills.jpg';

smallImages[smallImages.length] = 'images/Winter.jpg';



smallImages[smallImages.length] = 'images/loading2.gif';



//na vseki element s opredelen indeks ot ediniq masiv syotvetstva element sys syshtiq indeks ot drugiq masiv



var pages = Math.ceil(bigImages.length/5)-1;//broi na stranicite

var currentPage = 0;//tekushta stranica



function info(){

	document.getElementById('cPageNumber').innerHTML = currentPage+1;

} //promqna na tekushtata stranica



function go(where){//funkciq za promqna na malkite kartinki



	currentPage += where;

	if(currentPage<0) currentPage = 0;

	else if(currentPage>pages) currentPage = pages;

	else{

	

	for(i=0;i<5;i++){

	

		if(smallImages[i+currentPage*5]){//pokazvane na sledvashtite 5 ili po-malko kartinki

			with(galleryImages[i]){

				style.visibility = 'visible';

				src = smallImages[i+currentPage*5];

				alt =bigImages[i+currentPage*5];
				id =duma[i+currentPage*5];

			}

		}else{

		

			galleryImages[i].style.visibility = 'hidden';

			//ako broq na kartinkite ne e cheten na 5 praznite praznite kartinki  stavat nevidimi

		

		}

	

	}

	

	info();

	}



}



function changeImage(obj){//promqna na golqmata kartinka



	document.getElementById('bossImage').src = obj.alt;

    document.getElementById('dumi').innerHTML= obj.id;

}


index.html

Код: 
<html>

	

	<head>

		

		<title>JavaScript галерия</title>

		

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		

		<link type="text/css" rel="Stylesheet" href="gallery.css" />

		

		<script type="text/javascript" src="gallery.js"></script>

		

	</head>

	

	<body>

		

		<div id="gallery">

			

			<div id="bigImages"><img src="images/Winter.jpg" alt="" id="bossImage" /></div>

			<div id="dumi">Forest</div>

			<div id="smallImages">

				

				<img src="images/LeftArrow.gif" onclick="go(-1);" title="<-" style="position: absolute; top: 0px; left: 0px; height: 70px; cursor: pointer;" />

				<img src="images/RightArrow.gif" onclick="go(1);" title="->" style="position: absolute; top: 0px;  right: 0px; height: 70px; cursor: pointer;" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt="" id="" class="smallImage" onclick="changeImage(this);" />

				<img src="images/loading2.gif" alt=""  id="" class="smallImage" onclick="changeImage(this);" />

				

			</div>

			

			<div id="pagesInfo">

			

				Брой страници: <span id="pagesNumber">12</span>

				Вие сте на: <span id="cPageNumber">10</span> страница

			

			</div>

			

		</div>

		<script type="text/javascript">

			document.getElementById('pagesNumber').innerHTML = pages+1;//popalvame v poleto broq na stranicite

			var AllDocumentImages = document.getElementsByTagName('img');//selektirame vsichki kartinki v dokumenta

			var galleryImages = new Array();//masiv za kartinkite s klass smallImage

			for(i=0;i<AllDocumentImages.length;i++){

				

				if(AllDocumentImages[i].className == 'smallImage'){

					galleryImages[galleryImages.length] = AllDocumentImages[i];

				}

				

			}//popalvame samo tezi kartinki s klass smallImage

			

			window.onload = function(){

				go(0);

			}//zarejdame pyrvite 5 kartinki sled kato stranicata e zaredena

		</script>

	</body>

	

</html>
Увеличете...
Извинявай за закъснението!Благодаря ти много +1 8) :?:
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе