VPF::искусственно вызвать событие, назначенное кнопке

begin

Дата 27.2.2010, 14:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

Есть лента изображений, помещенных в 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"> ?

12345c

Дата 28.2.2010, 14:00 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

объект.goRight();

вписать объект, потому что при таком вызове this - это окно.

Ещё правильно обработать (внутри функции) отсутствующие при таком вызове event и this.

Код


var gallery=self.event ? event.data.gallery : что-то вместо этого ;

Это сообщение отредактировал(а) 12345c - 28.2.2010, 14:02

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

begin

Дата 28.2.2010, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

Цитата

объект.goRight();
вписать объект, потому что при таком вызове this - это окно.
Ещё правильно обработать (внутри функции) отсутствующие при таком вызове event и this.
var gallery=self.event ? event.data.gallery : что-то вместо этого ;

Простите, но ничего не понял smile

iluvatar

Дата 1.3.2010, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 266
Регистрация: 17.9.2007

Репутация: нет
Всего: 4

Имелось в виду, что в месте где вы вызываете
<script type="text/javascript">
this.goRight;
</script>
this - это объект window, а не тот объект Gallery, который вы определяли в скрипте

12345c

Дата 1.3.2010, 16:01 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Да, это первое, что пояснил iluvatar;
второе - нужно ставить скобки, чтобы функция сработала.
Третье - внутри этой функции специально что-то подставить вместо event.data.gallery, потому что при "левом" вызове объекта event не будет.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

begin

Дата 1.3.2010, 18:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

Сделал. Допустим, нужно сдвинуть контейнер на 4 шага:

Код


<div class="right" onclick="Gallery.goRight;">
<script type="text/javascript">
Gallery.goRight();
Gallery.goRight();
Gallery.goRight();
Gallery.goRight();
</script>
</div>

Но не работает. Вы писали:

Цитата

Третье - внутри этой функции специально что-то подставить вместо event.data.gallery, потому что при "левом" вызове объекта event не будет.

А что именно нужно вставить в скобки?

12345c

Дата 1.3.2010, 20:15 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Ну это Вас лучше спросить, что есть event.data.gallery, Ваш же код smile

.
Наверное, ссылка на тот самый объект gallery, над которым надо сделать .goRight() .
Если это так, то (см.изменение во 2-й строчке) это будет работать (потому что this будет тот самый экз.объ.Gallery для Gallery.goRight() ) :

Код


                goRight: function(event){
                    var gallery= event ? event.data.gallery : this;
                    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;
                    })
                }

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

begin

Дата 3.3.2010, 02:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 415
Регистрация: 16.5.2007

Репутация: нет
Всего: нет

Цитата

Ну это Вас лучше спросить, что есть event.data.gallery, Ваш же код smile

JS-код не мой - писали на заказ. Но теперь, когда нужно чуточку доработать код, исполнитель пропал.

Цитата

Наверное, ссылка на тот самый объект gallery, над которым надо сделать .goRight() .
Если это так, то (см.изменение во 2-й строчке) это будет работать (потому что this будет тот самый экз.объ.Gallery для Gallery.goRight() ) :

Сделал по вашему совету, но все равно не хочет работать.. smile

12345c

Дата 4.3.2010, 12:52 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Может быть, и не должна? Вот, вижу callback-функцию: function(){ gallery.scrollLeft=undefined; } . Возможно, каждый следующий сдвиг надо выполнять в этой самой callback. Дайте задачу с постановкой профессионалу, он за час максимум сделает. Т.е. по фрилансу обойдётся в 200-300 р.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »