이미지 링크 주소 변경 코딩

안녕하세요 혹시 도움 좀 받을수있을까 싶어서 문의남깁니다.

제가 아래의 코드로 이미지를 클릭했을때 아래의 코딩으로 링크로 이동하게 만들어놨는데요.

 

<script>
'use strict';

function imagesLinks() {

var filteredImages = document.querySelectorAll('.e-gallery-item');

//Edit the links HERE
var links = [
'첫번째 이미지 링크주소 입력',
'두번째 이미지 링크주소 입력',
''
];

var _loope = function _loope(i) {
filteredImages[i].addEventListener('click', function () {
location = links[i];
});
}

for (var i = 0; i < filteredImages.length; i++) {
_loope(i);
}
}

imagesLinks();

</script>


수정하고 싶은 부분은 

 

//Edit the links HERE
var links = [
'첫번째 이미지 링크주소 입력',
'두번째 이미지 링크주소 입력',
''
];

 

여기서 이미지를 추가할때마다 링크를 입력해줘야하는데 이렇게 하지않고

이미지를 추가하는 에디터에서 이미지 설명란에 링크주소를 저장해둔다음에 이미지가 추가될때마다 추가된 이미지에 저장되어 있는 링크 주소를 불러와서 이동하게끔 코딩을 변경하기를 원하는데 이부분의 코딩 수정에 대해서 도움 좀 받을 수 있을까요?? 

 

//Edit the links HERE
var links = [
'첫번째 이미지 링크주소 입력',
'두번째 이미지 링크주소 입력',
''
];

 

위에 코딩에 링크 주소를 입력하지 않고 이미지 설명란에 저장된 링크를 불러드리게 어떻게 코딩을 짤 수 있을까요? ㅜ 알려주시면 정말 감사하겠습니다!

 

https://imgur.com/a/LLjbK14

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

    어느 부분에서 어떻게 사용되는지 내용이 없어

    정확히 알기 어렵습니다.

     

    라이브러리에 입력된 이미지들 역시

    DB 상에는 post로 저장됩니다.

     

    따라서 get_post로 일반 post와 똑같이

    정보를 가져오실 수 있습니다.

     

    아래의 예제 코드를 참고하여

    적용해보시겠어요?

    $attachment = get_post($attachment_id); // 이미지 id를 입력해주세요.
    $description = $attachment->post_content; // 설명란 필드 정보

    고맙습니다.

  • 아 설명을 빠트렸네요.

     다른게 아니라 단순한 이미지 갤러리 페이지입니다.

    갤러리에 추가된 이미지를 클릭할때마다 설명에 저장되어있는 링크로 이동하게 하고 싶은데 코딩이 힘들어서 문의드립니다.

     

    //Edit the links HERE
    var links = [
    '첫번째 이미지 링크주소 입력',
    '두번째 이미지 링크주소 입력',
    ''
    ];

     

    지금은 위에 코드처럼 이미지 갤러리에 이미지를 추가할때마다 이미지 순서대로 링크주소를  일일히 추가해줘야하는데요.

    이렇게 하지않고 이미지 설명란에 링크를 삽입해서 이미지가 순서대로 추가될때마다 순서대로 이미지를 클릭했을때 설명란에 있는 링크를 불러와서 링크이동하게 하고 싶어서요.

    코딩으로 이렇게가 가능할까요?

     

    var _loope = function _loope(i) {
    filteredImages[i].addEventListener('click', function () {
    location = links[i];
    });
    }

     

    혹시 위에 코드에서 클릭했을때 갤러리에 있는 순서대로 클릭했을때 설명란을 불러오는 코드를 어떻게 짤 수 있을까요..?

  • 단순 스크립트만으로는 어렵습니다.

     

    이미지 태그 title이나 data-set 등에 정보가 들어 있으면

    스크립트로 가능합니다.

     

    원하시는대로 하시려면 안내드린 코드처럼

    설명란 필드 정보를 가져오셔야 합니다.

    $attachment = get_post($attachment_id); // 이미지 id를 입력해주세요.
    $description = $attachment->post_content; // 설명란 필드 정보

     

    사용하시는 플러그인의 필터나 액션 등을 사용하여 가져오시거나

    ajax 등을 사용하여 임의로 가져오는 방법도 있을 듯 합니다.

     

    코드를 작성하기 어려우시다면

    프로젝트 의뢰에 자세한 내용을 남겨보시겠어요?

    https://www.cosmosfarm.com/project

    고맙습니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기