fancybox

在github使用hexo搭建静态博客

余生颓废 提交于 2020-08-10 00:05:40
安装前提 安装 Hexo 之前需要先安装下列应用程序: Node.js (Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本) Git 安装hexo 所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。 npm install -g hexo-cli 使用hexo 安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。 npx hexo init <folder> 新建完成后,指定文件夹的目录如下 . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes 安装github自动提交工具 npm install hexo-deployer-git --save 配置秘钥访问github ssh-keygen -t rsa -C "your_email@youremail.com" 直接按三次回车,可不用输入密码 然后打开C盘查找Users/当前用户目录(Administrator),找到.ssh文件夹 打开文件夹下的id_rsa.pub文件,将里面文字全部复制, 打开github个人主页 (https://github.com/settings/ssh) ,点击 Add

Position thumbnails on bottom with Fancybox

丶灬走出姿态 提交于 2020-06-17 05:35:41
问题 I'm trying to get the thumbnails to display horizontally on the bottom using the latest Fancybox. While this example works, it's not working for me. I also tried the same example code from codepen on jsfiddle and it's not working, with the same issue I'm having. It just goes to the top left. The "top" CSS does not seem to have any effect with the thumbnails. What's going wrong? $('[data-fancybox="images"]').fancybox({ thumbs: { autoStart: true, axis: 'x' } }) .fancybox-thumbs { top: auto;

Position thumbnails on bottom with Fancybox

落花浮王杯 提交于 2020-06-17 05:35:23
问题 I'm trying to get the thumbnails to display horizontally on the bottom using the latest Fancybox. While this example works, it's not working for me. I also tried the same example code from codepen on jsfiddle and it's not working, with the same issue I'm having. It just goes to the top left. The "top" CSS does not seem to have any effect with the thumbnails. What's going wrong? $('[data-fancybox="images"]').fancybox({ thumbs: { autoStart: true, axis: 'x' } }) .fancybox-thumbs { top: auto;

github.io hexo 安装

不羁的心 提交于 2020-04-08 06:36:23
/***************************************************************** * github.io hexo 安装 * 说明: * 本文记录hexo的安装,主要是为了生成静态的github.io站点静态 * 页面。 * * 2016-6-7 深圳 南山平山村 曾剑锋 ****************************************************************/ 一、参考文章: 1. hexo —— 简单、快速、强大的Node.js静态博客框架 https://segmentfault.com/a/1190000000370778 2. 文档 https://hexo.io/zh-cn/docs/ 二、Operation: zengjf@zengjf:~$ cd os zengjf@zengjf:~/os$ ls AplexOS.github.io zengjf@zengjf:~/os$ cd AplexOS.github.io/ zengjf@zengjf:~/os/AplexOS.github.io$ ls AplexOS.github.io _config.yml node_modules public source CNAME db.json package.json

Alternative for “$(document).ready” function

爷,独闯天下 提交于 2020-03-18 10:28:51
问题 I am using fancybox in an aspx page. The document ready function does not work in this page for a lightbox. Someone told me to write a new javascript code for loading the lightbox in that page. 回答1: Include jQuery. Check network tab that you are not getting 404. Check console that you are not getting "$ is unknown". Do stuff when DOM is ready. $(function(){ // DOM Ready - do your stuff }); 回答2: Try this: document.addEventListener('DOMContentLoaded', function() { // ... }); Works in modern

Jquery相册 fancybox-1.3.4

故事扮演 提交于 2020-03-13 14:39:20
Fancybox的特点如下: 可以支持图片、html文本、flash动画、iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片 Fancybox播放器支持投影,更有立体的感觉 Fancybox使用方法: 1、引入jquery核心库和Fancybox插件库 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 可选 - 如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本 <script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script> 可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本 <script type="text/javascript" src="

Fancybox

别来无恙 提交于 2020-03-12 10:58:04
Fancybox是一款优秀的jquery 插件,它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,iframe页面等等。 fancybox具有以下特性: 可以加载DIV、图片、图片集、Ajax数据、SWF影片,iframe页面等。 支持键盘方向键和ESC键。 丰富的参数设置和方法调用。 可扩展性强。 如何使用? 本文以DEMO中的Demo2为例,讲解fancybox的使用。 1、添加javascript引用和css文件的引用 view plaincopy to clipboardprint? <link rel="stylesheet" type="text/css" href="fancybox.css" mce_href="fancybox.css" /> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript" src="js/fancybox.js" mce_src="js/fancybox.js"></mce:script> <link

jQuery Fancybox插件使用参数详解

天涯浪子 提交于 2020-03-12 10:36:46
我是一个搬运工 本文转自 http://www.weste.net/2013/4-22/90629.html 先给上Fancybox的项目主页地址:http://fancybox.net/, Fancybox的特点如下: 可以支持图片、html文本、flash动画、iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片 Fancybox播放器支持投影,更有立体的感觉 Fancybox使用方法: 1、引入jquery核心库和Fancybox插件库 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 可选 - 如果需要用到fancy transition(一些动画效果)你还需要引入以下脚本 <script type="text/javascript" src="/fancybox/jquery.easing

Tracking image views in Fancybox (a jQuery Lightbox) using Google Analytics

蹲街弑〆低调 提交于 2020-02-24 00:50:34
问题 I am working on this site: http://www.vomero.co.uk/Torquay.aspx and would like to track views of the images (which open in a Fancybox gallery). I know I could add an onClick event to each image, but since the gallery allows the user to view all the images using Next/Prev icons it is unlikely users will actually click each photo. Any ideas? Thanks, Matt 回答1: I think I found a good solution for this. If you only add 'onComplete' key to fancybox() object passing the value of your google