VPF::jQuery - не срабатывает событие - Форум программистов

maugli

Дата 26.11.2009, 09:32 (ссылка)

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

Загрузка ...

Шустрый

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

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

Здравствуйте, написал скрипт, который можно посмотреть на www.vlasenkov.com

Щелка по картинке с надписью "продано" открывается слой с большим изображением. В нем лупа, которая может увеличить изображение. Внизу фотографии, при нажатии на которые должны менять большое изображение.
И не работает переключение на другие фотографии.

Кусок html кода, через которое вызывается большое изображение:

HTML

<a class="galery" href="images/mm_1.jpg" rel="images/1.jpg" style="color:#fff;"
            title='
            <img class="get-big" src="images/s_1.jpg" rel="images/1.jpg" rel2="images/mm_1.jpg" />
            <img class="get-big" src="images/s_2.jpg" rel="images/2.jpg" rel2="images/mm_1.jpg" />
            <img class="get-big" src="images/s_3.jpg" rel="images/3.jpg" rel2="images/mm_1.jpg" />
            <img class="get-big" src="images/s_4.jpg" rel="images/4.jpg" rel2="images/mm_1.jpg" /><br />

            Лучший камин в мире.
            '>
                <img src="images/m_1.png" width="107" height="149"  border="0" />
            </a>

Т.е. в тайтле я храню фотографии и текст, которые выводятся. Вот кликая на эти фотографии и должна меняться большая. Но кликая на них ничего не происходит. У меня есть предположение что они не добавляются в дерево документа, но это мне кажется бред, ведь они отображаются. Второе предположение, что они перекрываются каким-нибудь слоем. Прошу помощи в общем, чтобы разобраться.

Вот js код:

Код


//функция чтобы ставить по середке слой
$.fn.alignCenter = function() 
{
    var htmlW = $(window).width();
    var htmlH = $(window).height();
    var scrH  = $(window).scrollTop();
    var divW  = $(this).width();
    var divH  = $(this).height();
    
    var top  = (divH>htmlH) ? 0 : ((htmlH - divH) / 2 + scrH);
    var left = (htmlW - divW) / 2;
    
    return $(this).css({'top':top, 'left':left});
};

$(document).ready(function(){
//для зуумера
var size  = 30;
var speed = 2.2;         
         
    //при клике по картинке или ссылке    
    $('.galery').click(function(){
  //получаем значения href и title
  var img    = this.getAttribute('href');
  var title  = this.getAttribute('title');
  var bigimg = this.getAttribute('rel');
  
  //показываем фотографию
  //и текст
  $('#galery-img').attr('src', img);
  $('#galery-bigimg').attr('src', bigimg);
  $('.galery-title').append(title);
  
  //показываем слои
  $('.galery-hideall').show().css('opacity','0.8').css('height','1%').css('height',$(document).height());
  $('.galery-main').show().alignCenter();    

  //наш зуумер
  $("#wrap").anythingZoomer({
  
     expansionSize: size,
     speedMultiplier: speed
  
  });    

  return false;
    });
    
    //другие картинки
    //того же товара
    $('.get-big').click(function(){
  var img    = this.getAttribute('rel2');
  var bigimg = this.getAttribute('rel');
  
  alert(img+'/'+bigimg);
    });
    
    //убираем слои при нажатии
    //на скрывающий слой и на кнопку
    //закрыть
    $('.galery-hideall, .galery-close, #wrap').click(function(){
  $('.galery-hideall').hide();
  $('.galery-main').hide();
  
  //при закрытие опусташаем все слоты
  $('#galery-img').attr('src', 'images/loading.gif');
  $('#galery-bigimg').attr('src', '');
  $('.galery-title').html('');
  
  return false;
    });


});

Вот этот кусок отвечает за то, чтобы показывались другие фотки, но он не работает:

Код


    $('.get-big').click(function(){
  var img    = this.getAttribute('rel2');
  var bigimg = this.getAttribute('rel');
  
  alert(img+'/'+bigimg);
    });

В этот кусок html кода вставляется все что показывается:

HTML

<div class="galery-hideall"></div>
<div class="galery-main">
    <div id="wrap">
        <div id="small"><img id="galery-img" src="galery/loading.gif" /></div>
        <div id="mover">
         <div id="overlay"></div>
            <div id="large"><img id="galery-bigimg" src="</span>" /><<span style='color:blue'>/div>
        </div>
    </div>
    <div class="galery-title"></div>
    <div style="text-align:right; margin-top: 10px;"><a href="" class="galery-close">Закрыть</a></div>
</div>

Спасибо.

Котокобра

Дата 26.11.2009, 11:56 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата(maugli @ 26.11.2009, 09:32

)

Т.е. в тайтле я храню фотографии и текст, которые выводятся.

Да, круто ты загнул. Это если пользователь удержит мышку на такой ссылке, он сможет увидеть весь "скрытый текст"? ))))

