[PHP갤러리 프로젝트#01] 마우스 위치에 따라 달라지는 화면

첫 게시글...! 잘은 못해도 꾸준하게 공부하는 것이 목표다!!! 화잍이팅!

미니 프로젝트를 진행하면서 js도 같이 공부하기..!

 

우선 마우스의 위치가 어디를 가리키고 있느냐에 따라서 화면에 있는 사진이 바뀌도록 만들었다. (사진은 임시로...)

또한 마우스가 어디를 가리키고 있는지 눈에 띄게 효과를 주었다.

 

 

---

1. 왼쪽에 있는 사진

 

1) PHP 코드

  <div id="thumbnail-div">
    <ul id="thumbnail_list">
      <li>
        <image id="img1" class="img" src="./image/<?= $thumbnail1?$thumbnail1:"test1" ?>.jpg"></image>
      </li>
      <li>
        <image id="img2" class="img" src="./image/<?= $thumbnail2?$thumbnail2:"test1" ?>.jpg"></image>
      </li>
      <li>
        <image id="img3" class="img" src="./image/<?= $thumbnail3?$thumbnail3:"test1" ?>.jpg"></image>
      </li>
    </ul>
  </div>

 

 

2) CSS 코드

#thumbnail-div {
  width: 800px;
  height: 500px;
  overflow: hidden;
  margin-right: 100px;
  padding: 20px 0px 80px 0px;
}

#thumbnail_list{
  display: flex;
  flex-direction: row;
}

.img {
  width: 800px;
  height: 500px;
  border-radius: 20px;
}

li {
  list-style: none;
}

이미지를 너비 800px, 높이 500px로 설정했다. 이의 부모 div인 thumbnail-div도 같은 너비와 높이로 설정!

그리고 thumbnail_list의 display를 flex, flex-direction을 row로 주어서 이미지가 가로로 이어지도록 설정했다.

길게 이어지더라도 overflow: hidden으로 주어서 800X500 을 넘어가는 이미지들은 보이지 않게 설정했다.

 

 

3) JS 코드

/* 선택한 갤러리에 해당하는 사진을 보여주기 위해 추가한 코드 */

const thumbnail1 = document.getElementById("img1");
const thumbnail2 = document.getElementById("img2");
const thumbnail3 = document.getElementById("img3");

var name_1 = "<?php echo $thumbnail1;?>";
var name_2 = "<?php echo $thumbnail2;?>";
var name_3 = "<?php echo $thumbnail3;?>";

thumbnail1.src = "./image/" + name_1 + ".jpg";
thumbnail2.src = "./image/" + name_2 + ".jpg";
thumbnail3.src = "./image/" + name_3 + ".jpg";

 

 

2. 오른쪽에 있는 갤러리 리스트

 

1) PHP 코드

<div id="popular_gallery_list_div"> 
    <?php
    $conn = mysqli_connect('', '', '', '');
    $sql = "SELECT * FROM users ORDER BY click_count DESC limit 3;";
    $result = mysqli_query($conn, $sql);

    $count = 0;
    ?>
    <h2>인기 갤러리</h2>
    <table class="popular_gallery_list-table">
      <?php
      while ($row = mysqli_fetch_array($result)) {
        if ($count == 0) { ?>
          <tr class="brd">
            <td class="popular_gallery_list" id="p_gallery_list-td1">
              <image class="p_galllery_list_icon" src="./image/crown.png" height=30 width=30></image>
              <a id="popular_gallery_list_1"href ='read.php?num=<?=$row['num']?>'><?=$row['gallery_name']?></a>
            </td>
          </tr>
          <?php
          $thumbnail1 = $row['thumbnail'];
        } elseif ($count == 1) { ?>
          <tr class="brd">
            <td class="popular_gallery_list" id="p_gallery_list-td2">
              <image class="p_galllery_list_icon" src="./image/crown.png" height=30 width=30></image>
              <a id="popular_gallery_list_2" href ='read.php?num=<?=$row['num']?>'><?=$row['gallery_name']?></a>
            </td>
          </tr>
          <?php
          $thumbnail2 = $row['thumbnail'];
        } elseif ($count == 2) { ?>
        <tr class="brd">
          <td class="popular_gallery_list" id="p_gallery_list-td3">
            <image class="p_galllery_list_icon" src="./image/crown.png" height=30 width=30></image>
            <a id="popular_gallery_list_3" href ='read.php?num=<?=$row['num']?>'><?=$row['gallery_name']?></a>
          </td>
        </tr>
          <?php
          $thumbnail3 = $row['thumbnail'];
        } ?>
      <?php
        $count ++;
      } 
      mysqli_close($conn);
      ?>
    </table>
