웹솔루션개발 22년 노하우! 해피CGI의 모든것

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

웹프로그램밍 자료실/JAVA 자료

[해피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로 이메일을 보내시기 바랍니다.

 

 

 

홈페이지바로가기

저작자표시

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] Text Highlight Animation Plugin  (0) 2020.10.23
[해피CGI][cgimall] jQuery Plugin To Duplicate & Resort Table Rows - Dynamicrows  (0) 2020.10.22
[해피CGI][cgimall] revealjs - 웹에서 프리젠테이션 제작  (0) 2020.10.15
[해피CGI][cgimall] Intro.js Ver2.9.3  (0) 2020.10.14
[해피CGI][cgimall] 웹브라우저에서 hwp 를 바로 읽을수 있는게 해주는 hwp.js  (0) 2020.10.07
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments