사진 위치를 랜덤하게 해주고 싶습니다

사진 위치를 랜덤하게 해주고 싶습니다

QA

사진 위치를 랜덤하게 해주고 싶습니다

본문

안녕하세요

사진의 위치를 고정이 아닌 변동을 주고 싶은데 어떻게 하면 될까요?

 

현재


<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

사진의 크기는 (300x100)동일합니다. 다만 사진의 배열이 현재 가로3개 세로4개 총 12개로 되어있습니다  사진의 위치만 전부 새로고침하면 변경되게 하고 싶습니다 (사진이 배너 입니다) 링크도 넣어야 합니다 (출력되는 배너의 위치가 모두 바뀌게) 이부분은 html부분입니다... 사용은 워드프레스 사용중입니다

1897340107_1634615143.8713.png

워드프레스 위젯 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라면 자바 스크립트를 사용하는 수밖에 없겠네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,149 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT