[해피CGI][cgimall] Jqeury 를 이용한 이미지 스토리 갤러리

해피CGI윤실장 2020. 10. 21. 09:47

SSG(Show Story Gallery)는 jQuery 와 CSS3로 만들었습니다.

여러개의 이미지를 갤러리 형태로 보여주고 클릭하면 스토리 갤러리 형태로 보여주는 플로그인 입니다.

사용법 안내 입니다.

1.CSS 와 jQuery 를 호출합니다.

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/story-show-gallery@2/dist/ssg.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
</head>

2. 플로그인을 호출 합니다.

<script src=""></scripthttps://cdn.jsdelivr.net/npm/story-show-gallery@2/dist/ssg.min.js>

3. 컨텐츠를 작성 합니다.

<div class='ssg fs'>
    <a href='BigImage1.jpg'> <img alt='This text will appear under picture as a caption' src='thumbnail.jpg'> </a>
    <a href='BigImage2.jpg' data-author='photo by Misty'> Also image caption </a>
    <a href='BigImage3.jpg'></a> <!-- an empty link, no caption -->

    <a href='BigImage4.jpg' class='nossg'> don't include me into SSG </a>
</div>

컨텐츠 내용 중 BigImage1.jpg 와 같은 이미지 파일명을 원하시는 이미지 파일로 교체하시면 됩니다.

첨부된 압축 파일을 해제하시면 index.html 파일이 존재하며 index.html 파일을 브라우저로 호출하시면 보다 깔끔한 상태의 데모를 확인할 수 있습니다. ^^

라이센스는 GNU GPL-3.0 license 입니다.

몇가지 예외 상황이 있습니다.
1. Wordpress 플로그인 또는 테마에 배포는 불가 합니다.
2. 상업용으로 사용하길 원하시는 경우 상업용 라이센스를 flor@flor.cz로 이메일을 보내시기 바랍니다.

저작자표시 (새창열림)