Jqeury 를 이용한 이미지 스토리 갤러리 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 이미지관련 > Jqeury 를 이용한 이미지 스토리 갤러리 상세정보

클라우드태그

Javascript

PHP

asp

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

Jqeury 를 이용한 이미지 스토리 갤러리

해피팀

네티즌

소스분류

이미지관련

다운로드 횟수

73 회

간단설명

이미를 클릭하면 전체화면으로 이미지를 스토리 갤러리 형태로 보여줍니다.

평가하기

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 파일을 브라우저로 호출하시면 보다 깔끔한 상태의 데모를 확인할 수 있습니다. ^^