메인에 이미지슬라이드넣고싶은데요
본문
안녕하세요. 메인에 이미지 슬라이드 넣고 싶은데요.
어떤소스를 활용하면 될까요? 암것도 모르니 답답하네요.
쉽게 참고할수있는곳 있으면 알려주세요.
답변 3
메인이면 접속해서 처음 보이는 화면에 즉 index.php에 넣으시는 것이라고 생각이 되는데요.
슬라이드를 넣는 방법은 많습니다.
bx-slider를 사용해도 되고 아니면 소스를 index.php에 직접 붙여넣기 해도 됩니다.
w3schools.com에도 슬라이드쇼 넣는 방법이 나오는데요.
W3Schools How TO - Code snippets for HTML, CSS and JavaScript
이방법이 더 쉬울 것 같습니다.
index.php에 코드를 붙여넣기하고 이미지 경로만 조절하면 됩니다.
詩人 李恩京 (gratia.kr) 이 사이트에서 적용해보았는데요
굵은 글씨의 코드를 붙여넣기 하면 잘 될겁니다.
<?php
include_once('./_common.php');
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(defined('G5_THEME_PATH')) {
require_once(G5_THEME_PATH.'/index.php');
return;
}
if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_PATH.'/head.php');
?>
<!-- 슬라이더 넣기 CSS, 출처: https://www.w3schools.com/howto/howto_js_slideshow.asp -->
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="zz/images/slider/img_lights_wide.jpg" style="width:100%">
<div class="text">내가 시를 만든 것이 아니다. 시가 나를 만든 것이다.
-괴테</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="zz/images/slider/img_mountains_wide.jpg" style="width:100%">
<div class="text"> 시는 번갯불의 섬광이어서, 어휘들의 배열로만 끝날 때는 단순한 작문에 불과하다.
-칼릴 지브란</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="zz/images/slider/img_nature_wide.jpg" style="width:100%">
<div class="text">시는 불가해한 것에의 탐구이다.
-스티븐스</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="zz/images/slider/img_snow_wide.jpg" style="width:100%">
<div class="text">시란 쓰지 않고는 못 배길 때 쓰는 것이다.
-유치환</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<!-- 슬라이더 넣기 자바스크립트 -->
<!-- 자동변환 슬라이더 -->
<!--
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
-->
<!-- 수동변환 슬라이더 -->
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<!-- 이미지 슬라이더 끝 -->
<h2 class="sound_only">최신글</h2>
<div class="latest_top_wr">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('pic_list', 'free', 1, 23); // 최소설치시 자동생성되는 자유게시판 4,23
echo latest('pic_list', 'qa', 1, 23); // 최소설치시 자동생성되는 질문답변게시판 4, 23
echo latest('pic_list', 'notice', 1, 23); // 최소설치시 자동생성되는 공지사항게시판 4, 23
?>
</div>
<div class="latest_wr">
<!-- 사진 최신글2 { -->
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('pic_block', 'gallery', 4, 23); // 최소설치시 자동생성되는 갤러리게시판
?>
<!-- } 사진 최신글2 끝 -->
</div>
<div class="latest_wr">
<!-- 최신글 시작 { -->
<?php
// 최신글
$sql = " select bo_table
from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id)
where a.bo_device <> 'mobile' ";
if(!$is_admin)
$sql .= " and a.bo_use_cert = '' ";
$sql .= " and a.bo_table not in ('notice', 'gallery') "; //공지사항과 갤러리 게시판은 제외
$sql .= " order by b.gr_order, a.bo_order ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$lt_style = '';
if ($i%3 !== 0 ) $lt_style = "margin-left:2%";
?>
<div style="float:left;<?php echo $lt_style ?>" class="lt_wr">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('basic', $row['bo_table'], 3, 24);//원래 6, 24
?>
</div>
<?php
}
?>
<!-- } 최신글 끝 -->
</div>
<?php
include_once(G5_PATH.'/tail.php');
적용해 봣는데.. 어렵네요
하루이틀 연구해봐야 겠어요~~~
