Lightbox 대용 이미지갤러리 [Lytebox v3.22]
- ② 포스팅에 사용하기

포스팅에 Lytebox 적용하는 방법도 복잡하지는 않지만
wysiwyg에서는 되지 않으니 복잡하다고 느끼실 수 있습니다.
모드를 자주 변경해서 글을 쓰실 경우 마지막에 노트패드에 html 내용을
붙여서 한번에 수정하시는 게 가장 편하실 겁니다.
사실 Lytebox 자체가 티스토리에 그렇게 적합한 것 같지는 않습니다.
html 모드에서 적용하셔야 오류없이 작동됩니다.





A. 이미지를 하나만 넣을 때.



적용 방법)


1. 이미지 파일을 업로드 하시고 삽입하시면 보통 이러한 소스가 생성됩니다.

<img src="[##_ATTACH_PATH_##]/이미지0" width="100" height="100">


2. 이미지를 썸네일로 이용해서 띄우시려면 작게 조절하시고, 테두리 선을 0으로 설정합니다.

<img src="[##_ATTACH_PATH_##]/이미지0" width="50" height="50" border="0" >

+ wysisyg모드에서 이미지 사이즈를 적당히 조절해 보시고 html모드로 넘어가세요.


3. 이미지 주소대로 링크를 만들어 주시고. rel과 title을 포함합니다. rel은 필수사항입니다.

<a href=" [ ## _ ATTACH_PATH _ ## ]/이미지0" rel="lytebox" title="single image" >


4. 먼저 만든 이미지 소스와 링크 소스를 '<a href=띄울 이미지><img src=링크할이미지> <a/>' 로 넣어주세요.

<a href=" [ ## _ ATTACH_PATH _ ## ]/이미지0 " rel="lytebox" title="single image">
<img src= [ ## _ ATTACH_PATH _ ## ]/이미지0 " width="50" height="50" border="0">
</a>


- 링크를 띄울 이미지가 아닌 텍스트나 다른 이미지로 대체하시려면 다음처럼 넣어주세요.

텍스트 링크 
<a href=" [ ## _ ATTACH_PATH _ ## ]/이미지0 " rel="lytebox" title="single image">
이미지 크게보기 클릭 </a>

다른 이미지 링크
<a href=" [ ## _ ATTACH_PATH _ ## ]/이미지0 " rel="lytebox" title="single image">
<img src= [ ## _ ATTACH_PATH _##]/이미지1" width="50" height="50" border="0">
</a>


html 모드에서 wysiwyg 모드로 변경하시면 소스가 변경되서 오류가 생길 수 있습니다.
html모드에서 바로 저장하 셔야 정상적으로 동작합니다.



썸네일 적용 예)

<a href="[##_ATTACH_PATH_##]/ck190000000000.png" rel="lytebox" title="single image">
<img src="[##_ATTACH_PATH_##]/ik110000000003.png" width="113" height="150" border="0"></a>





+ 저는 작은 사이즈의 이미지를 따로 업로드하여 썸네일 이미지로 사용했습니다.







B. 이미지를 여러개 넣을 때.



적용 방법)

1. 그룹화 시키는 것은 링크 소스 rel 뒤에 그룹 이름을 넣으면 됩니다.
하나 일 때 넣었던 링크 소스에 [그룹 이름]이라는 내용을 아래처럼 붙여줍니다.

<a href="이미지" rel="lytebox[그룹 이름]" title="타이틀">


2. 하나일 때 썼던 그대로, 여러개의 이미지에 하나의 그룹이름을 부여해 줍니다.
다른 이미지를 여러개 붙이면 하나의 창으로 여러개의 이미지를 볼 수 있습니다.
싱글 이미지 예제와 마찬가지로 섬네일로 넣을 수도 있고 텍스트로 넣을 수도 있습니다.

<a href="[##_ATTACH_PATH_##] /이미지1" rel="lytebox[그룹 이름] " title="group image1">
<img src=
"[##_ATTACH_PATH_##] /이미지1" width="50" height="50" border="0"></a>

<a href="[##_ATTACH_PATH_##] /이미지2" rel="lytebox[그룹 이름] " title="group image2">
<img src="[##_ATTACH_PATH_##] /이미지2" width="50" height="50" border="0"></a>

<a href="
[##_ATTACH_PATH_##] /이미지3" rel="lytebox[그룹 이름] " title="group image3">
<img src=
"[##_ATTACH_PATH_##] /이미지3" width="50" height="50" border="0"></a>


- 링크를 굳이 여러개 넣지 않아도 이런 식으로 하나만 띄워서 다른 이미지를 함께 볼 수 있습니다.


<a href=띄울 이미지1><img src=링크할 이미지><a/><a href=띄울 이미지2><a/><a href=띄울 이미지3><a/>



썸네일 적용 예)