maugli

Дата 26.11.2009, 12:45 (ссылка)

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

Загрузка ...

Шустрый

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

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

Котокобра, да увидит весь текст. А по сути есть ответ?

Котокобра

Дата 26.11.2009, 13:19 (ссылка)

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

Загрузка ...

Шустрый

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

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

Поясните, пожалуйста, задачу.

Цитата

открывается слой с большим изображением. В нем лупа, которая может увеличить изображение. Внизу фотографии, при нажатии на которые должны менять большое изображение.
И не работает переключение на другие фотографии.

При этом запись

Код


<a class="galery" href="images/mm_1.jpg"><img src="images/m_1.png" width="107" height="149"  border="0" /></a>

обозначает, что новое изображение будет открыто в том же окне бразузера (взамен страницы).

Опишите, пожалуйста, что Вы хотите? Всплывающее окно с большим изображением, в котором можно будет перемещать лупу и видеть увеличенные участки? Или у Вас на странице уже есть область для большой фотографии (фиксированная), в которой должны происходить замены изображений?

maugli

Дата 26.11.2009, 13:26 (ссылка)

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

Загрузка ...

Шустрый

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

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

Котокобра, эта запись:

Код


<a class="galery" href="images/mm_1.jpg"><img src="images/m_1.png" width="107" height="149"  border="0" /></a>

обозначает, что изображение будет открыто в этом окне, если у человека будет отключен JS, если же нет, то при клике на нее произойдет событие, и выполнится ряд операций, после которых откроется слой с изображением и лупой и вернется false, что будет означать, что ссылка не сработает. У меня есть место куда вставляется большое изображение, но оно не видимо до тех пора пока не произошел клик.
Извините если пишу резко. Но меня волнует одно, почему не срабатывают клики по изображениям, которые я описал.

Котокобра

Дата 26.11.2009, 13:49 (ссылка)

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

Загрузка ...

Шустрый

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

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

Изображения, прописанные в title не влючены в объектную модель документа. они идут, как текст.
Чтобы их включить, сделайте, например следущее

Код


<img class="get-big" style="visibility:hidden" src="images/s_1.jpg" rel="images/1.jpg" rel2="images/mm_1.jpg" />
...

И соответственно, забираете из него src и заменяете в src той области, куда надо вставить. Ну как-то так.
Я не очень понял второй и третий отрывок кода, что это за "$", это выдержки из php или ajax?

maugli

Дата 26.11.2009, 14:07 (ссылка)

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

Загрузка ...

Шустрый

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

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

Котокобра, вот фиг его знает, по сути если объекты отображаются, значит они в объектной модели документа.
На счет вашего html кода, не уверен, что это заработает.

Цитата(Котокобра @ 26.11.2009, 13:49

)

Я не очень понял второй и третий отрывок кода, что это за "$", это выдержки из php или ajax?

ну это кусок JS кода с использованием библиотеки jQuery.

Котокобра

Дата 26.11.2009, 14:19 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


<html>

<body>
<img id="big_img" src="some.jpg" width="300" height="200" />

<a href="some_big.jpg" onClick="document.getElementById('big_img').src=this.href; return false">
  открыть большое изображение
</a>

</body>
</html>

и т.д.

Либо, если нужно кэшировать большие изображения для их быстрой загрузки (но трафик!)

Код


<html>

<body>
<img id="big_img" src="some.jpg" width="300" height="200" />

<img id="big_img1" style="display:none" src="some_big1.jpg" width="300" height="200" />

<a href="some_big.jpg" onClick="document.getElementById('big_img').src=document.getElementById('big_img1').src; return false">
открыть большое изображение
</a>


</body>
</html>

Это сообщение отредактировал(а) Котокобра - 26.11.2009, 14:21

maugli

Дата 26.11.2009, 14:21 (ссылка)

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

Загрузка ...

Шустрый

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

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

Котокобра, блин smile

ну у меня же не с этим проблема. Я описал что не так, почему вы упорно пишите про то, что у меня получилось, и совсем не про то, что у меня не получается?

Котокобра

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

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

Загрузка ...

Шустрый

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

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

Цитата

Т.е. в тайтле я храню фотографии и текст, которые выводятся. Вот кликая на эти фотографии и должна меняться большая.

Вы в тайтле кликаете на какие-то фотографии, и они не отображаются в большом окне, правильно я вас понимаю?

maugli

Дата 27.11.2009, 14:21 (ссылка)

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

Загрузка ...

Шустрый

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

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

Котокобра, если честно я уже не знаю как вы меня понимаете. Я по-моему очень подробно описал в чем суть проблемы. Привел страницу с примером, попробуйте пожалуйста проделать то, что я описываю: "Нажимаете на картинку с ссылкой "продано", появляется большая картинка, внизу маленькие, кликая на маленькие ничего не происходит. Вопрос почему, что не так?"

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