Здравствуйте, написал скрипт, который можно посмотреть на http://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>
|
Спасибо. |
)
ну это кусок JS кода с использованием библиотеки jQuery.