Господа, при реализации возникла проблема.
1. Имею:
Скрипт фотогаллереи (скачал из интернета). При наведении курсора фото увеличивается, при уводе курсора - уменьшается.
2. Что хотел получить?
После увеличения, если произведён клик , выбранное фото дополнительно появляется на новом месте. А при последующем наведении курсора на фото, оставшемся на прежнем месте, ничего не должно происходить.
3. Что делал.
В ссылку ввёл дополнительный атрибут «alt», и добавил выборку по атрибуту (выбор img не работает. Почему? Или я что-то не так делаю? ).
4. В чём проблема.
Изменяю атрибут (Пробовал по разному и с использованием bind, live. С live почему-то вообще у меня получается плохо.). При выводе атрибута через функцию «алерт», появляется сообщение, что атрибут изменился, но при повторных наведениях курсора вновь происходит выборка картинки и её увеличение. Чего, по идее, происходить не должно.
Если можно, подскажите, как решается проблема изменения атрибута в таком случае. Спасибо.
Скрипт:
function myClick(){
$(this). click (function(){
$(this).attr('alt',"myFlag");
alert($(this).attr('alt'));
});
};
function myHover1(){
$(this).css({'z-index' : '10'});
$(this).find('img').stop()
.animate({
top: '-35px',
left: '-35px',
width: '120px',
height: '120px'
}, 400 , myClick
); // Конец функции animate
$(this).append('<span>' + this.title + '</span>');
$(this).find('span').hide();
$(this).find('span').fadeIn(500);
}; //Конец функции myHover1
function myHover2(){
$(this).css({'z-index' : '0'});
$(this).find('img').stop()
.animate({
top: '0',
left: '0',
width: '50px',
height: '50px'
}, 250);
$(this).find('span').remove();
}; //Конец функции myHover2
$(document).ready(function(){
$("#gallery a[alt != myFlag]"). hover (myHover1,myHover2);
});// Конец функции ready
Индекс -файл в урезанном виде:
<ul id="gallery">
<li><a href="" title="Фото 1" alt = "myFlag"><img src=" photo1.jpg" width="50" height="50" alt="" /></a></li>
<li><a href="" title=" Фото2" alt = "Photo"><img src=" photo 2.jpg" width="50" height="50" alt="" /></a></li>