테스트 사이트 - 개발 중인 베타 버전입니다

Iframe 대체 코드로 질문있습니다. 채택완료

녀비여비 10년 전 조회 19,296

이거 와서 자꾸 질문만 하고 가는 것 같아 너무 죄송하네요; 

많이 배워서 알게되면 여러가지 답변도 해드리고 싶은데 내공이 엄청 낮은게 ㅠ 한스럽네요 ㅠㅠ

 

질문입니다.

 

iframe 이 html5에 여러가지로 안좋다고 해서 

대체해서 제이쿼리나 다른 방법이 없을까 하다가 나나티님께 도움을 받았습니다.(답변해주신 nanati님 너무나 감사했습니다 ^^) 

 

단한 이미지를 띄우는 거라서 밑에 예제를 응용했는데요.

 

예제사이트) http://uidevelop.tistory.com/31" target="_blank" style="color: rgb(0, 0, 0);">http://uidevelop.tistory.com/31" target="_blank" style="color: rgb(0, 0, 0);">http://uidevelop.tistory.com/31 (nanati님 허락없이 링크해도 될지 모르겠습니다. 말씀 주시면 바로 내리겠습니다.)

 

썸네일을 옆쪽에 리스트로 따로 클릭해서 볼수 있도록 바꿨습니다.

 

http://sir.co.kr/data/cheditor4/1502/5e1406bc038f6a8f435537a61c047f19_1422954698_9439.jpg" target="_blank" title="클릭하시면 큰이미지로 볼 수 있습니다." style="color: rgb(0, 0, 0);"> 

 

이런식인데요.. 문제는  이미지를 띄우는거라 링크를 걸 수 없다는 점입니다.

 

혹시 div를 묶어서라도 띄울 수 있는 방법은 없을까요?

 

 

 

 

 

$( document ).ready(function() {

$( ".thumb li a" ).click(function() {

var address = $(this).children("img.i2");

$("#zoom_img img").attr("src",address.attr("src")).attr("alt",address.attr("alt"));

$(this).parent().addClass("on").siblings().removeClass("on");

return false;

});

});

 

 

명령어 구문입니다.

img가 아닌 div를 띄울수 있는 방법이 있는가 궁금해서 글을 올립니다. 

혹시 올린 자료중에 문제 되는 게 있다면 바로 내리도록 하겠습니다. 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
10년 전

 

이렇게 미리 a태그를 넣으시고

 

작은 이미지들 각각에 다음 처럼 링크할 주소를 rel속성에 미리 넣으시고

http://cfile25.uf.tistory.com/image/220E4534516620D3242100">http://cfile25.uf.tistory.com/image/220E4534516620D3242100" alt="image 1" rel="http://www.sir.co.kr">http://www.sir.co.kr" />

 

$( document ).ready(function() {

$( ".thumb li a" ).click(function() {

var address = $(this).children("img.i2");

                        var link = $(this).children("img").attr("rel");

$("#zoom_img a").attr("href",link);

$("#zoom_img img").attr("src",address.attr("src")).attr("alt",address.attr("alt"));

$(this).parent().addClass("on").siblings().removeClass("on");

return false;

});

});

 

이렇게 하면 큰 이미지에 rel로 지정한 링크가 걸리지 않나요?

 

좀 더 간단하게 하는 방법도 있겠지만 지금하고 있는 작업에서는 이렇게 해 보시는게...

테스트는 해 보지 못했습니다. 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

녀비여비
10년 전
그림자체에 링크 걸림으로써 해결이 됩니다 ㅎ
자세한 답변 감사드립니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인