[javascript] PhotoSwipe와 연동하여 이미지 광고 배너 삽입하기

22 Nov 2023

javascript

이미지 광고 배너는 웹 사이트나 앱에서 많이 사용되는 마케팅 도구입니다. 이번에는 PhotoSwipe 라이브러리를 사용하여 이미지 광고 배너를 삽입하는 방법에 대해 알아보겠습니다.

PhotoSwipe란?

PhotoSwipe는 웹 사이트나 앱에서 이미지 갤러리를 구현할 수 있는 자바스크립트 라이브러리입니다. 사용자가 이미지를 확대, 축소하거나 스와이프하여 탐색할 수 있는 기능을 제공합니다. PhotoSwipe는 모바일 및 데스크탑에서 동작하며 쉽게 사용할 수 있습니다.

PhotoSwipe 설치하기

PhotoSwipe를 사용하기 위해 먼저 해당 라이브러리를 웹 페이지에 설치해야 합니다. 다음은 설치하는 방법입니다.

PhotoSwipe의 공식 웹 사이트에서 최신 버전을 다운로드합니다.
다운로드한 파일을 웹 페이지의 디렉토리에 압축을 해제합니다.
HTML 파일에서 다음과 같이 <script> 태그를 사용하여 PhotoSwipe의 JavaScript 파일을 로드합니다.

<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

또한 CSS 파일도 로드해야 합니다. 다음 코드를 <head> 태그 내에 추가합니다.

<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">

이미지 광고 배너 삽입하기

이제 PhotoSwipe를 사용하여 이미지 광고 배너를 삽입해보겠습니다.

광고 배너 이미지 파일을 웹 페이지의 디렉토리에 업로드합니다.
PhotoSwipe의 HTML 마크업을 작성합니다. 다음 코드를 참고하세요.

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="path/to/image1.jpg" itemprop="contentUrl" data-size="1200x800">
      <img src="path/to/thumbnail1.jpg" itemprop="thumbnail" alt="이미지 설명">
    </a>
  </figure>
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="path/to/image2.jpg" itemprop="contentUrl" data-size="1200x800">
      <img src="path/to/thumbnail2.jpg" itemprop="thumbnail" alt="이미지 설명">
    </a>
  </figure>
  <!-- 이하 이미지 태그 추가 -->
</div>

이제 PhotoSwipe를 초기화해야 합니다. 다음은 초기화하는 JavaScript 코드입니다.

var gallery = new PhotoSwipe('.my-gallery', PhotoSwipeUI_Default);
gallery.init();

웹 페이지에서 위의 코드들을 올바로 포함시켰다면 이미지 광고 배너가 동작하는 것을 확인할 수 있습니다.

결론

이렇게 PhotoSwipe와 연동하여 이미지 광고 배너를 삽입하는 방법을 알아보았습니다. PhotoSwipe를 사용하면 사용자에게 보다 편리하고 직관적인 이미지 갤러리를 제공할 수 있습니다. 따라서 마케팅에 효과적인 이미지 광고 배너를 만들기 위해 PhotoSwipe를 사용해보세요.

더 자세한 내용은 PhotoSwipe 공식 문서에서 확인할 수 있습니다.