로그인
커뮤니티
  • 강아지
  • 고양이
  • 앵무새
  • 물고기
  • 곤충
  • 파충류
  • 새(조류)
  • 기타/애니멀
  • 식물게시판
  • 풍경/생태/자연
    • 123
    애니멀 집소개 목록 | 이전글 | 다음글
    123 (0)

    메르세데스마이바흐S [가입일 : 2016-11-18]
    추천 0 | 조회 802
    작성일 2024.09.25 (23:19:45)
    IP :
    		URL복사     https://www.animalnara.com/community/board_view.php?board_code=home&idx=5264               
    7 type="text/javascript" src="../js/jquery-3.7.0.min.js"> > // 페이지 로드 시 다크 모드 설정 window.addEventListener("DOMContentLoaded", function() { var storedColorMode = window.localStorage.getItem("color_mode"); var defaultColorMode = storedColorMode || ""; document.body.classList.toggle("dark", defaultColorMode === "dark"); }); // 클릭 시 삭제 및 대표사진 설정 버튼 표시 function showMediaButtons(event, mediaElement) { // 이벤트 전파 방지 event.stopPropagation(); // 기존 버튼 제거 document.querySelector('.delete-button')?.remove(); // 기존의 하이라이트 해제 document.querySelectorAll('img, video').forEach(el => el.classList.remove('highlight')); // 하이라이트 추가 mediaElement.classList.add('highlight'); // 현재 클릭된 미디어가 대표사진이 아닌 경우 if (mediaElement.id !== 'representativeMedia') { // 기존의 대표사진 해제 var currentRepresentative = document.getElementById('representativeMedia'); if (currentRepresentative) { currentRepresentative.id = ''; // 기존 대표사진 ID 초기화 // 기존 대표사진의 버튼도 제거 document.querySelector('.representative-button')?.remove(); } } // 대표사진 버튼 생성 var representativeButton = createRepresentativeButton(mediaElement); setButtonPosition(representativeButton, mediaElement, 10); document.body.appendChild(representativeButton); // 대표사진 버튼 추가 // 삭제 버튼 생성 var deleteButton = document.createElement('div'); deleteButton.className = 'delete-button'; setButtonPosition(deleteButton, mediaElement, 10, true); // 크기 조정 버튼 생성 createSizeButtons(deleteButton, mediaElement); // 삭제 버튼 클릭 시 처리 var deleteIconButton = document.createElement('div'); deleteIconButton.className = 'icon-button'; deleteIconButton.innerHTML = ' 삭제'; deleteIconButton.onclick = function() { handleDelete(mediaElement); deleteButton.remove(); representativeButton.remove(); // 대표사진 버튼 제거 mediaElement.classList.remove('highlight'); }; deleteButton.appendChild(deleteIconButton); document.body.appendChild(deleteButton); } // 대표사진 버튼 생성 (id로 설정) function createRepresentativeButton(mediaElement) { var representativeButton = document.createElement('div'); representativeButton.id = 'representativeButton'; // ID 추가 representativeButton.className = 'representative-button'; representativeButton.innerHTML = '대표사진'; // 미디어의 기존 대표사진 상태 확인 if (mediaElement.id === 'representativeMedia') { representativeButton.style.backgroundColor = '#cf3a3a'; // 강조 배경색 representativeButton.style.color = '#fff'; // 강조 글자색 } representativeButton.onclick = function() { // 대표사진 해제 및 유지 if (mediaElement.id === 'representativeMedia') { mediaElement.id = ''; // ID 초기화 representativeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; // 기본 배경색 representativeButton.style.color = 'black'; // 기본 글자색 alert("대표사진 해제되었습니다."); } else { mediaElement.id = 'representativeMedia'; // 대표사진 설정 representativeButton.style.backgroundColor = '#cf3a3a'; // 강조 배경색 representativeButton.style.color = '#fff'; // 강조 글자색 alert("대표사진으로 설정되었습니다."); } }; return representativeButton; } // 버튼 위치 설정 function setButtonPosition(button, mediaElement, offset, isBelow = false) { var rect = mediaElement.getBoundingClientRect(); button.style.top = (isBelow ? rect.bottom : rect.top) + window.scrollY + offset + 'px'; button.style.left = (rect.left + window.scrollX + 10) + 'px'; } // 크기 조정 버튼 생성 function createSizeButtons(container, mediaElement) { var sizes = [100, 75, 50, 25]; // 비율 배열 sizes.forEach(size => { var iconButton = document.createElement('div'); iconButton.className = 'icon-button'; iconButton.innerHTML = '' + size + '%'; iconButton.onclick = function() { if (mediaElement.tagName === 'VIDEO') { adjustVideoSize(mediaElement, size); } else if (mediaElement.tagName === 'IMG') { adjustImageSize(mediaElement, size); } container.remove(); }; container.appendChild(iconButton); }); // 원래 크기 버튼 추가 var originalSizeButton = document.createElement('div'); originalSizeButton.className = 'icon-button'; originalSizeButton.innerHTML = ' 원래 사이즈'; originalSizeButton.onclick = function() { if (mediaElement.tagName === 'VIDEO') { resetVideoSize(mediaElement); } else if (mediaElement.tagName === 'IMG') { resetImageSize(mediaElement); } container.remove(); }; container.appendChild(originalSizeButton); } // 삭제 요청을 위한 URL 생성 및 AJAX 호출 function handleDelete(mediaElement) { var dataUrl = mediaElement.closest('.video-container')?.getAttribute('data-url') || mediaElement.closest('.image-container')?.getAttribute('data-url'); var thumbnailUrl = mediaElement.closest('.video-container') ? dataUrl.replace(/\.mp4$/, '_mp4_thumb.jpg') : null; var nonce = localStorage.getItem('ed_nonce') || ''; if (!nonce || !dataUrl) { console.error("Nonce value or data URL is missing."); return; } var deleteRequestUrl = "https://www.animalnara.com/editor/photo_uploader/popup/php/index.php?_nonce=" + encodeURIComponent(nonce) + "&act=photo_delete"; $.ajax({ url: deleteRequestUrl, type: 'POST', data: { photo_url: dataUrl, video_thumbnail_url: thumbnailUrl }, success: function (response) { alert("삭제가 완료되었습니다."); mediaElement.closest('.video-container')?.remove(); mediaElement.closest('.image-container')?.remove(); }, error: function () { alert("삭제 요청 중 오류가 발생했습니다."); } }); } // 이미지 크기 조정 function adjustImageSize(img, percentage) { img.style.width = (percentage) + '%'; } // 이미지 원래 크기 복원 function resetImageSize(img) { img.style.width = ''; } // 비디오 크기 조정 function adjustVideoSize(video, percentage) { video.style.width = (percentage) + '%'; } // 비디오 원래 크기 복원 function resetVideoSize(video) { video.style.width = ''; } // 비디오 드래그 기능 추가 $(document).on('mousedown', 'video', function(e) { e.preventDefault(); // 기본 드래그 방지 var video = $(this); var startX = e.pageX - video.position().left; var startY = e.pageY - video.position().top; $(document).on('mousemove.drag', function(e) { // 에디터 컨테이너 내에서만 드래그 가능하도록 설정 var editorContainer = $('.editor-container'); var containerOffset = editorContainer.offset(); var containerWidth = editorContainer.width(); var containerHeight = editorContainer.height(); var newLeft = e.pageX - startX; var newTop = e.pageY - startY; // 에디터 컨테이너의 경계를 넘지 않도록 설정 if (newLeft containerOffset.left + containerWidth) { newLeft = containerOffset.left + containerWidth - video.width(); } if (newTop containerOffset.top + containerHeight) { newTop = containerOffset.top + containerHeight - video.height(); } video.css({ top: newTop, left: newLeft, position: 'absolute' }); }); $(document).one('mouseup', function() { $(document).off('mousemove.drag'); }); // 비디오 클릭 시 버튼 표시 $(document).on('click', 'video', function(event) { showMediaButtons(event, this); }); // 이미지 클릭 시 버튼 표시 $(document).on('click', 'img', function(event) { showMediaButtons(event, this); }); // 에디터 클릭 시 버튼 제거 $(document).on('click', '.editor-container', function() { document.querySelector('.delete-button')?.remove(); document.querySelector('.representative-button')?.remove(); document.querySelectorAll('img, video').forEach(el => el.classList.remove('highlight')); });
    0 0
    게시물을 뉴스에 인용할때에는 애니멀나라 출처를 꼭 밝혀주세요.
    저작권 게시물 및 규정에 어긋난 게시글의 경우 삭제가 될 수 있습니다.
    목록 신고
    댓글0 개

    이전글   I   123

    다음글   I   123

    게시판 상단 공지/이벤트 리스트
    번호 구분 제목 글쓴이 추천 조회 등록일
    BEST
    		질문 123 (28) 메르세데스마이바흐S 0 1,330 2024.06.02
    BEST
    		질문 321 (13) 메르세데스마이바흐S 1 1,354 2024.06.07
    BEST
    		질문 12 (16) 메르세데스마이바흐S 0 2,233 2024.06.07
    BEST
    		질문 ㅁ (18) 메르세데스마이바흐S 1 1,955 2024.06.07
    이벤트
    		이벤트 기아자동차, 동급 최대의 실내공간을 구현한 카니발 내장 공개 공개 공개공 개공개 공개공개공 0 1,098 2021.11.01
    게시판 리스트
    103 질문 123 (28) 메르세데스마이바흐S 0 1,330 2024.06.02
    102 질문 321 (13) 메르세데스마이바흐S 1 1,354 2024.06.07
    101 질문 12 (16) 메르세데스마이바흐S 0 2,233 2024.06.07
    100 질문 ㅁ (18) 메르세데스마이바흐S 1 1,955 2024.06.07
    99 질문 지금 이영현 체념 부르는데 정말 잘부르네요 강추 드립니다 온몸에 소름이 돋을정도로 (42) 메르세데스마이바흐S 0 1,332 2024.06.08
    98 잡담 123 (25) 메르세데스마이바흐S 0 744 2024.06.22
    97 잡담 323 (11) 메르세데스마이바흐S 0 682 2024.06.22
    96 잡담 678 (28) 메르세데스마이바흐S 0 698 2024.06.23
    95 잡담 12 (32) 메르세데스마이바흐S 0 712 2024.06.23
    94 잡담 123 (38) 레드케인 0 800 2024.06.26
    93 질문 123 (49) 메르세데스마이바흐S 54 1,030 2024.06.27
    92 잡담 123 (19) 메르세데스마이바흐S 1 720 2024.07.05
    91 질문 123 (26) 메르세데스마이바흐S 0 908 2024.07.14
    90 잡담 1 (14) 메르세데스마이바흐S 0 652 2024.07.17
    89 질문 78 (10) 메르세데스마이바흐S 41 731 2024.07.22
    88 잡담 1 (27) 레드케인 37 826 2024.07.23
    87 질문 1 (41) 메르세데스마이바흐S 1 785 2024.08.05
    86 잡담 1 (35) 레드케인 0 765 2024.08.06
    85 질문 13 (23) 메르세데스마이바흐S 0 689 2024.08.13
    84 질문 123 (28) 메르세데스마이바흐S 0 648 2024.08.14

    글쓰기

    1 2 3 4 5 6  다음