СпецЭффекты Javascript :: Web-программирование

arreke

Цитата:

при нажатии на маленький рисунок появляется большой как бы в новом слое, при этом всё остальное содержимое страницы вроде бы и видно но не доступно, как будто на заднем слое

ну и ? делаете слой размером с окно и большим z-index
если не лень разбираться - вот писал когда то.. отрубает и скроллы при этом - не так, как по ссылкам

Код:

// preload loading image
var img=new Image()
img.src='/images/loading_image.gif'
var old_over
function image_preview(url, obj)
{var defv=1
if(typeof url=='object') {obj=url;url=defv}
if(typeof url=='number'&&obj&&obj.src)
if(obj.src.lastIndexOf('/')!=-1)
url=obj.src.substr(0,obj.src.lastIndexOf('/')+1)+obj.src.substr(obj.src.lastIndexOf('/')+1+url)
var w=get_ww(),h=get_wh(), scroll=getScrollXY()
var bropacity=(document.all&&!window.opera&&!document.createTextRange)?"filter: alpha(opacity=80);":(!window.opera?"-moz-opacity: 0.8;":"opacity: 0.8;")
var div=document.createElement('div')
div.style.cssText=bropacity+'width:'+w+'px;height:'+h+'px;position:absolute;top:'+scroll[1]+'px;left:'+scroll[0]+'px;background-color:#222222;z-index:100'
div.id='hide_bg'
document.body.appendChild(div)
div=document.createElement('div')
div.style.cssText='width:'+w+'px;height:'+h+'px;position:absolute;top:'+scroll[1]+'px;left:'+scroll[0]+'px;cursor:pointer;z-index:101'
div.innerHTML='<table width="100%" height="100%" border="0"><tr><td valign="middle" align="center" style="background: transparent url(/images/loading_image.gif) no-repeat center center"><img id="preview_image" src="'+url+'" style="visibility:hidden" onload="fix_preview_size();this.style.visibility=\'visible\'"></td></tr></table>'
div.id='preview_pic'
div.onclick=hide_preview
div.title='Click to close'
document.body.appendChild(div)
old_over=document.body.style.overflow
document.body.style.overflow='hidden'
myEvent(window,"resize",fix_preview_size,"+")
//FF fix
window.scrollTo(scroll[0],scroll[1])
}
function hide_preview()
{
var test=document.getElementById('preview_pic')
if(test)document.body.removeChild(test)
test=document.getElementById('hide_bg')
if(test)document.body.removeChild(test)
document.body.style.overflow=old_over==''?'auto':old_over
var scroll=getScrollXY()
//FF fix
window.scrollTo(scroll[0],scroll[1])
myEvent(window,"resize",fix_preview_size)
}
function fix_preview_size()
{
var w=get_ww(),h=get_wh(),obj=document.getElementById('hide_bg')
if(obj){obj.style.width=w+'px';obj.style.height=h+'px'}
obj=document.getElementById('preview_pic')
if(obj){obj.style.width=w+'px';obj.style.height=h+'px'}
obj=document.getElementById('preview_image')
if(obj){if(obj.width>w||obj.height>h)
{var c=(obj.height!=0?obj.height:1)/(obj.width!=0?obj.width:1)
    if((obj.width!=0?obj.width:1)/w>(obj.height!=0?obj.height:1)/h)
    {obj.height=w*c;obj.width=w}else{obj.height=h;obj.width=h/c}
    }
    }
}
function get_ww()
{var frameWidth=800
if (self.innerWidth)
    frameWidth = self.innerWidth
else if (document.documentElement && document.documentElement.clientWidth)
    frameWidth = document.documentElement.clientWidth
else if (document.body)
    frameWidth = document.body.clientWidth
return frameWidth
}
function get_wh()
{var frameHeight=640
if (self.innerHeight)
    frameHeight = self.innerHeight
else if (document.documentElement && document.documentElement.clientHeight)
    frameHeight = document.documentElement.clientHeight
else if (document.body)
    frameHeight = document.body.clientHeight
return frameHeight
}
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
scrOfY = window.pageYOffset
scrOfX = window.pageXOffset
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
scrOfY = document.body.scrollTop
scrOfX = document.body.scrollLeft
} else if( document.documentElement &&
( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
scrOfY = document.documentElement.scrollTop
scrOfX = document.documentElement.scrollLeft
}
return [ scrOfX, scrOfY ]
}
function myEvent(where,evt, func, op)
{if (op=="+")
{if (where.attachEvent) where.attachEvent("on"+evt,func)
else if (where.addEventListener) where.addEventListener(evt,func,false)}
else {if (where.detachEvent) where.detachEvent("on"+evt,func)
else if (where.removeEventListener) where.removeEventListener(evt,func,false)}
}

аргументы url, obj - я уже и не помню что делал..
а, вспомнил.. в общем если передается объект (картинка), то берется адрес ее и вырезается указанное количество букв из имени файла. по умолчанию - одна.
то есть если картинка /imgs/sPicture.jpg
то скрипт будет грузить большую картинку как /imgs/Picture.jpg

ps: на оригинальность и красоту не претендую

----------
Away/DND

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки