Lightbox for images

application/assets/stylesheets/colors.less

@@ -22,7 +22,7 @@
 
 body {
   color: @foreground1;
-  background: url('../../images/mooning.png') @background1;
+  background: url('../../assets/images/mooning.png') @background1;
 }
 
 .navigation {

application/assets/stylesheets/lightbox.less

@@ -0,0 +1,204 @@
+@radius: 4px;
+
+.opacity(@opacity: 0.5) {
+  @percent: @opacity * 100;
+  /* IE 8 */
+  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{percent})";
+  /* IE 5-7 */
+  filter: ~"alpha(opacity=@{percent})";
+  /* Netscape */
+  -moz-opacity: @opacity;
+  /* Safari 1.x */
+  -khtml-opacity: @opacity;
+  /* Webkit */
+  -webkit-opacity: @opacity;
+  /* Good browsers */
+  opacity: @opacity;
+}
+
+.border-radius (@radius) {
+  border-radius: @radius;
+  -moz-border-radius: @radius;
+  -webkit-border-radius: @radius;
+}
+
+.clearfix() {
+  &:before,
+  &:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+          transition: @transition;
+}
+
+.border-bottom-radius(@radius) {
+  border-bottom-right-radius: @radius;
+   border-bottom-left-radius: @radius;
+}
+
+// Preload images
+body:after {
+  content: url("@{image_path}/close.png") url("@{image_path}/loading.gif") url("@{image_path}/prev.png") url("@{image_path}/next.png");
+  display: none;
+}
+
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  .opacity(0.8);
+  display: none;
+}
+
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+  .lb-image {
+    display: block;
+    height: auto;
+    max-width: inherit;
+    .border-radius(@radius - 1);
+  }
+  a img {
+    border: none;
+  }
+}
+
+.lb-outerContainer {
+  position: relative;
+  background-color: white;
+  .clearfix();
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  .border-radius(@radius);
+}
+
+.lb-container {
+  padding: 4px;
+}
+
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0%;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url("@{image_path}/loading.gif") no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: none;
+}
+
+.lb-prev, .lb-next {
+  width: 49%;
+  height: 100%;
+  cursor: pointer;
+  /* Trick IE into showing hover */
+  display: block;
+}
+
+.lb-prev {
+  left: 0;
+  float: left;
+  .opacity(0);
+  .transition(opacity 0.6s);
+  &:hover {
+    .opacity(1);
+    background: url("@{image_path}/prev.png") left 48% no-repeat;
+  }
+}
+
+.lb-next {
+  right: 0;
+  float: right;
+  .opacity(0);
+  .transition(opacity 0.6s);
+  &:hover {
+    .opacity(1);
+    background: url("@{image_path}/next.png") right 48% no-repeat;
+  }
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  .clearfix();
+  width: 100%;
+  .border-bottom-radius(@radius);
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #bbbbbb;
+  .lb-details {
+    width: 85%;
+    float: left;
+    text-align: left;
+    line-height: 1.1em;
+  }
+  .lb-caption {
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 1em;
+  }
+  .lb-number {
+    display: block;
+    clear: left;
+    padding-bottom: 1em;
+    font-size: 12px;
+    color: #999999;
+  }
+  .lb-close {
+    display: block;
+    float: right;
+    width: 30px;
+    height: 30px;
+    background: url("@{image_path}/close.png") top right no-repeat;
+    text-align: right;
+    outline: none;
+    .opacity(0.7);
+    .transition(opacity 0.2s);
+    &:hover {
+      cursor: pointer;
+      .opacity(1);
+    }
+  }
+}

application/assets/stylesheets/main.less

@@ -1,8 +1,12 @@
 @import 'normalize';
 @import 'colors';
 @import 'layout';
+
 @columns: 6;
 @gutter: 2%;
+@image_path: '../../assets/images';
+
+@import 'lightbox';
 
 body {
   font-family: "Playfair Display", serif;

application/classes/Markdown.php

@@ -65,7 +65,8 @@ class Markdown extends Kohana_Markdown {
 		$alt_text = $this->encode_attribute($alt_text);
 		$url = $this->encode_attribute($url);
     $src = NULL;
-    $result = "<a href=\"$url\"><img alt=\"$alt_text\" title=\"$alt_text\"";
+    $uid = uniqid();
+    $result = '<a href="'.$url.'" data-lightbox="'.$uid.'" title="'.$alt_text.'"><img alt="'.$alt_text.'" title="'.$alt_text.'"';
     try {
       $src = Model_Photo::generate_thumbnail($url);
     }

application/classes/View/Edit.php

@@ -6,7 +6,7 @@
 class View_Edit extends View_Layout {
   public $model;
   public $scripts = array(
-    'https://yandex.st/jquery/2.0.3/jquery.min.js',
+    'jquery',
     'jquery.autosize-min.js'
   );
   /**

application/classes/View/Layout.php

@@ -41,19 +41,25 @@ class View_Layout {
 
   public function scripts()
   {
-    $scripts = array_merge ($this->scripts, $this->base_scripts);
+    $scripts = array_merge ($this->base_scripts, $this->scripts);
     $temp = "";
     foreach($scripts as $script):
       if (strstr($script, '://') === FALSE) //no protocol given, script is local
       {
-        $temp .= '<script type="text/javascript" charset="utf-8" src="'.URL::site('application/assets/javascript/'.$script).'"></script>'."\n";
+        if ($script === 'jquery') // CDN shortcut
+        {
+          $temp .= HTML::script('https://yandex.st/jquery/2.0.3/jquery.min.js')."\n";
+        }
+        else
+        {
+          $temp .= HTML::script('application/assets/javascript/'.$script)."\n";
+        }
       }
       else
       {
-        $temp .= '<script type="text/javascript" charset="utf-8" src="'.$script.'"></script>'."\n";
+        $temp .= HTML::script($script)."\n";
       }
     endforeach;
-    $temp .= $this->stat_scripts();
     return $temp;
   }
 

application/classes/View/Page/View.php

@@ -3,4 +3,10 @@
 /**
  * Page view controller
  **/
-class View_Page_View extends View_Layout {}
+class View_Page_View extends View_Layout {
+  public $scripts = array(
+    'jquery',
+    'jquery.autosize-min.js',
+    'lightbox-2.6.min.js'
+  );
+}

application/classes/View/Post/Edit.php

@@ -5,6 +5,11 @@
  **/
 class View_Post_Edit extends View_Edit {
   public $_view = 'edit';
+  public $scripts = array(
+    'jquery',
+    'jquery.autosize-min.js',
+    'lightbox-2.6.min.js'
+  );
   public $tags;
   public function get_controls()
   {

application/classes/View/Post/View.php

@@ -18,6 +18,12 @@ class View_Post_View extends View_Layout {
   public $comments;
   public $date;
 
+  public $scripts = array(
+    'jquery',
+    'jquery.autosize-min.js',
+    'lightbox-2.6.min.js'
+  );
+
   public function get_tags()
   {
     $output = 'Теги: ';

application/config/database.php.example

@@ -4,7 +4,7 @@ return array
 (
  'default' => array
  (
-  'type'       => 'MySQL',
+  'type'       => 'MySQLi',
   'connection' => array(
    /**
     * The following options are available for MySQL:

modules/database

@@ -1 +1 @@
-Subproject commit 264e3a24bd6be3b83154816abda2e7713ddfa2c3
+Subproject commit e378bf2cdda62192143e15eb0afaefdb2285a96f