width에 따라 변수값 설정하는 법
본문
아래 코드에서 max-width 980px일 때 $sliderHeight 값을 1000으로 하고 min-width 981px일 때 $sliderHeight 값을 800으로 하고 싶은데 코드를 어떻게 수정 추가해야 하나요?
<?php
$sliderWidth ="1920";
$sliderHeight ="800";
$sliderSpacer ='<img src="'.G5_THEME_URL.'/plugin/abc/imageSpacer.php?w='.$sliderWidth.'&h='.$sliderHeight.'" alt="슬라이드 영역">';
?>
ChatGPT에 아무리 물어봐도 해결이 되지 않아 여기 고수님들께 여쭤봅니다 ㅠㅠ
답변 1
이미지 태그에 아이디값 입력해주세요
<?php
$sliderWidth = "1920";
$sliderHeight = "800"; // 기본 값
$sliderSpacer = '<img id="sliderSpacer" src="'.G5_THEME_URL.'/plugin/abc/imageSpacer.php?w='.$sliderWidth.'&h='.$sliderHeight.'" alt="슬라이드 영역">';
?>
그 이후 스크립트로 처리할 수 있습니다.
Php코드 자체는 크기에 따라 반응형 변수 적용이 불가능합니다.
$(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');
}
}
});
답변을 작성하시기 전에 로그인 해주세요.
