* ajusted style of lightbox.

examples/lightbox.html

@@ -4,17 +4,13 @@
   <meta charset='utf-8'>
   <link href="../dist/css/zui.chanzhi.css" rel="stylesheet">
   <link href="../assets/css/doc.css" rel="stylesheet">
-  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
-  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
-  <script src="../assets/js/less.js"></script>
   <script src="../assets/js/jquery.js"></script>
-  <script src="../dist/js/zui.min.js"></script>
   <script src="../src/js/debug.js"></script>
   <script src="../src/js/modal.js"></script>
   <script src="../src/js/lightbox.js"></script>
   <script>
     $(function () {
-    $("*[data-toggle='lightbox']").lightbox();
+    $("[data-toggle='lightbox']").lightbox();
     });
     
   </script>
@@ -88,7 +84,8 @@
     <h4>基本类型</h4>
 
     <div class="segment">
-      <a href="img/img2.jpg" title="这是lightbox的示例" data-toggle="lightbox"><img src="img/img1.png" alt=""></a>
+      <a href="img/img1.png" title="这是lightbox的示例" data-toggle="lightbox" data-width='1075' data-height='554'><img src="img/img1.png" alt=""></a>
+      <a href="img/img2.jpg" title="这是lightbox的示例" data-toggle="lightbox" data-width='757' data-height='571'><img src="img/img2.jpg" alt=""></a>
     </div>
   </section>
 </article>

src/js/lightbox.js

