Jump to content
  • 0

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


sneg06
 Share

Question

Скрипт

<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

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

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Скрипт

Скрипт позволяет просматривать фотографии в масштабе 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).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy