Making simple website with Photoshop and Dreamweaver [part3]

Here I gonna make main slider with Galleia. There are free default theme. But I bought Minimal theme.
It fits my minimal site look.
(여기서는 갤러리아로 메인 슬라이더를 만든다. 무료 기본 테마가 있지만 미니멀 테마를 구입하여 세팅하였다)

1. Download galleria and extract it at the same folder where your html files are.
(갤러리아를 다운로드한다. 그리고 html 파일들이 있는 위치에 galleria 폴더를 압축해제한다)

2. You can buy minimal theme and place that in the theme folder in galleria folder.
Or you can use classic theme free or other theme. And that case, you should set it differently
(미니멀 테마를 구입하여 galleria 폴더에 넣는다. 혹은 클래식 테마나 다른 테마를 이용할 수 있는데,
그럴 경우 아래와 다르게 해당 테마에 맞는 세팅을 해야한다. 같은 테마여도 버전에 따라서도 아래와 다르게 된다)

3. Add this code after <head>. Please note that it is different which theme and version you choose.
(아래 코드를 <head> 다음에 넣는다. 다시 말하지만 테마와 버전에 따라 아래 세팅은 틀리다)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.4.min.js"></script>
 
<link rel="stylesheet" href="galleria/themes/miniml/galleria.miniml.css">
<script src="galleria/themes/miniml/galleria.miniml.min.js"></script>

4. Delete main image.
(메인 이미지를 삭제한다)

5. And replace something like this code. width: 930 and height: 372 is main image size that is just deleted.
(아래와 같은 코드로 삭제한 곳에 대체한다. 코드 중의 폭 930, 높이 372는 삭제한 이미지의 사이즈이며 곧 슬라이더의 사이즈이다)

<div id="gallery">          
  <img src="images/1.jpg"  alt="text when you click info icon"  title="image 1 caption text">
  <img src="images/2.jpg"  alt="text when you click info icon"  title="image 2 caption text">
  <img src="images/3.jpg"  alt="text when you click info icon"  title="image 3 caption text">
  <img src="images/4.jpg"  alt="text when you click info icon"  title="image 4 caption text">
  <img src="images/5.jpg"  alt="text when you click info icon"  title="image 5 caption text">       
</div>
 
<script>
    $("#gallery").galleria({
        width: 930,
        height: 372
    });
</script>

6. Make sure there is images folder and place 1.jpg, 2.jpg …
And image width is 930 for landscape, and 600 for portrait.
(이미지 폴더에는 위 코드에서 처럼 해당하는 jpg 이미지들이 있어야한다. 여기서는 1.jpg, 2.jpg … 이렇게)

7. Down below there is link for final file. But Galleria minimal theme is not free. So it is not included, and slider will not work without galleria asset.
More about Galleia.

(아래 버튼에 여기서 최종 세팅된 html 파일을 받을 수 있다. 하지만 미니멀 테마는 무료가 아니므로 포함되어 있지 않고 작동도 되지 않는다. 갤러리아에서 소스를 받아서 적용하길 바란다)

completed html file

Making simple website with Photoshop and Dreamweaver [part3]