>웹 프론트엔드 >JS 튜토리얼 >BlueShow v1.0 이미지 브라우저 출시(라이트박스와 유사) blueshow.js 패키지 download_javascript 기술

BlueShow v1.0 이미지 브라우저 출시(라이트박스와 유사) blueshow.js 패키지 download_javascript 기술

WBOY
WBOY원래의
2016-05-16 19:11:091258검색

며칠동안 블로그를 못 올렸네요~
최근에 PHPCMS 파일관리자용으로 디자인한 사진 브라우저를 작성했는데 라이트박스가 보이길래 일반 웹페이지에서도 사용할 수 있도록 변경해 봤습니다. .

데모 및 설명 주소: http://longbill.cn/down/sample/blueshow/index.htm

사용법:
1. blueshow.js 파일로 서버에 올려두셔도 됩니다. http://www.jb51.net/downtools/blueshow.js
이것을 사용하고 싶다면. 프로그램 다음 문장을 작성하세요(와 사이):

http://yoursite/blueshow.js가 주소를 지정합니다.
3. 프로그램은 blueshow.js?lock=1&autorun=1과 같은 매개변수를 사용할 수 있습니다.
//설명:
//값 범위는 0과 1입니다.
/ / lock: 이미지를 표시할 때 원본 웹페이지를 잠글지 여부를 나타냅니다.
//autorun: 자동으로 초기화할지 여부(웹페이지에 느린 통계 코드가 포함된 경우 이 값을 0으로 설정하는 것이 좋습니다.)
//If autorun= 0 그런 다음
<script>BlueShow();</script>

4. 해당 사진은 다음과 같습니다.
a. jpg'>링크
(gif, jpg, png, jpeg, bmp 등을 포함한 사진에 대한 링크, 자세한 내용은 blueshow.js를 참조하세요. 사진이 동적으로 생성되는 경우(예: img) php?id=3 다음 끝에 "&.gif"를 추가합니다.
b.
클래스 이름의 "blueshow" 문자, img에 원래 클래스 속성이 있는 경우 원래 클래스 이름 뒤에 공백과 "blueshow"를 추가합니다.)



코드 복사 코드는 다음과 같습니다.



Blue Show v1.0 使用说明 -- By Longbill






使用方法:  


1.下载 blueshow.js 文件,放到服务器上 (点击这里下载) 你也可以直接使用这个: http://longbill.cn/down/blog/blueshow.js

2.在你要用此程序的网页中写上这句(在和之间):

  http://yoursite/blueshow.js 为你放置程序的地址

3.程序可以使用参数 比如  blueshow.js?lock=1&autorun=1

  //说明:

  //取值范围为0和1

  //lock:表示显示图片时是否锁定原网页

  //autorun: 是否自动初始化(如果你的网页含有一些比较慢的统计代码强烈建议将此值设置为0)

  //如果autorun=0那么请在网页的最后(统计代码之前)加上  详情见本网页源代码

4.符合条件的图片包括:

  a.链接(指向图片的链接,包括gif,jpg,png,jpeg,bmp,等,具体见blueshow.js。 如果图片是动态生成的,比如 img.php?id=3 那么在后面加上 "&.gif" 即可)

  b. (class名中含有 "blueshow" 字符的img,如果img本来有class属性,那么再原来的class名后加空格再加"blueshow"即可)



到这里讨论




图片样例:

Google
Google!!!!
Gooooooogle!!!!!


<script> .write = function () { return false;} //통계 코드에 내용이 표시되지 않도록 합니다<br>BlueShow() <br></script>

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.