Dc gallery

Материал из GutenWeb Wiki

	<script language="javascript" type="text/javascript">
		
		var totalPhotos = 10; // количество фотографий в галлерее

		var gallery = new Array();

		gallery[0] = new Array();
		gallery[0]["url"] = '/a0/ru/img/blank.gif';	
		gallery[0]['alt'] = '';

		gallery[1] = new Array();
		gallery[1]["url"] = '/a0/ru/tmp/gallery/1.jpg';	
		gallery[1]['alt'] = 'узелок завяжется, узелок развяжется...';

		gallery[2] = new Array();
		gallery[2]['url'] = '/a0/ru/tmp/gallery/2.jpg';
		gallery[2]['alt'] = '';
		
		gallery[3] = new Array();
		gallery[3]['url'] = '/a0/ru/tmp/gallery/3.jpg';
		gallery[3]['alt'] = 'ниагарский водопад. чтоб я там был!';
		
		gallery[4] = new Array();
		gallery[4]['url'] = '/a0/ru/tmp/gallery/4.jpg';
		gallery[4]['alt'] = 'разряд, еще разряд... мы ее теряем!';
		
		gallery[5] = new Array();
		gallery[5]['url'] = '/a0/ru/tmp/gallery/5.jpg';
		gallery[5]['alt'] = 'Форум Клуба  «Инвестиции в инновации» Форум Клуба  «Инвестиции в инновации» Форум Клуба';
		
		gallery[6] = new Array();
		gallery[6]['url'] = '/a0/ru/tmp/gallery/6.jpg';
		gallery[6]['alt'] = 'вид из моего окна';
		
		gallery[7] = new Array();
		gallery[7]['url'] = '/a0/ru/tmp/gallery/2.jpg';
		gallery[7]['alt'] = 'Подпись к картинке';
		
		gallery[8] = new Array();
		gallery[8]['url'] = '/a0/ru/tmp/gallery/3.jpg';
		gallery[8]['alt'] = 'Подпись к картинке';
		
		gallery[9] = new Array();
		gallery[9]['url'] = '/a0/ru/tmp/gallery/2.jpg';
		gallery[9]['alt'] = 'Подпись к картинке';
		
		gallery[10] = new Array();
		gallery[10]['url'] = '/a0/ru/tmp/gallery/3.jpg';
		gallery[10]['alt'] = 'Подпись к картинке';
		

		
		$(function(){
			
			/* галерея */
			
			var num = 0; // стартовая фотография
			var current = 1; // текущая фотография
			
			
			// клик по маленькому эскизу
			$('.galleryItem a').click(function(){
				var num = $(this).attr('id'); // номер фотографии
				num2 = Number(num);
				current = num2;
				var topX = document.body.scrollTop || document.documentElement.scrollTop;

				$('.shadow').css('display', 'block');
				$('.galleryPopup').css('top', topX);
				
				showPhoto(num2);
				return false;
			});
			
			// следующая
			$('.galleryNextPhoto').click(function(){
				showPhoto(current+1);
				return false;
			})
			
			// предыдущая
			$('.galleryPrevPhoto').click(function(){
				showPhoto(current-1);
				return false;
			})
			
			
			// показать фото No ...
			function showPhoto(num) {
				
				current = num;
				
				if(num <= 1) {
					$('.galleryPrevPhoto').addClass('out');
				} else {
					$('.galleryPrevPhoto').removeClass('out');
				}
				
				if(num == totalPhotos) {
					$('.galleryNextPhoto').addClass('out');
				} else {
					$('.galleryNextPhoto').removeClass('out');
				}
			
				
				url2 = gallery [ num ] ['url']; 
				
				$('#galleryBigPhoto').attr({ src: url2 });
				$('.galleryCaption').text( gallery [ num ] ['alt']);
				
				//$(".galleryThumbnail").removeClass("active");
				//$("#" + current ).parent().addClass("active");
				
				$('.galleryCountCurrent').text(num);
				
			};
			
			showPhoto( num );
			
			// закрываем попап 
			$('.icoGalleryPopupClose').click(function(){
				$('.shadow').css('display', 'none');
				$('.galleryPopup').css('top', '-6000px');
				return false;
			});
			
		});

	</script>

			<table class="popupTable">
			
				<tr>
					<td class="galleryPopupNavTD" rowspan="3">
					
						<a href="#" class="galleryPrevPhoto"></a>
						<div class="galleryPlaceholder"></div>
						
					</td>
					<td class="gelleryMainTD">
						
						<span class="gelleryMainSPAN">
						
							<span class="galleryPopupCount"><span class="galleryCountCurrent">1</span> из 10</span>
							
							<img id="galleryBigPhoto" src="/a0/ru/img/blank.gif" class="" alt="" />
							
							<span class="galleryCaption"></span>
							
						</span>
					
					</td>
					<td class="galleryPopupRightTD" rowspan="3">
					
						<a href="#" class="galleryNextPhoto"></a>
						<div class="galleryPlaceholder"></div>
						
					</td>
				</tr>
				
			</table>