영카트 메인배너 질문이 있습니다.

영카트 메인배너 질문이 있습니다.

QA

영카트 메인배너 질문이 있습니다.

본문

영카트를 반응형으로 사용중인데

메인배너 pc버전과 mobile 버전 둘다 쇼핑몰 index에서 보여지게 하고싶습니다.

인덱스에서는  <?php echo display_banner('메인', 'mainbanner.10.skin.php'); ?> 불러오고있고

제가 하고싶은 방식은 미디어쿼리를 사용하여 pc일때는 모바일이 안보이고

모바일일때는 pc가 안보이게 하려는 방법인데

현재 배너관리에서 접속기기 pc로 되어있는것만 나타납니다.

 

mainbanner.10.skin.php는 코드가 스크립트로 되어 있어서 수정을 어떻게 해야할지 모르겠네요..

접속기기 모바일로 표시된 것도 나타나게 하려면 아래 코드를 어떻게 바꿔야할까요?

코드 잘 보시는 고수님들 도와주세요ㅠㅠ

 

<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SHOP_SKIN_URL.'/style.css">', 0);
add_javascript('<script src="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.js"></script>', 10);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/owlcarousel/owl.carousel.min.css">', 10);

$max_width = $max_height = 0;
$bn_first_class = ' class="bn_first"';
$bn_slide_btn = '';
$bn_sl = ' class="bn_sl"';
$main_banners = array();

for ($i=0; $row=sql_fetch_array($result); $i++)
{
    $main_banners[] = $row;

    // 테두리 있는지
    $bn_border  = ($row['bn_border']) ? ' class="sbn_border"' : '';;
    // 새창 띄우기인지
    $bn_new_win = ($row['bn_new_win']) ? ' target="_blank"' : '';

    $bimg = G5_DATA_PATH.'/banner/'.$row['bn_id'];
    $item_html = '';

    if (file_exists($bimg))
    {
        $banner = '';
        $size = getimagesize($bimg);

        if($size[2] < 1 || $size[2] > 16)
            continue;

        if($max_width < $size[0])
            $max_width = $size[0];

        if($max_height < $size[1])
            $max_height = $size[1];

        $item_html .= '<div class="item">';
        if ($row['bn_url'][0] == '#')
            $banner .= '<a href="'.$row['bn_url'].'">';
        else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
            $banner .= '<a href="'.G5_SHOP_URL.'/bannerhit.php?bn_id='.$row['bn_id'].'"'.$bn_new_win.'>';
        }
        $item_html .= $banner.'<img src="'.G5_DATA_URL.'/banner/'.$row['bn_id'].'" width="'.$size[0].'" alt="'.get_text($row['bn_alt']).'"'.$bn_border.'>';
        if($banner)
            $item_html .= '</a>';
        $item_html .= '</div>';
    }
    
    $banner_style = $max_height ? 'style="min-height:'.($max_height + 25).'px"' : '';
    if ($i==0) echo '<div id="main_bn" '.$banner_style.'><div class="main_banner_owl owl-carousel">'.PHP_EOL;
    
    echo $item_html;
}

if ($i > 0) {
    echo '</div>'.PHP_EOL;
    
    echo '<div class="btn_wr"><a href="#" class="pager-prev"><i class="fa fa-angle-left"></i></a><div id="slide-counter"></div><a href="#" class="pager-next"><i class="fa fa-angle-right"></i></a> </div>'.PHP_EOL;
        echo '<div class="owl_pager">
    <ul class="carousel-custom-dots owl-dots">';
        $k = 0;
        foreach( $main_banners as $row ){
            echo '<li class="owl-dot"><a data-slide-index="'.$k.'" href="#">'.get_text($row['bn_alt']).'</a></li>'.PHP_EOL;
            $k++;
            }
        
    echo '</ul>
    </div>'.PHP_EOL;
    echo '</div>'.PHP_EOL;
?>

<script>
jQuery(function($){

    function owl_show_page(event){

        if (event.item) {
            var count = event.item.count,
                item_index = event.item.index,
                index = 1;

            if( is_loop ){
                index = ( 1 + ( event.property.value - Math.ceil( event.item.count / 2 ) ) % event.item.count || 0 ) || 1;
            } else {
                index = event.item.index ? event.item.index + 1 : 1;
            }
            
            $(event.target).next(".btn_wr").find(".slide-index").text(index);
        }
    }

    var is_loop = true,
        item_totals = $('.main_banner_owl .item').length;

    if( item_totals ){
        $('#slide-counter').prepend('<strong class="slide-index current-index"></strong> / ')
        .append('<span class="total-slides">'+item_totals+'</span>');
    }

    var owl = $('.main_banner_owl').owlCarousel({
        items:1,
        loop:is_loop,
        margin:0,
        nav:false,
        autoHeight:true,
        autoplay:true,
        autoplayTimeout:5000,   // 5000은 5초
        autoplayHoverPause:true,
        dotsContainer: '.carousel-custom-dots',
        onChanged:function(event){
            owl_show_page(event);
        },
    });

    // Custom Navigation Events
    $(document).on("click", ".carousel-custom-dots a", function(e){
        e.preventDefault();
        owl.trigger('to.owl.carousel', [$(this).parent().index(), 300]);
    });

    $(document).on("click", ".btn_wr .pager-next", function(e){
        e.preventDefault();
        owl.trigger('next.owl.carousel');
    });

    $(document).on("click", ".btn_wr .pager-prev", function(e){
        e.preventDefault();
        owl.trigger('prev.owl.carousel');
    });
});
</script>

<?php
}
?>

이 질문에 댓글 쓰기 :

답변 1

지금 PC의 배너가 반응형 처리 되어있나요?

 

되어있다면 config.php 에서 $set_device 를 'pc'로 바꿔보세요

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

회원로그인

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