답변 5개
하시려는게 썸네일 이미지를 찍으면 원본 이미지가 뜨는건가요?
jquery 로 하시면 됩니다.
class나 id 를 이미지에 주는건 php 반복문(for)로 하시고
클릭시 팝업이나 레이어 뜨게 하는건 jquery로 하시면 됩니다.
<div class='thumbwrap_01'>
<img src='/data/file/smaple_thumb.jpg' class='thumb'>
<div class='orgimage' style='display:none'>
<img src='/data/file/smaple.jpg'>
</div>
</div>
예를 들면 위 코드처럼 php for문으로 생성하고
jquery로 click 또는 toggle 을 이용해 형제노드의 orgimage 클래스를 찾아서 display:block 해주면
원본이미지가 뜨게 됩니다. css는 상황에 맞게 해주시고요.
참고하세요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
그런데 말입니다
클릭하면 부여된 id와 연관된 큰 이미지를 보여준다
이것을 하려는 모양인데 큰이미지를 숨겨놓았다가 클릭하면 보여준다<--이것은 아주 안좋은 방법입니다
클릭하거말거나 큰 이미지를 미리 모두 불러다놓기 때문에 홈페이지 뜨는 속도, 트래픽에 영향을 줍니다
더우기 10개 20개 이렇게 많은 이미지라면...그런데 100개 정도를.... 이렇게 해서는 안됩니다
따라서 클릭하면 클릭한 이미지만 불러와서 보여주는 방법으로 해야합니다
<?
for($i=0; $i<100; $i++)
echo "<div class="동일클래스" ref='이미지주소'>이미지 <?=($i+1)?>보기</div>
?>
<div id="큰이미지"><img /></div> 하나만 잇으면 됩니다
<script>
$function(){
$('.동일클래스').click(function(){
idx= $('.동일클래스').index( $(this) );
imgfile= $(this).attr('ref');
$('#큰이미지 img').attr('src', imgfile);
});
});
</script>
이미지 주소에 각기 다른 이미지 주소를 어떻게 넣을지는 알아서 하시고...ㅎㅎ
변수를 생성하고 어쩌고 그런 필요없는 발상은 하지마시고
jquery를 공부한 후에 하세요
답변에 대한 댓글 3개
정말 좋은 조언 감사드립니다.
php 공부함에 있어서 js 와 jq 는 정말 빠질수가 없네요 ㅠㅠ
오늘은 이걸 연구해봐야겠습니다.
항상 고맙습니다!
자바스크립트 소스들을 보면 꼭 뒤에 <img /> 이런식으로 균이님처럼
슬래쉬가 붙은 소스가 많더라구요..
주석 같은 경우에도
<!-- 주석 -->
이런걸
<!-- 주석 } -->
이렇게 하는 소스도 있구요..
특별한 이유가 있나요?
아래 링크를 읽어보면 명확하게 알 수 잇을 겁니다
https://ko.wikipedia.org/wiki/XHTML
이런 것도 잇죠(따옴표를 사용하느냐 마느냐...
<form name=test>--><form name="test">
댓글을 작성하려면 로그인이 필요합니다.
조건에 맞게 변수를 만들려면 조건문 사용하면 됩니다.
페이지 내에 아무 이벤트도 없는데 변수는 발생하지 않겠지요?
하려는게 무었인지 질문을 올려보세요.
스크립트로 페이지 이동없이 변수 생성은 안됩니다.
hidden iframe, ajax로 세션, 쿠키등을 생성할 수는 있겠지만
이걸 사용하려면 어짜피 원래 페이지를 새로고침해야 됩니다.
답변에 대한 댓글 1개
제일 만만한 갤러리 부분 공부하고 있는데요
간단하게 썸네일1 을 클릭시 큰이미지1 이 뜨는데
이걸 변수를 써서 조금 단축시켜보려고 하고 있습니다.
<div id="썸네일1" class="동일클래스"></div>
<div id="썸네일2" class="동일클래스"></div>
<div id="썸네일2" class="동일클래스"></div>
<!-- 숨겨진DIV -->
<div id="큰이미지1" class="동일클래스"></div>
<div id="큰이미지2" class="동일클래스"></div>
<div id="큰이미지3" class="동일클래스"></div>
iframe 사용해서 갤러리를 이용할수도 있지만
이미지가 100개 미만이고 한번씩 이미지들이 새로 업데이트 되어서요.
그래서 단순하게 php 로 만들려고 하고 있어요.
그냥 막장코딩으로 1부터 100까지 모두 만들면 되겠는데
요즘 한창 변수공부를 하고 있어서 응용해볼까 합니다^^
[code]
<?php
$변수1='$("큰이미지1").css("display","block");';
$변수2='$("큰이미지2").css("display","block");';
$변수3='$("큰이미지3").css("display","block");';
.
.
.
$변수100='$("큰이미지100").css("display","block");';
?>
<a onclick="<?$변수1">"><div id="썸네일1" class="동일클래스"></div></a>
<a onclick="<?$변수2">"><div id="썸네일2" class="동일클래스"></div></a>
<a onclick="<?$변수3">"><div id="썸네일3" class="동일클래스"></div></a>
.
.
.
.
<a onclick="<?$변수100">"><div id="썸네일100" class="동일클래스"></div></a>
<!-- 숨겨진DIV -->
<div id="큰이미지1" class="동일클래스"></div>
<div id="큰이미지2" class="동일클래스"></div>
<div id="큰이미지3" class="동일클래스"></div>
.
.
.
<div id="큰이미지100" class="동일클래스"></div>
[/code]
최초의 의도는 위 구조를 변수를 이용하여 좀더 단축해보고자
div id 를 이용하여 변수를 자동으로 생성할수 있는가 였습니다..
조건문까지는 아직 실력이 미흡하여
onclick 을 누르면 현재 페이지에서 사용할수 있는 변수를 생성하는 방법이 있는지
여쭈어본것이구요^^;;
그러면
<a onclick="변수1생성"><div id="썸네일1" class="동일클래스"></div></a>
이렇게 되겠죠??
진서기 님께서 말씀해주신대로
페이지 이동없이 단순 스크립트만으로 변수생성이 어렵다고 하시니
좀더 연구해 봐야겠습니다^^;;
잘 몰라서 초보가 질문한 글에도 친절하게 답변해주셔서 감사합니다^^
댓글을 작성하려면 로그인이 필요합니다.
<div class='divclass'>0</div>
<div class='divclass'>1</div>
<div class='divclass'>2</div>
<script>
var div = $('.divclass');
div.eq(0).css('font-size', '1em');
div.eq(1).css('font-size', '2em');
div.eq(2).css('font-size', '3em');
</script>
답변에 대한 댓글 1개
근데 이 방식대로 하면 0부터 99 까지 스크립트를
수동으로 입력해야 하나요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
지난주까지만해도 변수는 커녕 스크립트도 몰라서 버벅였는데요..
php 정말 재밌네요^^
더욱 열심히 공부하겠습니다~