<a href="[##_ATTACH_PATH_##]/ck190000000000.png" rel="lytebox[group]" title="group image 1">
<img src="
[##_ATTACH_PATH_##]/ik110000000004.png" width="340" border="0" height="150"></a>
<a href=" [##_ATTACH_PATH_##]/ck190000000001.png" rel="lytebox[group]" title="group image 2"></a>
<a href="[##_ATTACH_PATH_##]/ik290000000000.png" rel="lytebox[group]" title="group image 3"></a>



+ 저는 하나의 썸네일만 업로드하고, 다른 이미지를 붙였습니다.





C. 여러개의 이미지를 슬라이드쇼로 넣을 때.




적용 방법)


1. 이미지를 여러개 넣을 때 방법과 거의 동일합니다.
그룹화 하는 방법대로 사용하시면 되지만, lytebox라고 되어 있던 rel을 lyteshow로 바꿔주셔야 합니다.

a href="이미지" rel="lyteshow[그룹 이름]" title="타이틀"


2. 그룹화와 마찬가지로 이미지 사이즈를 조절해서 넣거나 텍스트, 다른 이미지 등을 적용합니다.

<a href="[##_ATTACH_PATH_##]/이미지1" rel="lyteshow[slide] " title="slide image1">
<img src="
[##_ATTACH_PATH_##]/이미지1" width="50" height="50" border="0"></a>
<a href="[##_ATTACH_PATH_##]/이미지2" rel="lyteshow[slide] " title="slide image2">
<img src=
"[##_ATTACH_PATH_##]/이미지2" width="50" height="50" border="0"></a>
<a href="[##_ATTACH_PATH_##]/이미지3" rel="lyteshow[slide] " title="slide image3">
<img src="[##_ATTACH_PATH_##]/이미지3"width="50" height="50" border="0"> </a



적용 예)

<a href=" [##_ATTACH_PATH_##] / ck190000000000.png" rel="lyteshow[slide-show]" title="slide-show image 1">
<img src="[##_ATTACH_PATH_##]/ik110000000002.png" width="340" border="0" height="150"></a>
<a href="[##_ATTACH_PATH_##]/ck190000000001.png" rel="lyteshow[slide-show]" title="slide-show image 2"></a>
<a href="[##_ATTACH_PATH_##]/ik290000000000.png" rel="lyteshow[slide-show]" title="slide-show image 3"></a>




+ 이 경우에는 애니메이션 기능을 꺼둔 상태로 딜레이를 3초로 줬지만,
스크립트 설정시 원하시는 설정으로 하시면 이보다 자연스럽게 보이실 겁니다.







+ 그룹을 여러개 넣을 때


그룹으로 묶는 이미지를 여러개 넣을 때는 그룹 이름을 꼭 구별해야 합니다.
각각 다른 그룹 이름을 부여해 주지 않으면 하나의 창으로 모여버립니다.
내용과 상관없는 이미지가 뜰 수도 있으니 이 부분을 주의해주셔야 합니다. 

예를 들어 우리집 강아지 이미지 3개와 옆집 고양이 이미지 2개를 띄우려고 할 때,
하나의 그룹을 사용하면 상관없이 5개의 이미지가 같이 묶입니다.
텍스트 사이에 이미지를 중간 중간 넣어줄 때 관련 이미지를 이런 식으로 구별해서 넣어줍니다.

