﻿{"id":1569,"date":"2019-10-21T13:27:02","date_gmt":"2019-10-21T05:27:02","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1569"},"modified":"2022-03-23T17:02:40","modified_gmt":"2022-03-23T09:02:40","slug":"jquery-fancybox","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/10\/21\/jquery-fancybox\/","title":{"rendered":"jQuery Fancybox"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u5b89\u88dd<\/h3>\n\n\n\n<p>\u5b98\u65b9\u7db2\u5740\uff1a<a href=\"http:\/\/fancyapps.com\/fancybox\/\">http:\/\/fancyapps.com\/fancybox\/<\/a><br>\u4e0b\u8f09\u7db2\u5740\uff1a<a href=\"https:\/\/fancyapps.com\/fancybox\/3\/\">https:\/\/fancyapps.com\/fancybox\/3\/<\/a><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.4.1\/dist\/jquery.min.js\">&lt;\/script>\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/>\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/gh\/fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\">&lt;\/script><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u8a9e\u6cd5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script type=\"text\/javascript\">\n\t$(document).ready(function() {\n\t\t$(\".fancybox\").fancybox();\n\t});\n&lt;\/script>\n\n\/\/\u589e\u52a0\u8a2d\u5b9a\n\n\t$(\".fancybox\").fancybox({\n\t\t'width'        : '30%',\n\t\t'height'        : '20%',\n\t\t'autoScale'      : false,\n\t\t'transitionIn'     : 'none',\n\t\t'transitionOut'    : 'none',\n\t\t'onClosed' : function() {alert('test');}\n\t});\n<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u986f\u793a<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a class=\"fancybox\" rel=\"group\" href=\"big_image_1.jpg\">&lt;img src=\"small_image_1.jpg\" alt=\"\" \/>&lt;\/a>\n&lt;a class=\"fancybox\" rel=\"group\" href=\"big_image_2.jpg\">&lt;img src=\"small_image_2.jpg\" alt=\"\" \/>&lt;\/a><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u7bc4\u4f8b<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script type=\"text\/javascript\">\n$(function(){\n    \/\/ \u5716\u7247\u8aaa\u660e\u5728\u5716\u7247\u4e4b\u5916\uff0c\u906e\u7f69\u7684\u901f\u5ea60.5\u79d2\uff0c\u900f\u660e\u5ea60.95\u5e7e\u4e4e\u4e0d\u900f\u660e\u4e86\u3002\n    $(\".cssname_1\").fancybox({\n        helpers: {\n            title : {\n                type : 'outside'\n            },\n            overlay : {\n                speedIn : 500,\n                opacity : 0.95\n            }\n        }\n    });\n  \n    \/\/ \u53d6\u6d88\u958b\u555f\u8207\u95dc\u9589\u5716\u7247\u7684\u52d5\u756b\uff0c\u5716\u7247\u8aaa\u660e\u5728\u5716\u7247\u4e4b\u4e0a\u3002\n    $(\".cssname_2\").fancybox({\n        openEffect  : 'none',\n        closeEffect : 'none',\n  \n        helpers : {\n            title : {\n                type : 'over'\n            }\n        }\n    });\n  \n    \/\/ \u81ea\u8a02css\u6a23\u5f0f\uff0c\u518d\u9ede\u9078\u4e00\u6b21\u5c31\u53ef\u4ee5\u95dc\u9589\u5716\u7247\uff0c\u767d\u8272\u7684\u5c4f\u853d\uff0c\u5716\u7247\u8aaa\u660e\u5728\u5716\u5167\u3002\n    $(\".cssname_3\").fancybox({\n        wrapCSS    : 'fancybox-custom',\n        closeClick : true,\n  \n        helpers : {\n            title : {\n                type : 'inside'\n            },\n            overlay : {\n                css : {\n                    'background-color' : '#eee'\n                }\n            }\n        }\n    });\n  \n    \/\/ \u958b\u555f\u8207\u95dc\u9589\u5716\u7247\u7684\u52d5\u756b\u8a2d\u5b9a\u70baelastic\uff0c\u6c92\u6709\u5c4f\u853d\u6548\u679c\n    $(\".cssname_4\").fancybox({\n        padding: 0,\n  \n        openEffect : 'elastic',\n        openSpeed  : 150,\n  \n        closeEffect : 'elastic',\n        closeSpeed  : 150,\n  \n        closeClick : true,\n  \n        helpers : {\n            overlay : null\n        }\n    });\n  \n});\n&lt;\/script><\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u261e \u5b89\u88dd \u5b98\u65b9\u7db2\u5740\uff1ahttp:\/\/fancyapps.com\/fancybox\/\u4e0b\u8f09\u7db2\u5740\uff1ahttps:\/\/fa&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54,14,12,4],"tags":[],"class_list":["post-1569","post","type-post","status-publish","format-standard","hentry","category-jquery","category-js","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1569"}],"version-history":[{"count":34,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1569\/revisions"}],"predecessor-version":[{"id":7188,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1569\/revisions\/7188"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1569"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}