change welcome banner; edit selected publications;

author/chanyoung-kim/index.html

@@ -152,14 +152,21 @@ <h3><span></span></h3>
                   </li>
                 </ul>
               </div>
-              <div class="col-md-6"></div> <!--필요시 추가 작성-->
+              <div class="col-md-6"> <!--필요시 추가 작성-->
               <div class="section-subheading">Selected Publications</div>
-              <ul class="ul-interests mb-0">
-                <li>Advancing Text-Driven Chest X-Ray Generation with Policy-Based Reinforcement
-                  Learning, MICCAI 2024</li>
-                <li>EAGLE: Eigen Aggregation Learning for Object-Centric Unsupervised Semantic
-                  Segmentation, CVPR 2024 Highlght</li>
-              </ul>
+                <ul class="ul-interests mb-0">
+                  <li>
+                    <a href="/publication/2024-miccai-cxrl" target="_blank">
+                      Advancing Text-Driven Chest X-Ray Generation with Policy-Based Reinforcement Learning, MICCAI 2024
+                    </a>
+                  </li>
+                  <li>
+                    <a href="/publication/2024-cvpr-eagle" target="_blank">
+                      EAGLE: Eigen Aggregation Learning for Object-Centric Unsupervised Semantic Segmentation, CVPR 2024 Highlight
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
             <div class="col-md-6"></div>
             <div class="col-md-6"></div>

css/style.css

@@ -65,8 +65,3 @@
   height: auto;
 } */
 
-
-.next-btn {
-    margin-top: 3rem !important;
-    margin-left: 5rem !important;
-}

css/wowchemy.css

