Есть лента изображений, помещенных в div. Одновременно видны только 3 изображения. По бокам есть кнопки для плавной прокрутки ленты. Построено это вот так:
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var Gallery=function(){}
Gallery.prototype={
init: function(options){
defaults={
duration: 400,
zoomDuration: 400,
step: 110,
zoom: 1.63
}
this.options=$.extend(defaults, options);
this.container=$(options.container);
this.imgs=this.container.find('img');
this.zoomedImgs={};
this.initEvents();
},
initEvents: function(){
$(this.container).find('.left').bind('click', {gallery: this}, this.goLeft);
$(this.container).find('.right').bind('click', {gallery: this}, this.goRight);
$(this.container).find('.left2').bind('click', {gallery: this}, this.goLeft);
$(this.container).find('.right2').bind('click', {gallery: this}, this.goRight);
},
goLeft: function(event){
var gallery=event.data.gallery;
var options=gallery.options
var wrapper=gallery.container.find('.imgs');
var scrollLeft = gallery.scrollLeft != undefined ? gallery.scrollLeft-options.step : wrapper.scrollLeft()-options.step;
gallery.scrollLeft=scrollLeft;
wrapper.animate({
scrollLeft: scrollLeft
}, options.duration, function(){
gallery.scrollLeft=undefined;
});
},
goRight: function(event){
var gallery=event.data.gallery;
var options=gallery.options
var wrapper=gallery.container.find('.imgs');
var scrollLeft = gallery.scrollLeft != undefined ? gallery.scrollLeft+options.step : wrapper.scrollLeft()+options.step;
gallery.scrollLeft=scrollLeft;
wrapper.animate({
scrollLeft: scrollLeft
}, options.duration, function(){
gallery.scrollLeft=undefined;
})
}
}
$().ready(function(){
new Gallery().init({
container: '#gallery_container'
})
})
</script>
Сама лента вставляется вот так:Код
<div id="gallery_container" class="gallery">
<div class="left" onclick="this.goLeft;"></div>
<div class="imgs">
<a href='index.php?option=3&id=01'><img src='photo/thumb_01.jpg'></a>
..
..
<a href='index.php?option=3&id=20'><img src='photo/thumb_20.jpg'></a>
</div>
<div class="right" onclick="this.goRight;"></div>
</div>
И все отлично работало. Но вот понадобилось искусственно вызывать прокрутку энное количество раз (чтобы при перезагрузке страницы сразу попасть в нужное место на ленте). Пробовал сделать вот так:Код
<div id="gallery_container" class="gallery">
<div class="left" onclick="this.goLeft;"></div>
<div class="imgs">
<a href='index.php?option=3&id=01'><img src='photo/thumb_01.jpg'></a>
..
..
<a href='index.php?option=3&id=20'><img src='photo/thumb_20.jpg'></a>
</div>
<div class="right" onclick="this.goRight;">
<?php
$ind=4; //нужно прокруть на 4 шага вправо
for ($i=1;$i<=$ind;$i++)
{
?>
<script type="text/javascript">
this.goRight;
</script>
<?php
}
?>
</div>
</div>
Но ничего не происходит. Подскажите, как правильно вызвать событие прокрутки несколько раз без нажатия элемента <div class="right"> ?