Web/jQuery

[days02] 복습 - 갤러리

　다연　 2020. 12. 21. 21:25
반응형

사진이 1장씩 보인다.
사진이 2장씩 나온다 (높이는 동일하지X)
2번 버튼
사진이 4장씩 나온다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="k≡n¡k">
<meta name="Generator" content="eclipse">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2020. 12. 21 - 오후 5:02:10</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

 
.column {
  -ms-flex: 50%; /* IE 10 */
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

 
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>
 
<div class="header" id="myHeader">
  <h1>Image Grid</h1>
  <p>Click on the buttons to change the grid view.</p>
  <button class="btn" onclick="one()">1</button>
  <button class="btn active" onclick="two()">2</button>
  <button class="btn" onclick="four()">4</button>
</div>
 
<div class="row"> 
  <div class="column">
    <img src="../images/wedding.jpg" style="width:100%">
    <img src="../images/rocks.jpg" style="width:100%">
    <img src="../images/falls2.jpg" style="width:100%">
    <img src="../images/paris.jpg" style="width:100%">
    <img src="../images/nature.jpg" style="width:100%">
    <img src="../images/mist.jpg" style="width:100%">
    <img src="../images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="../images/underwater.jpg" style="width:100%">
    <img src="../images/ocean.jpg" style="width:100%">
    <img src="../images/wedding.jpg" style="width:100%">
    <img src="../images/mountainskies.jpg" style="width:100%">
    <img src="../images/rocks.jpg" style="width:100%">
    <img src="../images/underwater.jpg" style="width:100%">
  </div>  
  <div class="column">
    <img src="../images/wedding.jpg" style="width:100%">
    <img src="../images/rocks.jpg" style="width:100%">
    <img src="../images/falls2.jpg" style="width:100%">
    <img src="../images/paris.jpg" style="width:100%">
    <img src="../images/nature.jpg" style="width:100%">
    <img src="../images/mist.jpg" style="width:100%">
    <img src="../images/paris.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="../images/underwater.jpg" style="width:100%">
    <img src="../images/ocean.jpg" style="width:100%">
    <img src="../images/wedding.jpg" style="width:100%">
    <img src="../images/mountainskies.jpg" style="width:100%">
    <img src="../images/rocks.jpg" style="width:100%">
    <img src="../images/underwater.jpg" style="width:100%">
  </div>
</div>

<script>
 
var elements = document.getElementsByClassName("column");

 
var i;

 
function one() {
    for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "100%";  // IE10
    elements[i].style.flex = "100%";
  }
}

 
function two() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "50%";  // IE10
    elements[i].style.flex = "50%";
  }
}

 
function four() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.msFlex = "25%";  // IE10
    elements[i].style.flex = "25%";
  }
}

 
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>
</body>
</html>

 

 

 

 

버튼을 누르면 옆 페이지로 스르르 넘어간다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div.item:nth-child(1){ background: blueviolet;}
div.item:nth-child(2){ background: pink;}
div.item:nth-child(3){ background: burlywood;}
</style>

<script>
	$(function() {
		var width = $('[data-role="slider"]').attr('data-width');
		var height = $('[data-role="slider"]').attr('data-height');
		var count = $('[data-role="slider"] div.item').length;
		
		$('[data-role="slider"]')
			.css({
				position: "relative",
				overflow: "hidden",
				width: width,
				height: height
			})
			.find('.container')
			.css({
				position: "absolute",
				width: count*width,
				overflow: "hidden"
			})
			.find('.item')
			.css({
				width:width,
				height: height,
				float: "left"
			});
		
		var currentPage = 0;
		var changePage = function() {
			$('[data-role="slider"] > .container').animate({
				left: -currentPage*width
			}, 500);
		};
		
		$('#left-button').click(function() {
			if(currentPage>0){
				//왼으로 이동
				currentPage = currentPage-1;
				changePage();
			}
		});
		$('#right-button').click(function() {
			if(currentPage<count-1){
				//오른쪽으로 이동
				currentPage = currentPage+1;
				changePage();
			}
		});
		
		
		
	});
</script>
</head>
<body>
<div data-role="slider" data-width="500" data-height="300">
	<div class="container">
		<div class="item">
			<h1>Lorem ipsum dolor sit amet.</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div class="item">
			<h1>Lorem ipsum dolor sit amet.</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
		<div class="item">
			<h1>Lorem ipsum dolor sit amet.</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</div>
</div>
<button id="left-button">←</button>
<button id="right-button">→</button>
</body>
</html>

 

반응형
저작자표시 비영리 (새창열림)