우리집 강아지.
<a href="
[##_ATTACH_PATH_##]/이미지1" rel="lytebox[dog]" title="dog 1">
<img src="
[##_ATTACH_PATH_##]/이미지1" width="50" height="50" border="0"> </a>
<a href="
[##_ATTACH_PATH_##]/이미지2" rel="lytebox[dog]" title="dog 2"></a>
<a href="
[##_ATTACH_PATH_##]/이미지3" rel="lytebox[dog]" title="dog 3"></a>

옆집 고양이.
<a href="
[##_ATTACH_PATH_##]/이미지4" rel="lytebox[cat]" title="cat 1">
<img src="
[ ## _ ATTACH_PATH _ ## ] /이미지6" width="50" height="50" border="0"> </a>
<a href="
[ ## _ ATTACH_PATH _ ## ] /이미지5 " rel="lytebox [cat] " title=" cat 2 "> </a>

예쁜 동물들.
<a href="
[ ## _ ATTACH_PATH _##]/이미지1" rel="lyteshow[animal]" title="dog 1">
이미지보기
</a>
<a href="
[##_ATTACH_PATH_##]/이미지2" rel="lyteshow[animal]" title="dog 2"></a>
<a href="
[##_ATTACH_PATH_##]/이미지3" rel="lyteshow[animal]" title="dog 3"></a>
<a href="
[##_ATTACH_PATH_##]/이미지4" rel="lyteshow[animal]" title="cat 1"></a>
<a href="
[##_ATTACH_PATH_##]/이미지5" rel="lyteshow[animal]" title="cat 2"></a>


우리집 강아지 이미지 3개를 그룹 이미지로 묶고 썸네일 이미지로 링크,

옆집 고양이 이미지 2개를 그룹 이미지로 묶고 띄울 이미지와 다른 이미지로 링크,
우리집 강아지, 옆집 고양이를 슬라이드쇼 그룹으로 묶고 텍스트로 링크한 예제입니다.







+ html 페이지 링크



추가적으로 Lytebox에서는 frame 링크가 됩니다.
lytebox 홈의 설명에는 '.html' 파일명으로도 링크가 되는 걸로 되어 있습니다.
티스토리에서는 html이나 php 사용은 안되지만, ftp로 업로드하는 경우에는 링크가 가능합니다.


이런 식으로 rel을 바꾸시고 rev를 넣어 사이즈와 스크롤을 설정합니다.

<a href="html or url" rel="lyteframe" title="타이틀" rev="width: 100px; height: 100px; scrolling: auto;">링크</a>


적용 예)

<a href="http://acream.tistory.com" rel="lyteframe" title="Lytebox frame e.g" rev="width: 740px; height: 420px; scrolling: auto;">Lytebox frame e.g</a>

Lytebox frame e.g






lytebox 적용 방법이었습니다.
사실 쉬운 내용인데 괜히 복잡하게 보이는 것 같네요.
wysiwyg 모드 변경시 링크부분은 모두 바뀌어버립니다.
이래저래 번거로우시면 나중에 하시는 게 나을 것 같아요.
문제라면 문제일 수 있는 부분은 소스가 다 읽히기 전에 링크를 클릭하면
그냥 일반 링크로 읽어버린다는 점입니다.
역시 여러모로 그다지 적합하다는 생각은 안드는데요.그래도 사용하시고 싶으신 분을 위해...
대부분은 홈에 있는 설명 그대로지만 도움이 되셨기 바랍니다.


적용법은 티스토리에 적용하기에서 보실 수 있습니다.

저작자 표시 비영리 변경 금지
신고
Posted by 크림*앙마

::: Write a comment :::

  1. Favicon of http://www.google.com BlogIcon angel commented at 2012.08.27 18:03 신고 │ + - │ add a new comment

    thnks!

  2. BlogIcon bachelors-of-science.com commented at 2012.08.27 21:05 신고 │ + - │ add a new comment

    I had been an Explorer user until my dad downloaded Opera and it is so much more faster. Earlier my patience was limited and would close the windows if they took a lot of time. Browsing is so much more simpler now. Going back to Explorer would be such a pain now.

  3. Favicon of http://www.buyarimidewithoutprescription.net/ BlogIcon buy arimidex without prescription commented at 2012.08.31 19:09 신고 │ + - │ add a new comment

    I am so sad that this post is not in english and I hope that I will manage to translate with a dictionary. As I see this information is really valuable and I really want to know what you have written here. Anyway thanks for the great post.

  4. Favicon of http://ericasblog.net BlogIcon craig commented at 2012.09.25 13:23 신고 │ + - │ add a new comment

    dear and beloved brothers and sisters , i leave you this question(food for meditation!), if a ascending being with pure heart (this talking of a possibility/Hypothesis) desired to serve the much as possible based on Love, would it be possible to ascend, to a leve,l

  5. Favicon of http://www.virus-removal-tools.com BlogIcon jazzyaxl commented at 2012.09.25 20:08 신고 │ + - │ add a new comment

    The idea is great and I have tested uploading an image and it works fine! Here is a suggestion, it would have been nice if there was multiple image upload feature! Other than that everything is fine! Good job guys!

  6. Favicon of http://www.genieweb.eu/2012/11/30/les-lumieres-exterieures-a-led-top-20-de-pro.. BlogIcon http://www.genieweb.eu/2012/11/30/les-lumieres-exterieures-a-led commented at 2013.01.04 01:20 신고 │ + - │ add a new comment

    We're also making a short video with a montage of clips of people from across the country speaking their favorite lines from Icarus writings. If you come out on Sunday we'll be filming footage for the video.

  7. Favicon of http://www.entertainmentindiaonline.com BlogIcon entertainment online commented at 2013.01.29 20:26 신고 │ + - │ add a new comment

    i like to see lap in the miles

  8. Favicon of http://www.flipside-entertainment.com BlogIcon side entertainment commented at 2013.01.29 20:27 신고 │ + - │ add a new comment

    i like to see lap in the miles

  9. Favicon of http://www.flipside-entertainment.com BlogIcon side entertainment commented at 2013.01.29 20:27 신고 │ + - │ add a new comment

    i like to see lap in the miles

  10. Favicon of http://www.highstreet-entertainment.com BlogIcon entertainment online commented at 2013.01.29 20:27 신고 │ + - │ add a new comment

    i like to see lap in the miles

티스토리 툴바