@@ -10022,3 +10022,108 @@ body {
 body.show {
     opacity: 1;
 }
+
+/*************************************************
+*  style.css
+**************************************************/
+
+/*post button*/
+.next-btn {
+  margin-top: 3rem !important;
+  margin-left: 5rem !important;
+}
+
+/*main hero image slider*/
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  width: 10%;
+}
+
+.carousel-control-prev {
+  left: 0;
+}
+
+.carousel-control-next {
+  right: 0;
+}
+
+/* Modify these styles in your style.css */
+/* Modify these styles in your style.css */
+/* 기본 스타일 */
+/* 기본 스타일 */
+.carousel-inner {
+  position: relative;
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 20px; /* 기본 위치 */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  margin: 0; /* Ensure no margin */
+  list-style: none;
+  z-index: 15; /* Ensure indicators are above the image */
+}
+
+.carousel-indicators li {
+  box-sizing: content-box;
+  flex: 0 1 auto;
+  width: 0.8rem; /* 기본 크기 */
+  height: 0.8rem; /* 기본 크기 */
+  margin: 0 0.25rem;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better visibility */
+  background-clip: padding-box;
+  border: 1px solid #fff; /* White border for better contrast */
+  opacity: .7;
+  transition: opacity .6s ease;
+}
+
+.carousel-indicators .active {
+  opacity: 1;
+  background-color: #fff; /* Fully opaque background for the active indicator */
+}
+
+/* 반응형 미디어 쿼리 */
+@media (max-width: 1200px) {
+  .carousel-indicators {
+    bottom: 15px; /* Adjust as needed for smaller screens */
+  }
+
+  .carousel-indicators li {
+    width: 0.6rem; /* Ensure width and height are equal */
+    height: 0.6rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-indicators {
+    bottom: 10px; /* Adjust as needed for smaller screens */
+  }
+
+  .carousel-indicators li {
+    width: 0.4rem; /* Ensure width and height are equal */
+    height: 0.4rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .carousel-indicators {
+    bottom: 5px; /* Adjust as needed for smaller screens */
+  }
+
+  .carousel-indicators li {
+    width: 0.2rem; /* Ensure width and height are equal */
+    height: 0.2rem;
+  }
+}

index.html

@@ -111,6 +111,7 @@ <h1>Search</h1>
     </header>
   </div>
   <div class="page-body"><span class="js-widget-page d-none"></span>
+    <!-- 수정된 섹션 -->
     <section id="section-hero" class="home-section wg-hero ">
       <div class="home-section-bg "></div>
       <div class="container">
@@ -121,10 +122,23 @@ <h1 class="hero-title">MICV</h1>
               <p>Medical Imaging and Computer Vision</p>
             </div>
           </div>
-          <div class="col-12 mx-auto col-md-6 hero-media"><img
-                 src="/media/welcome_hu67c71d53944a7e77717797504bf75103_13396313_400x0_resize_lanczos_3.png"
-                 srcset="/media/welcome_hu67c71d53944a7e77717797504bf75103_13396313_1200x0_resize_lanczos_3.png 1200w,/media/welcome_hu67c71d53944a7e77717797504bf75103_13396313_800x0_resize_lanczos_3.png 800w,/media/welcome_hu67c71d53944a7e77717797504bf75103_13396313_400x0_resize_lanczos_3.png 400w"
-                 width="3872" height="2176" alt=""></div>
+          <div class="col-12 mx-auto col-md-6 hero-media">
+            <div id="heroCarousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
+              <div class="carousel-inner" id="carousel-images">
+                <a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
+                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                  <span class="sr-only">Previous</span>
+                </a>
+                <a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
+                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                  <span class="sr-only">Next</span>
+                </a>
+              </div>
+              <li class="carousel-indicators" id="carousel-indicators">
+                <!-- 목차 인디케이터가 여기에 동적으로 추가됩니다 -->
+              </li>
+            </div>
+          </div>
         </div>
       </div>
     </section>

js/scripts.js

@@ -1,4 +1,78 @@
 // 페이지가 로드되면 show 클래스를 body 요소에 추가
-window.addEventListener('load', function() {
-    document.body.classList.add('show');
-});
+window.addEventListener("load", function () {
+	document.body.classList.add("show");
+});
+
+// welcome image slider
+document.addEventListener("DOMContentLoaded", function () {
+	var imageFolder = "media/welcome/";
+	var imageExtensions = ["jpg", "jpeg", "png", "gif"];
+	var targetWidth = 1600; // 기본 목표 너비
+	var targetHeight = 1200; // 기본 목표 높이
+
+	// 이미지 파일 목록을 가져와서 캐러셀에 추가
+	var images = [];
+	var carouselInner = document.getElementById("carousel-images");
+	var carouselIndicators = document.getElementById("carousel-indicators");
+
+	function loadImages() {
+		var imagePaths = [];
+
+		imageExtensions.forEach(function (extension) {
+			for (var i = 1; i <= 10; i++) {
+				// 1~10번 이미지 파일을 시도
+				var imagePath = imageFolder + "welcome" + i + "." + extension;
+				imagePaths.push(imagePath);
+			}
+		});
+
+		// 이미지 경로 정렬
+		imagePaths.sort();
+
+		imagePaths.forEach(function (imagePath, index) {
+			var img = new Image();
+			img.src = imagePath;
+			img.onload = function () {
+				var resizedImage = resizeImage(this, targetWidth, targetHeight);
+				images.push(resizedImage);
+				var activeClass = images.length === 1 ? "active" : "";
+				var carouselItem = `
+          <div class="carousel-item ${activeClass}">
+            <img src="${resizedImage}" class="d-block w-100" alt="" style="object-fit: cover;">
+          </div>
+        `;
+				var indicatorItem = `<li data-target="#heroCarousel" data-slide-to="${images.length - 1}" class="${activeClass}"></li>`;
+				carouselInner.innerHTML += carouselItem;
+				carouselIndicators.innerHTML += indicatorItem;
+			};
+			img.onerror = function () {
+				// 이미지가 존재하지 않으면 무시
+			};
+		});
+
+		// 이미지가 1개인 경우 캐러셀 비활성화
+		setTimeout(function () {
+			if (images.length <= 1) {
+				document.querySelector(".carousel-control-prev").style.display = "none";
+				document.querySelector(".carousel-control-next").style.display = "none";
+				$("#heroCarousel").carousel("pause");
+			} else {
+				// 슬라이딩 속도 조절 (슬라이드 속도는 1초)
+				$("#heroCarousel").on("slide.bs.carousel", function () {
+					$(".carousel-item").css("transition", "transform 1.0s ease");
+				});
+			}
+		}, 500); // 이미지 로드 후 0.5초 대기
+	}
+
+	function resizeImage(img, width, height) {
+		var canvas = document.createElement("canvas");
+		canvas.width = width;
+		canvas.height = height;
+		var ctx = canvas.getContext("2d");
+		ctx.drawImage(img, 0, 0, width, height);
+		return canvas.toDataURL("image/jpeg");
+	}
+
+	loadImages();
+});