看 source 裡面有 codepen 的 連結

剛好這次的需求，要多一個直向與橫向的呈現要不一樣

就自己 fork 了一個 版本來貼給大家看

主要是透過CSS去調整版型

@media screen and (orientation: portrait) {
   /* Top block will contain the gallery */
   .fancybox-stage {
     height: 52%;
     background: #fff;
   }
 /* Bottom block - close button and the form */
   .fancybox-form-wrap {
     position: absolute;
     left: 40px;
     right: 40px;
     bottom: 0;
     height: 48%; 
     background: #fff;
   }
 }
 @media screen and (orientation: landscape) {
   /* Left block will contain the gallery */
   .fancybox-stage {
     width: 52%;
     background: #fff;
   }
 /* Right block - close button and the form */
   .fancybox-form-wrap {
     position: absolute;
     top: 40px;
     right: 0;
     bottom: 40px;
     width: 48%; 
     background: #fff;
   }
 }

orientation: portrait 為直向的版型，上面是圖，下面是文字

orientation: landscape 為橫向版型，左邊是圖，右邊是文字，(這個demo原來就是這樣放)

PS:

附上這個 CSS屬性的 說明與版本適用表

有興趣想知道更多版型分享也歡迎留言或是到我的TG群組發問唷

1. Froala
2. ContentTools
3. Raptor Editor
4. Aloha Editor
5. TinyMCE
6. bootstrap3-wysiwyg
7. Summernote
8. CKEditor
9. Trumbowyg
10. Redactor

其他文章：
20 Awesome WYSIWYG and jQuery Text Editor Plugins – DesignHuntR
25+ jQuery Wysiwyg Editor Plugin with Example Demo

語法高亮有找到支援滿多語法跟樣式的js lib
highlight.js
Github上面應該是最多人star的repo了
支援顯示的程式語言166種
能選擇的樣式有77種

1. awesome-jquery github上面的repo
   也是awesome系列的其中一個repo
2. jquer.in 全站都是jQuery的資源
   有65頁的資源，一頁約20則，這樣估算也有1300多個套件
3. npm上面用 jquery-plugin 當關鍵字去搜尋
   上面約有941筆資料
4. (舊)官方的頁面 https://plugins.jquery.com/
   現在官方也是推薦去npm找

同場加映：
https://designshack.net/
Awesome Cursor – a jQuery plugin for using FontAwesome icons as custom CSS cursors

jQuery plugin 名稱：tablesorter
網址：http://mottie.github.io/tablesorter/docs/

上面的網址是現在github上面star數最多的fork版本
維護者：Mottie
原始作者的github是 Christian Bach / repo
也支援ajax的資料更新

網站名稱：Bootstrap中文网
網址：http://www.bootcss.com/

主要都是bootstrap與前端開發的中文資源
以下列出此站首頁所有的連結資源

1. Bootstrap 编码规范 by @mdo
2. jQuery API 中文手册
3. Open CDN 开放CDN服务
4. 优站精选 Bootstrap网站实例
5. gulp.js 基于流的自动化构建工具
6. LESS 一种动态样式语言
7. Lodash JavaScript 工具库
8. Underscore.js JavaScript 工具库
9. Buttons CSS按钮样式库
10. stickUp 让页面元素“固定”位置
11. Responsive Nav 响应式导航
12. Unslider jQuery轮播插件
13. Flat UI Metro风格的Bootstrap
14. LayoutIt! Bootstrap可视化布局
15. Bootstrap Switch Bootstrap开关组件
16. Sco.js Bootstrap组件增强版
17. iCheck 增强复选框和单选按钮
18. bootstrap-wysiwyg 为Bootstrap定制的可视编辑器
19. Chart.js 精巧的JS图表绘制工具库
20. Preboot Bootstrap之前世
21. jQuery.Pin 固定页面元素的jQuery插件
22. Bsie Bootstrap IE6兼容方案
23. Messenger 非常酷的弹框(Alert)组件
24. DateTime Picker 日期时间选择器
25. jQuery UI Bootstrap 用Bootstrap美化jQuery UI
26. Google Bootstrap Google风格的Bootstrap
27. Metro UI CSS Bootstrap与Metro融合
28. Font Awesome Bootstrap专用图标字体
29. Simple Icons Icon汇
30. Bootstrap Form Builder 在线表单构造器
31. HTML5 Boilerplate 专业的前端模版
32. Web Safe Colors Web安全色
33. Bootstrap Docs Bootstrap文档全集
34. Git Guide Git简易指南
35. Grumble.js 气泡形状的提示（Tooltip）控件
36. CIKONSS 纯CSS实现的Icon
37. Headroom.js 隐藏或展示页面元素
38. Grunt 项目构建工具
39. Zepto.js JavaScript 工具库

中文翻譯以後，不見得每個站都有持續維護
有機會再來更新更新這些專案的情況吧

• 2014/10/29 發表jQuery 3.0的開發計畫
• 2015/07/13 jQuery 3.0 alpha1發佈
• 2016/01/14 jQuery 3.0 beta發佈
  這天也是jQuery 十周年紀念日

$(document).ready(function() {
  //do work
});

用純js的話，

document.addEventListener("DOMContentLoaded", function(event) {
  //do work
});

原始連結