letrletrdina
Постоялец
- Регистрация
- 25 Сен 2008
- Сообщения
- 146
- Реакции
- 6
- Автор темы
- #1
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войдиили Зарегистрируйся
Надо что бы на картинке отображался курсор что можно кликнуть для увеличения изображения- спецы подмогите куда вставить типо "cursor: pointer;" или что то подобное что бы отобраался курсор ?
скрипт попапа
var winSize, imgCounter=0, overLay;
$(document).ready(function () {
overLay = document.createElement('DIV');
winSize = getWindowSize();
$(overLay).css({
width: '100%',
height: winSize.docHeight,
'background-color': 'silver',
position: 'absolute',
'z-index': '40',
top: '0',
left: '0',
display:'none'
})
$(overLay).appendTo("body");
$('.getBigPic').each(function(){
var href = $(this).attr('src');
imgCounter = imgCounter + 1 ;
var id = 'bigPicId_'+imgCounter;
loadBigPic(href, id);
$(this).click(function(){
showBigPic(id);
})
})
});
function showBigPic(id)
{
winSize = getWindowSize();
var newImg = $('#'+ id);
bigImgWidth = $(newImg).width();
if(bigImgWidth==0) bigImgWidth = $(newImg).attr('width');
bigImgHeight = $(newImg).height();
if(bigImgHeight==0) bigImgHeight = $(newImg).attr('height');
$(newImg).css({
leftwinSize.clientWidth/2 - bigImgWidth/2),
topwinSize.clientHeight/2 - bigImgHeight/2) + winSize.scroll ,
position: 'absolute',
'z-index': '50',
'border-width': '2px',
'border-color': 'black',
'border-style': 'solid'
});
$(newImg).click(function(){
$(newImg).hide();
$(overLay).hide();
})
$(newImg).fadeTo('fast',1);
$(overLay).fadeTo('fast',0.80);
$(overLay).click(function(){
$(overLay).hide();
$(newImg).hide();
})
}
function loadBigPic(href, id)
{
var newImg = new Image();
$(newImg).attr({'src':href,'title':'Кликните, чтобы закрыть','id': id});
$(newImg).css({'display': 'none','z-index':'10'});
$(newImg).appendTo("body");
}
function getWindowSize()
{
var clientWidth = $(window).width();
var clientHeight = $(window).height();
var scroll = $(window).scrollTop();
var docHeight = $(document).height();
var docWidth = $(document).width();
return ({'clientWidth': clientWidth, 'clientHeight': clientHeight, 'scroll': scroll, 'docWidth': docWidth, 'docHeight': docHeight});
}
Для просмотра ссылки Войди
Надо что бы на картинке отображался курсор что можно кликнуть для увеличения изображения- спецы подмогите куда вставить типо "cursor: pointer;" или что то подобное что бы отобраался курсор ?
скрипт попапа
var winSize, imgCounter=0, overLay;
$(document).ready(function () {
overLay = document.createElement('DIV');
winSize = getWindowSize();
$(overLay).css({
width: '100%',
height: winSize.docHeight,
'background-color': 'silver',
position: 'absolute',
'z-index': '40',
top: '0',
left: '0',
display:'none'
})
$(overLay).appendTo("body");
$('.getBigPic').each(function(){
var href = $(this).attr('src');
imgCounter = imgCounter + 1 ;
var id = 'bigPicId_'+imgCounter;
loadBigPic(href, id);
$(this).click(function(){
showBigPic(id);
})
})
});
function showBigPic(id)
{
winSize = getWindowSize();
var newImg = $('#'+ id);
bigImgWidth = $(newImg).width();
if(bigImgWidth==0) bigImgWidth = $(newImg).attr('width');
bigImgHeight = $(newImg).height();
if(bigImgHeight==0) bigImgHeight = $(newImg).attr('height');
$(newImg).css({
leftwinSize.clientWidth/2 - bigImgWidth/2),
topwinSize.clientHeight/2 - bigImgHeight/2) + winSize.scroll ,
position: 'absolute',
'z-index': '50',
'border-width': '2px',
'border-color': 'black',
'border-style': 'solid'
});
$(newImg).click(function(){
$(newImg).hide();
$(overLay).hide();
})
$(newImg).fadeTo('fast',1);
$(overLay).fadeTo('fast',0.80);
$(overLay).click(function(){
$(overLay).hide();
$(newImg).hide();
})
}
function loadBigPic(href, id)
{
var newImg = new Image();
$(newImg).attr({'src':href,'title':'Кликните, чтобы закрыть','id': id});
$(newImg).css({'display': 'none','z-index':'10'});
$(newImg).appendTo("body");
}
function getWindowSize()
{
var clientWidth = $(window).width();
var clientHeight = $(window).height();
var scroll = $(window).scrollTop();
var docHeight = $(document).height();
var docWidth = $(document).width();
return ({'clientWidth': clientWidth, 'clientHeight': clientHeight, 'scroll': scroll, 'docWidth': docWidth, 'docHeight': docHeight});
}