width에 따라 변수값 설정하는 법 채택완료

아래 코드에서 max-width 980px일 때 $sliderHeight 값을 1000으로 하고 min-width 981px일 때 $sliderHeight 값을 800으로 하고 싶은데 코드를 어떻게 수정 추가해야 하나요?

 

Copy
<?php
    $sliderWidth ="1920";
    $sliderHeight ="800";

    $sliderSpacer ='<img src="'.G5_THEME_URL.'/plugin/abc/imageSpacer.php?w='.$sliderWidth.'&h='.$sliderHeight.'" alt="슬라이드 영역">';
?>

 

ChatGPT에 아무리 물어봐도 해결이 되지 않아 여기 고수님들께 여쭤봅니다 ㅠㅠ

답변 1개

채택된 답변
+20 포인트

이미지 태그에 아이디값 입력해주세요

 

Copy
<?php

    $sliderWidth = "1920";

    $sliderHeight = "800"; // 기본 값

    $sliderSpacer = '<img id="sliderSpacer" src="'.G5_THEME_URL.'/plugin/abc/imageSpacer.php?w='.$sliderWidth.'&h='.$sliderHeight.'" alt="슬라이드 영역">';

?>

 

그 이후 스크립트로 처리할 수 있습니다.

Php코드 자체는 크기에 따라 반응형 변수 적용이 불가능합니다.

 

Copy
$(document).ready(function() {

    // 페이지 로드 시 크기를 설정

    adjustSliderHeight();

 

    // 화면 크기가 변경될 때마다 크기 설정

    $(window).resize(function() {

        adjustSliderHeight();

    });

 

    // 화면 크기에 따라 슬라이더 높이 변경 함수

    function adjustSliderHeight() {

        var width = $(window).width(); // 현재 화면의 너비 가져오기

        var sliderSpacer = $('#sliderSpacer');

 

        if (width <= 980) {

            sliderSpacer.css('height', '1000px');

        } else {

            sliderSpacer.css('height', '800px');

        }

    }

});
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

네 답변 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고