</div>

 

2) JS 코드

/* 어떤 갤러리를 선택했는지에 따라 동작이 달라지는 코드*/

const thumbnail_list = document.getElementById("thumbnail_list");

const p_gallery_list_td1 = document.getElementById("p_gallery_list-td1");
const p_gallery_list_td2 = document.getElementById("p_gallery_list-td2");
const p_gallery_list_td3 = document.getElementById("p_gallery_list-td3");

const p_gallery_list_1 = document.getElementById("popular_gallery_list_1");
const p_gallery_list_2 = document.getElementById("popular_gallery_list_2");
const p_gallery_list_3 = document.getElementById("popular_gallery_list_3");

var p_gallery_list_td = [p_gallery_list_td1, p_gallery_list_td2, p_gallery_list_td3];
var p_gallery_list = [p_gallery_list_1, p_gallery_list_2, p_gallery_list_3];

//첫 번째 갤러리를 선택했을 때
p_gallery_list_td1.onmouseover = function() {
  mouse_over(0, p_gallery_list[0], p_gallery_list_td[0]);
}
p_gallery_list_td1.onmouseout = function() {
  mouse_out(p_gallery_list[0], p_gallery_list_td[0]);
}

//두 번째 갤러리를 선택했을 때
p_gallery_list_td2.onmouseover = function() {
  mouse_over(1, p_gallery_list[1], p_gallery_list_td[1]);
}
p_gallery_list_td2.onmouseout = function() {
  mouse_out(p_gallery_list[1], p_gallery_list_td[1]);
}

//세 번째 갤러리를 선택했을 때
p_gallery_list_td3.onmouseover = function() {
  mouse_over(2, p_gallery_list[2], p_gallery_list_td[2]);
}
p_gallery_list_td3.onmouseout = function() {
  mouse_out(p_gallery_list[2], p_gallery_list_td[2]);
}


function mouse_out(list, td_list){ //마우스를 뗐을 때
  list.style.color = "#848484";
  list.style.fontWeight = "normal"
  td_list.style.backgroundColor = "White"
}

function mouse_over(num, list, td_list){ //마우스를 올렸을 때
  thumbnail_list.style.transform = "translateX(" + (-800 * num) + "px)";
  list.style.color = "#FFBF00";
  list.style.fontWeight = "Bold"
  td_list.style.backgroundColor = "#F7F8E0"
}

첫 번쨰 갤러리를 선택했을 때는 translateX를 0px로 주어서 사진이 원상태로 있게 했고

두 번째 갤러리를 선택했을 때는 translateX를 -800px로 주어서 사진이 왼쪽으로 800px 이동하게 했다.

세 번째 갤러리를 선택했을 때는 translateX를 -1600px로 주어서 사진이 왼쪽으로 1600px 이동하게 했다.

※ 사진 하나당 크기가 800px이기 때문에 왼쪽으로 800px 이동하게 한 것이다.

 

마우스를 올렸을 때와 뗐을 때 내용이 반복되기 때문에 함수로 정리했다. 끝!

 

 

 

 

이거는 js에서 css를 변경할 때! 그냥 js와 jquery의 차이~~!!!

//그냥 js일 때
thumbnail_list.style.transform = "translateX(" + (-800 * num) + "px)";

//jquery 이용할 떄
$("#thumbnail_list").css('transform', "translateX("+ (-800 * num) + "px)");