Помогите новичку, проблема в том что нужно разместить несколько одинаковых скриптов на 1 странице. Скрипт позволяет просматривать картинки без перезагрузки страницы, но при "размножении" скриптов все картинки "показываются" только в первом скрипте на месте остальных изображений - пусто.
<style type="text/css">
#fsClipper { height: 330px; 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: 300px ! important; background: no-repeat 50% 50%; }
</style>
<div id="fsClipper">
<div id="fsScreen"></div>
</div>
<p><font size="5">
<span id="fsControl_prev" class="fsControl">←</span>
<span id="fsControl_next" class="fsControl">→</span>
</font></p>
<p id="fsLinks">
<font size="2">
<a href="images/595IP.jpg" onclick="return Show_picture( 'images/595IP.jpg', 500, 500 )">Фото 1</a>,
<a href="images/595IP2.jpg" onclick="return Show_picture( 'images/595IP2.jpg', 500, 500 )">Фото 2</a>,
<a href="images/595IP3.jpg" onclick="return Show_picture( 'images/595IP3.jpg', 500, 500 )">Фото 3</a>
</font>
</p>
<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>
