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

    메르세데스마이바흐S [가입일 : 2016-11-18]
    추천 0 | 조회 801
    작성일 2024.09.25 (23:19:45)
    IP :
    		URL복사     https://www.animalnara.com/community/board_view.php?board_code=best&idx=5264&view_mode=thumbnail               
    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

    게시판 상단 공지/이벤트 리스트
    번호 구분 제목 글쓴이 추천 조회 등록일
    이벤트
    		이벤트 안녕하세요 이벤트를 진행합니다, 강아지샘플사료를 무료로 드립니다. 많은참여 부탁드립니다. 0 1,154 2021.11.01
    게시판 리스트
    이미지 오늘 점심은 고기국수를 먹었습니다~ 강부자 1 2,850 2018.05.30
    이미지 오늘 점심은 고기국수를 먹었습니다~ 강부자 1 2,850 2018.05.30
    이미지
    		잘 부탁드립니다! (1) 강부자 1 1,506 2018.05.30
    이미지 SRT타고 출장다녀왔습니다. (4) 메르세데스마이바흐S 0 2,039 2018.05.30
    이미지 좋은날씨에 집에만 박혀있는 건 인생의 낭비... (2) 메르세데스마이바흐S 3 2,991 2018.05.30
    이미지 좋은날씨에 집에만 박혀있는 건 인생의 낭비... (2) 메르세데스마이바흐S 3 2,991 2018.05.30
    이미지 더운날에는 빙수한그릇 (1) 강부자 1 2,275 2018.05.31
    이미지 더운날에는 빙수한그릇 (1) 강부자 1 2,275 2018.05.31
    이미지 오랜만에 볼링한겜 치러왔습니다~ (3) harrymanpark 5 1,670 2018.05.31
    이미지
    		바람이 많이부는 날입니다~ 일교차가 크니 감기조심하세요!!! 미세먼지는 다행히 좋습니다!! harrymanpark 1 1,828 2018.05.31
    이미지 용인 만미정 장어집에 다녀왔습니다~ harrymanpark 3 2,403 2018.05.31
    이미지 용인 만미정 장어집에 다녀왔습니다~ harrymanpark 3 2,403 2018.05.31
    이미지 오늘 구입한 뷰잉이라는 제품입니다. (1) 강부자 2 1,686 2018.06.01
    이미지 공포의 만두집 (6) 강부자 0 3,967 2018.06.02
    이미지 공포의 만두집 (6) 강부자 0 3,967 2018.06.02
    이미지 공포의 만두집 (6) 강부자 0 3,967 2018.06.02
    이미지 공포의 만두집 (6) 강부자 0 3,967 2018.06.02
    이미지 서울로7017 다녀왔습니다! rwrw79 0 3,028 2018.06.04
    이미지 서울로7017 다녀왔습니다! rwrw79 0 3,028 2018.06.04
    이미지 서울로7017 다녀왔습니다! rwrw79 0 3,028 2018.06.04

    1 2 3 4 5 6 7 8 9 10  다음