사진 위치를 랜덤하게 해주고 싶습니다
킹스맨
4년 전
조회 3,384
안녕하세요
사진의 위치를 고정이 아닌 변동을 주고 싶은데 어떻게 하면 될까요?
현재
</p>
<p><div class="col text-center mx-auto px-0 pb-2"></p>
<p> <a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="1" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a></p>
<p> <a href="<a href="https://google.com/"" target="_blank" rel="noopener noreferrer">https://google.com/"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/2.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/2.gif"</a> class="pb-2 img-fluid">
</a>
<a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="35" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a>
<a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a>
<a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a></p>
<p> <a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a></p>
<p> <a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a></p>
<p> <a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a>
<a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a>
<a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a>
<a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a></p>
<p> <a href="<a href="https://google.com"" target="_blank" rel="noopener noreferrer">https://google.com"</a> target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="<a href="https://https://google.com/vast/1.gif"" target="_blank" rel="noopener noreferrer">https://https://google.com/vast/1.gif"</a> class="pb-2 img-fluid">
</a></p>
<p></div></p>
<p>
이런식으로 설정되있습니다
해당 부분은 다른사이트 코드를 참고 하였습니다
도움주셔서 진심으로 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
4년 전
https://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery
해당 자료를 봤지만.. 초보자여서 ㅠㅠ 따라하기 어렵네요 ㅠㅠ
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
4년 전
저 이미지를 출력하는 것이
A, php인가요? 아니면
B html 고정인가요?
A이면 array 등에 넣고 shuffele등으로 섞어서 loop를 돌리면 되고
B라면 자바 스크립트를 사용하는 수밖에 없겠네요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
엑스엠엘
4년 전
�
킹스맨
4년 전
워드프레스 위젯 html 입니다
댓글을 작성하려면 로그인이 필요합니다.
4년 전
워드프레스 위젯 html 사용중입니다
위치배열을 고정이 아닌 랜덤으로 하고 싶습니다.....
</p>
<p><center>
<a href="<a href="http://sample.com/"" target="_blank" rel="noopener noreferrer">http://sample.com/"</a> target="_blank"><img src="<a href="https://sample.com/sample.gif"" target="_blank" rel="noopener noreferrer">https://sample.com/sample.gif"</a> width=""></a>
<a href="<a href="http://sample1.com/"" target="_blank" rel="noopener noreferrer">http://sample1.com/"</a> target="_blank"><img src="<a href="https://sample1.com/sample.gif"" target="_blank" rel="noopener noreferrer">https://sample1.com/sample.gif"</a> width=""></a>
<a href="<a href="http://sample2.com/"" target="_blank" rel="noopener noreferrer">http://sample2.com/"</a> target="_blank"><img src="<a href="https://sample2.com/sample.gif"" target="_blank" rel="noopener noreferrer">https://sample2.com/sample.gif"</a> width=""></a>
<a href="<a href="http://sample3.com/"" target="_blank" rel="noopener noreferrer">http://sample3.com/"</a> target="_blank"><img src="<a href="https://sample3.com/sample.gif"" target="_blank" rel="noopener noreferrer">https://sample3.com/sample.gif"</a> width=""></a>
<a href="<a href="http://sample4.com/"" target="_blank" rel="noopener noreferrer">http://sample4.com/"</a> target="_blank"><img src="<a href="https://sample4.com/sample.gif"" target="_blank" rel="noopener noreferrer">https://sample4.com/sample.gif"</a> width=""></a>
</center>
<script>
$(function() {
var $bn = $('a:has(img[src^="/bn/"])');
var $wp = $bn.first().parent();</p>
<p> var shuffled = [...$bn].map(a => ([Math.random(),a])).sort((a,b) => a[0]-b[0]).map(a => a[1]);</p>
<p> // var shuffled = Array.prototype.slice.call($bn).map(function(a){return [Math.random(),a]}).sort(function(a,b){return a[0]-b[0]}).map(function(a){return a[1]});
$wp.empty().append($(shuffled)).children(':nth-child(3n)').after($('
'));
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
4년 전
https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/
이런 거를 원하시는 건가요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
킹스맨
4년 전
사진의 크기는 (300x100)동일합니다. 다만 사진의 배열이 현재 가로3개 세로4개 총 12개로 되어있습니다 사진의 위치만 전부 새로고침하면 변경되게 하고 싶습니다 (사진이 배너 입니다) 링크도 넣어야 합니다 (출력되는 배너의 위치가 모두 바뀌게) 이부분은 html부분입니다... 사용은 워드프레스 사용중입니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
자바스크립트 참고 사이트입니다.