사진 위치를 랜덤하게 해주고 싶습니다
관련링크
http://위치
48회 연결
본문
안녕하세요
사진의 위치를 고정이 아닌 변동을 주고 싶은데 어떻게 하면 될까요?
현재
<div class="col text-center mx-auto px-0 pb-2">
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="1" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com/" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/2.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="35" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
</div>
이런식으로 설정되있습니다
해당 부분은 다른사이트 코드를 참고 하였습니다
도움주셔서 진심으로 감사합니다
답변 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/
이런 거를 원하시는 건가요?
사진의 크기는 (300x100)동일합니다. 다만 사진의 배열이 현재 가로3개 세로4개 총 12개로 되어있습니다 사진의 위치만 전부 새로고침하면 변경되게 하고 싶습니다 (사진이 배너 입니다) 링크도 넣어야 합니다 (출력되는 배너의 위치가 모두 바뀌게) 이부분은 html부분입니다... 사용은 워드프레스 사용중입니다
워드프레스 위젯 html 사용중입니다
위치배열을 고정이 아닌 랜덤으로 하고 싶습니다.....
<center>
<a href="http://sample.com/" target="_blank"><img src="https://sample.com/sample.gif" width=""></a>
<a href="http://sample1.com/" target="_blank"><img src="https://sample1.com/sample.gif" width=""></a>
<a href="http://sample2.com/" target="_blank"><img src="https://sample2.com/sample.gif" width=""></a>
<a href="http://sample3.com/" target="_blank"><img src="https://sample3.com/sample.gif" width=""></a>
<a href="http://sample4.com/" target="_blank"><img src="https://sample4.com/sample.gif" width=""></a>
</center>
<script>
$(function() {
var $bn = $('a:has(img[src^="/bn/"])');
var $wp = $bn.first().parent();
var shuffled = [...$bn].map(a => ([Math.random(),a])).sort((a,b) => a[0]-b[0]).map(a => a[1]);
// 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($('<br><br>'));
});
</script>
저 이미지를 출력하는 것이
A, php인가요? 아니면
B html 고정인가요?
A이면 array 등에 넣고 shuffele등으로 섞어서 loop를 돌리면 되고
B라면 자바 스크립트를 사용하는 수밖에 없겠네요.
워드프레스 위젯 html 입니다
https://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery
해당 자료를 봤지만.. 초보자여서 ㅠㅠ 따라하기 어렵네요 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
