WEB/Java BackEnd

[WEB] jQuery #3 / fotorama 이미지 슬라이드 image slide

Happyoon ~ 2021. 12. 1. 00:46
728x90
반응형

1. fotorama, jquery 로딩

<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

jquery.mon.js가 fotorama.js보다 앞에 와야 한다.

 

 

2. class를 fotorama로 지정하고 다양한 기능 사용

https://fotorama.io/

 

Fotorama — Simple and Powerful Responsive jQuery Image Gallery

A simple yet powerful responsive jQuery image gallery. Set up Just copy and paste the snippets below to integrate Fotorama. 1. This goes to the of your page: 2. Then, wherever you want the gallery in your page : Example: Basic 3. Enjoy! Fotorama’s CDN is

fotorama.io

예제

Step04_fotorama.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step04_fotorama.jsp</title>
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<style>
   .content{
      width: 800px;
      height: 500px;
      background-color: yellow;
   }
   .content img{
      width: 100px;
   }
</style>
</head>
<body>
   <div class="fotorama"
      data-width="500"
      data-height="300"
      data-allowfullscreen="true"
      data-nav="thumbs"
      data-autoplay="true">
      <img src="images/image1.png" data-caption="하나"/>
      <img src="images/image2.png" data-caption="두울"/>
      <img src="images/image3.png" data-caption="세엣"/>
      <img src="images/image4.png" data-caption="네엣"/>
      <img src="images/image5.png" data-caption="다섯"/>
   </div>
   
   <div class="fotorama">
      <div class="content">
         <h3>첫번째 컨텐츠</h3>
         <img src="images/1.jpg" alt="" />
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque hic voluptate magni doloremque consectetur magnam fuga possimus aspernatur quam dolorum nostrum sequi facilis vitae ducimus natus nobis provident praesentium! Aspernatur.</p>
      </div>
      <div class="content">
         <h3>두번째 컨텐츠</h3>
         <img src="images/2.jpg" alt="" />
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque hic voluptate magni doloremque consectetur magnam fuga possimus aspernatur quam dolorum nostrum sequi facilis vitae ducimus natus nobis provident praesentium! Aspernatur.</p>
      </div>
      <div class="content">
         <h3>세번째 컨텐츠</h3>
         <img src="images/3.jpg" alt="" />
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque hic voluptate magni doloremque consectetur magnam fuga possimus aspernatur quam dolorum nostrum sequi facilis vitae ducimus natus nobis provident praesentium! Aspernatur.</p>
      </div>
   </div>
</body>
</html>

그림에 마우스 

 

글에 마우스

 

 

 

반응형