របៀបបង្កើត Lightbox ងាយៗ

មកបង្កើតLightbox សំរាប់វេបសាយរបស់អ្នក
ជួយបង្កើននូវភាពស្រស់ស្អាតនៅលើ
វេបសាយរបស់អ្នក។
ដើម្បីLightboxយើងត្រូវមានធាតុផ្សំដូចជា៖

• CSS
• Jquery Plugin

1. ជំហានទី1៖

- lightbox

.jquery-lightbox-overlay
{
  background:#000000;
}

.jquery-lightbox
{
  position:relative;
  padding:17px 0;
}

.jquery-lightbox-border-top-left,
.jquery-lightbox-border-top-right,
.jquery-lightbox-border-bottom-left,
.jquery-lightbox-border-bottom-right
{
  position:absolute;
  height:17px;
  width:12%;
  z-index:7000;
}

.jquery-lightbox-border-top-left
{
  background: url(images/jquery-lightbox-theme.png) no-repeat 0 0;
  top:0;
  left:0;
}

.jquery-lightbox-border-top-right
{
  background: url(images/jquery-lightbox-theme.png) no-repeat right 0;
  top:0;
  right:0;
}

.jquery-lightbox-border-top-middle
{
  background:#2b2b2b;
  position:absolute;
  height:7px;
  width:78%;
  top:0;
  left:12%;
  z-index:7000;
  overflow:hidden;
}

.jquery-lightbox-border-bottom-left
{
  background: url(images/jquery-lightbox-theme.png) no-repeat 0 bottom;
  bottom:0;
  left:0;
}

.jquery-lightbox-border-bottom-right
{
  background: url(images/jquery-lightbox-theme.png) no-repeat right bottom;
  bottom:0;
  right:0;
}

.jquery-lightbox-border-bottom-middle
{
  background:#2b2b2b;
  height:7px;
  width:78%;
  position:absolute;
  bottom:0;
  left:12%;
  z-index:7000;
  overflow:hidden;
}

.jquery-lightbox-title
{
  background:#2b2b2b;
  color:#FFFFFF;
  font-family:verdana,arial,serif;
  font-size:11px;
  line-height:14px;
  padding:5px 8px;
  margin:3px;
  position:absolute;
  bottom:0;
  z-index:7000;
  opacity:0.9;
}

.jquery-lightbox-html
{
  z-index:7000;
  position:relative;
  border:0;
  border-left:7px solid #2b2b2b;
  border-right:7px solid #2b2b2b;
  padding:0px 15px;
  vertical-align:top;
}

.jquery-lightbox-html embed,
.jquery-lightbox-html object,
.jquery-lightbox-html iframe
{
  vertical-align:top;
}

.jquery-lightbox-background
{
  position:absolute;
  top:7px;
  left:7px;
  z-index:6999;
  float:left;
  padding:0;
}

.jquery-lightbox-background img
{
  display:block;
  position:relative;
  border:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}


.jquery-lightbox-mode-image .jquery-lightbox-html
{
  z-index:6998;
  padding:0;
}

.jquery-lightbox-mode-html .jquery-lightbox-background
{
  background:#FFFFFF;
}

.jquery-lightbox-mode-html .jquery-lightbox-html
{
  overflow:auto;
}

.jquery-lightbox-loading,
.jquery-lightbox-mode-html .jquery-lightbox-loading
{
  background:#FFFFFF url(images/loading.gif) no-repeat center center;
}

.jquery-lightbox-button-close
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -190px -115px;
  position:absolute;
  top:12px;
  right:-26px;
  width:29px;
  height:29px;
}

.jquery-lightbox-button-close:hover
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -220px -115px;
}

.jquery-lightbox-button-close span,
.jquery-lightbox-buttons span
{
  display:none;
}

.jquery-lightbox-mode-image .jquery-lightbox-button-close
{
  right:14px;
  z-index:7002;
}

.jquery-lightbox-buttons 
{
  position:absolute;
  top:7px;
  left:7px;
  z-index:7001;
  height:39px;
  display:none;
}

.jquery-lightbox-buttons .jquery-lightbox-buttons-init,
.jquery-lightbox-buttons .jquery-lightbox-buttons-end
{
  width:5px;
  height:39px;
  float:left;
  display:inline;
}

.jquery-lightbox-buttons .jquery-lightbox-buttons-init
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -151px -153px;
  margin:7px 0 0 7px;
}

.jquery-lightbox-buttons .jquery-lightbox-buttons-end
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -244px -153px;
  margin:7px 0 0 0;
}

.jquery-lightbox-buttons .jquery-lightbox-button-left
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -156px -153px;
  width:24px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}

.jquery-lightbox-buttons .jquery-lightbox-button-left:hover
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -156px -194px;
}


.jquery-lightbox-buttons .jquery-lightbox-button-right
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -220px -153px;
  width:24px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}

.jquery-lightbox-buttons .jquery-lightbox-button-right:hover
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -220px -194px;
}


.jquery-lightbox-buttons .jquery-lightbox-button-max
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -182px -153px;
  width:36px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}

.jquery-lightbox-buttons .jquery-lightbox-button-max:hover
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -182px -194px;
}


.jquery-lightbox-buttons .jquery-lightbox-button-min
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -162px -235px;
  width:36px;
  height:39px;
  float:left;
  display:inline;
  margin:7px 0 0 0;
}

.jquery-lightbox-buttons .jquery-lightbox-button-min:hover
{
  background: url(images/jquery-lightbox-theme.png) no-repeat -207px -235px;
}


.jquery-lightbox-buttons-custom
{
  height:39px;
  float:left;
  display:inline;
  background:#2b2b2b;
  line-height:39px;
  font-size:10px;
  margin:7px 0 0 0;
}

.jquery-lightbox-buttons-custom a
{
  color:#FFFFFF;
  font-size:10px;
  display:inline;
  font-weight:normal;
  text-decoration:underline;
  padding:0 3px;
}

.jquery-lightbox-mode-image .jquery-lightbox-button-close
{
  opacity:0.7;
}

.jquery-lightbox-mode-image .jquery-lightbox-buttons
{
  opacity:0.3;
}

.jquery-lightbox-mode-image:hover .jquery-lightbox-buttons,
.jquery-lightbox-mode-image:hover .jquery-lightbox-button-close
{
  opacity:0.9;
}

.jquery-lightbox-navigator
{
  display:none;
}

ជំហានទី2៖

- Html

1. Ungroup:Class="lightbox"
2. Group:Class="lightbox" rel="group1"

ជំហានទី3៖

- Script
Copy and past Under

ជំហានទី3៖

• 
  Group
• 
  group
• 
  UnGroup