JavaScript скрипт просмотра фотографий

[sneg06]

Скрипт

<style type="text/css" align="center">
 #fsClipper { height: 100%px; width: 100%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
 .fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
 .fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
 .fsControl.disabled { color: #666666; }
 #fsScreen { height: 475px ! important; background: no-repeat 50% 50%; }
 </style>
 </span>
 <div id="fsClipper">
 <div id="fsScreen"></div>
</div>
<p align="center">

 <span class="style11" id="fsControl_prev"><a href="photo_gallery.html"><img src="photo/buttons/left_normal.gif"></a> </span>
 <span class="style11" id="fsControl_next"><a href="photo_gallery.html"><img src="photo/buttons/right_normal.gif"></a></span></p>
<p align="center" id="fsLinks">
 <span class="style11"><a href="photo/tsaritsyno/01.jpg" onClick="return Show_picture( 'photo/tsaritsyno/01.jpg', 640, 200 )"width="100%">1</a>,
 <a href="photo/tsaritsyno/02.jpg" onClick="return Show_picture( 'photo/tsaritsyno/02.jpg', 800, 400 )">2</a>,
 </p>


 <script type="text/javascript">
 </script>

 <script type="text/javascript"></script>

 <script type="text/javascript"></script>

 <script type="text/javascript">function Filmstrip(){
 this.ePicture = document.getElementById('fsScreen');
 this.ePrev = document.getElementById('fsControl_prev');
 this.eNext = document.getElementById('fsControl_next');
 var eLinks = document.getElementById('fsLinks');
 this.aeLink = eLinks.getElementsByTagName('A');
 this.show_picture = function( sBackground, iWidth, iHeight ){
 this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
 if( iWidth )
 this.ePicture.style.width = iWidth;
 if( iHeight )
 this.ePicture.style.height = iHeight;
 this.set_current( sBackground );
 }
 this.set_current = function( sHref ){
 for( var i = 0; i < this.aeLink.length; i++ ){
 if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
 this.aeLink[i].className += " current";
 this.ePrev.className = this.ePrev.className.replace( /s+disabled/g, "" );
 this.eNext.className = this.eNext.className.replace( /s+disabled/g, "" );
 if( i == 0 ){
 this.ePrev.className += " disabled";
 this.ePrev.onclick = function(){};
 this.eNext.onclick = this.aeLink[i + 1].onclick;
 }else if( i == this.aeLink.length - 1 ){
 this.eNext.className += " disabled";
 this.eNext.onclick = function(){};
 this.ePrev.onclick = this.aeLink[i - 1].onclick;
 }else{
 this.eNext.onclick = this.aeLink[i + 1].onclick;
 this.ePrev.onclick = this.aeLink[i - 1].onclick;
 }
 }else{
 this.aeLink[i].className = this.aeLink[i].className.replace( /s*current/g, "" );
 }
 }
 }
 }
 var oFilmstrip = new Filmstrip();
 function Show_picture( sHref, iWidth, iHeight ){
 oFilmstrip.show_picture( sHref, iWidth, iHeight );
 return false;
 }
 oFilmstrip.aeLink[0].onclick();
 </script>

Скрипт позволяет просматривать фотографии в масштабе 1:1.

Фотки имеют расширение 640 на 480

Вопрос: как отформатировать скрипт что-бы установить процентное разрешение фоток,

для просмотра на мониторах с высоким разрешением? :/

[ZoNT]

Что требуется? Добавить параметр в функцию отображения или в зависимости от размера окна браузера уменьшать/увеличивать область просмотра?

[sneg06]

Хочу понять как делать и то и другое.

[ZoNT]

советую купить книгу по джаваскрипту: там много простых примеров. Это будет намного эффективнее, чем пробовать разобраться на таких задачах...

[Yarik Voronov]

Скрипт

Скрипт позволяет просматривать фотографии в масштабе 1:1.

Фотки имеют расширение 640 на 480/

Незнай-незнай...

Вопрос: как отформатировать скрипт что-бы установить процентное разрешение фоток,

для просмотра на мониторах с высоким разрешением?

Отправлять процентный формат входного параметра.

<a href="photo/tsaritsyno/01.jpg" onClick="return Show_picture( 'photo/tsaritsyno/01.jpg', '50%', '20%' )">1</a>

только алгоритм скрипта следует переработать, так как фоновое изображение растянуть путем изменения размера контейнера не получиться (http://htmlbook.ru/css/background.html).