@@ -2,7 +2,11 @@
 {
     jQuery.fn.lightbox = function()
     {
-        $(this).click(function(){
+        var lightboxId = 0;
+        $("[data-toggle='lightbox']").each(function(){$(this).attr('data-id',lightboxId++)});
+
+        $(this).click(function()
+        {
             // need modal
             if (!$.fn.modal) throw new Error('modal requires for lightbox');
 
@@ -14,18 +18,51 @@
             if(!imgUrl) return false;
 
             // get caption
-            var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
+            // var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
 
             // get lightbox modal
             if($('#lightboxModal').size() == 0)
-                $('<div id="lightboxModal" class="modal fade modal-lightbox"><img class="modal-dialog" id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div>').appendTo('body');
+            {
+                $('<div id="lightboxModal" class="modal fade modal-lightbox"><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div></div>').appendTo('body');
+                $('#lightboxModal .controller').click(function()
+                {
+                    var id = parseInt($('#lightboxModal').attr('data-id')) + ($(this).hasClass('prev') ? -1 : 1);
+                    var e = $('[data-toggle="lightbox"][data-id="' + id + '"]');
+                    if(e)
+                    {
+                        var url = e.attr('data-image') || e.attr('src') || e.attr('href') || e.find('img').attr('src');
+                        if(url)
+                        {
+                            $('#lightboxImg').attr('src', url);
+                            $('#lightboxModal').attr('data-id', id);
+
+                            $('#lightboxModal .controller').hide();
+                            if($('[data-toggle="lightbox"][data-id="' + (id - 1) + '"]').length > 0)
+                                $('#lightboxModal .prev').show(); 
+                            if($('[data-toggle="lightbox"][data-id="' + (id + 1) + '"]').length > 0)
+                                $('#lightboxModal .next').show(); 
+
+                            $('#lightboxModal .modal-dialog').width(e.attr('data-width') || 'auto').height(e.attr('data-height') || 'auto').css('margin-top', Math.max(0, ($(window).height() - e.attr('data-height'))/2));
+                        }
+                    }
+                });
+            }
+
+            var id = parseInt($e.attr('data-id'));
             var img = $('#lightboxImg');
             var lightboxModal = $('#lightboxModal');
 
+            // set current id
+            lightboxModal.find('.controller').hide();
+            lightboxModal.attr('data-id', id);
+            if($('[data-toggle="lightbox"][data-id="' + (id - 1) + '"]').length > 0) lightboxModal.find('.prev').show();
+            if($('[data-toggle="lightbox"][data-id="' + (id + 1) + '"]').length > 0) lightboxModal.find('.next').show();
+            lightboxModal.find('.modal-dialog').width($e.attr('data-width') || 'auto').height($e.attr('data-height') || 'auto').css('margin-top', Math.max(0, ($(window).height() - $e.attr('data-height'))/2));
+
             // update modal content
-            img.attr('alt', caption).attr('src', imgUrl);
-            if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
-            else lightboxModal.find('.caption').remove();
+            img.attr('src', imgUrl);
+            // if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
+            // else lightboxModal.find('.caption').remove();
 
             // show modal
             lightboxModal.modal();

src/less/modules/lightbox.less

+#lightboxModal
+{
+  .modal-dialog
+  {
+    border: none;
+    position: relative;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: none;
+    max-width: 100%;
+    max-height: 100%;
+    margin-bottom: 0;
+
+    &:hover,
+    &:focus
+    {
+      .close
+      {
+        .opacity(1);
+      }
+
+      .controller
+      {
+        outline: none;
+        .opacity(.9);
+        > .icon
+        {
+          box-shadow:1px 1px 16px rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+  }
+
+  .close
+  {
+    display: block;
+    font-size: 14px;
+    line-height: 14px;
+    text-align: center;
+    width: 30px;
+    height: 30px;
+    background-color: #333;
+    position: absolute;
+    right: -13px;
+    top: -15px;
+    color: #fff;
+    border: 2px solid #fff;
+    -webkit-radius:15px;
+    -moz-border-radius:15px;
+    border-radius:15px;
+    .opacity(.9);
+    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
+  }
+
+  .controller
+  {
+    display: block;
+    height: 100%;
+    line-height: 100%;
+    top: 0;
+    position: absolute;
+    cursor: pointer;
+    font-size: 30px;
+    padding: 10px 20px;
+    color: #fff;
+    background:none;
+    border: none;
+    .opacity(0.05);
+    transition:all 0.4s;
+
+    > .icon
+    {
+      display: inline-block;
+      -webkit-radius:25px;
+      -moz-border-radius:25px;
+      border-radius:25px;
+      background-color: #333;
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+      border: 2px solid #fff;
+    }
+
+    &:hover
+    {
+      .opacity(1);
+    }
+
+    &.prev
+    {
+      left: 0;
+    }
+
+    &.next
+    {
+      right: 0;
+    }
+  }
+}
 #lightboxImg
 {
   width: inherit;
@@ -6,30 +106,32 @@
   max-height: 100%;
   display: block;
   padding: 0;
-  margin: 40px auto 0 auto;
+  margin: 0 auto;
+  border: 6px solid #fff;
   -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  border: 6px solid #fff;
-  .transition(all,@animation-speed-fast,@animation-type);
+  cursor: pointer;
+  .transition(all,@animation-speed-normal,@animation-type);
 }
 
-#lightboxModal.with-caption
-{
-  .caption
-  {
-    position: relative;
-    text-align: center;
-    margin-top: -30px;
-    font-size: 12px;
-    white-space: nowrap;
-    z-index: 10010;
-    color: #666;
-    font-weight: bold;
-    .transition(all,@animation-speed-fast,@animation-type);
-  }
+// #lightboxModal.with-caption
+// {
+//   .caption
+//   {
+//     position: relative;
+//     text-align: center;
+//     margin-top: -30px;
+//     font-size: 12px;
+//     white-space: nowrap;
+//     z-index: 10010;
+//     color: #777;
+//     font-weight: bold;
+//     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
+//     .transition(all,@animation-speed-normal,@animation-type);
+//   }
 
-  #lightboxImg:hover
-  {
-    border-bottom-width: 40px;
-  }
-}
+//   #lightboxImg:hover
+//   {
+//     border-bottom-width: 40px;
+//   }
+// }