Iframe 대체 코드로 질문있습니다.
본문
이거 와서 자꾸 질문만 하고 가는 것 같아 너무 죄송하네요;
많이 배워서 알게되면 여러가지 답변도 해드리고 싶은데 내공이 엄청 낮은게 ㅠ 한스럽네요 ㅠㅠ
질문입니다.
iframe 이 html5에 여러가지로 안좋다고 해서
대체해서 제이쿼리나 다른 방법이 없을까 하다가 나나티님께 도움을 받았습니다.(답변해주신 nanati님 너무나 감사했습니다 ^^)
간단한 이미지를 띄우는 거라서 밑에 예제를 응용했는데요.
예제사이트) http://uidevelop.tistory.com/31 (nanati님 허락없이 링크해도 될지 모르겠습니다. 말씀 주시면 바로 내리겠습니다.)
썸네일을 옆쪽에 리스트로 따로 클릭해서 볼수 있도록 바꿨습니다.
이런식인데요.. 문제는 이미지를 띄우는거라 링크를 걸 수 없다는 점입니다.
혹시 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
<div id="zoom_img">
<a href="#"><img src="http://cfile25.uf.tistory.com/image/220E4534516620D3242100" alt="image 1"></a></div>
이렇게 미리 a태그를 넣으시고
작은 이미지들 각각에 다음 처럼 링크할 주소를 rel속성에 미리 넣으시고
<img src="http://cfile25.uf.tistory.com/image/220E4534516620D3242100" alt="image 1" rel="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로 지정한 링크가 걸리지 않나요?
좀 더 간단하게 하는 방법도 있겠지만 지금하고 있는 작업에서는 이렇게 해 보시는게...
테스트는 해 보지 못했습니다.
그림자체에 링크 걸림으로써 해결이 됩니다 ㅎ
자세한 답변 감사드립니다.
