익스10에서만 안되는건 왜일까요..ㅜ.ㅜ > 그누4 질문답변

🙏SIR UI/UX 디자인 의뢰(~7/31)

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

익스10에서만 안되는건 왜일까요..ㅜ.ㅜ 정보

익스10에서만 안되는건 왜일까요..ㅜ.ㅜ

본문

명랑페인님꺼 다중 이미지 갤러리-세로형 스킨을 적용중인데요.. 무리없이 잘 쓰다가 익스10으로 바꾼뒤 익스10에서만 작동을 안하는것을 발견했습니다.

아마 thumbnailviewer2.js 파일을 수정하면 될듯한데.. 도저히 방법을 몰라 글을 남겨봅니다..

소스는 아래와 같습니다

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)


iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" width=316 height=226 style="border-width:0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'" rel="thumbnail">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
},

hideimage:function(linkobj){
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
showcontainer.innerHTML=""
},


cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
this.showcontainer=null
for (var i=0; i<this.targetlinks.length; i++){
this.targetlinks[i].onclick=null
this.targetlinks[i].onmouseover=null
this.targetlinks[i].onmouseout=null
}
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP


} //END init() function

}


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.alreadyrunflag=1
thumbnailviewer2.init()
}
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")


혹시 경험하신분 도움좀 부탁드릴께요....꾸벅..!

댓글 전체

호갱님, 당황하셨어요?

익스는 원래 그렇게 쓰는 겁니다. ^^

죄송, 마스타님을 따라해 봤습니다.

http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=280664&page=2


진지빨고 말씀드리자면,  IE10 과 IE11 에서 innerHTML 이 먹통이 되어버리는 버그가 있습니다.

http://support.microsoft.com/kb/276228

위 문서에서 설명하는데로 해보시던가 (비추)  더좋은/안전하게 jQuery 로 innerHTML 로 전환하시면 해결될 문제 같습니다.

어짜피 그누보드는 jQuery 를 사용하니까요.

jQuery 로 어떻게 변환하는지는 아래 stackoverflow 질답을 참고하셔서 하실 수 있습니다.

http://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT