{"id":3479,"date":"2021-09-14T15:07:31","date_gmt":"2021-09-14T06:07:31","guid":{"rendered":"https:\/\/taitan916.info\/blog\/?p=3479"},"modified":"2024-01-07T10:06:07","modified_gmt":"2024-01-07T01:06:07","slug":"post-3479","status":"publish","type":"post","link":"https:\/\/taitan916.info\/blog\/archives\/3479","title":{"rendered":"Lightbox\u3067\u753b\u50cf\u62e1\u5927\u6642\u306b\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u3092\u53f3\u4e0a\u306b\u5909\u66f4"},"content":{"rendered":"

Lightbox(\u30d0\u30fc\u30b8\u30e7\u30f32.7.1)\u3067\u753b\u50cf\u62e1\u5927\u6642\u306b\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u3092\u53f3\u4e0b\u304b\u3089\u53f3\u4e0a\u306b\u5909\u66f4\u3057\u3001\u66f4\u306b\u9589\u3058\u308b\u30dc\u30bf\u30f3\u3092\u753b\u50cf\u304b\u3089\u30c6\u30ad\u30b9\u30c8\u8868\u793a\u306b\u5909\u66f4\u3057\u305f\u304b\u3063\u305f\u3002\u8abf\u3079\u3066\u307f\u305f\u3068\u3053\u308d\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u306e\u5909\u66f4\u306f\u96e3\u3057\u304f\u3001JavaScript\u30d5\u30a1\u30a4\u30eb\u5185\u5bb9\u306e\u5909\u66f4\u53ca\u3073CSS\u3067\u306e\u8abf\u6574\u304c\u5fc5\u8981\u3063\u307d\u3044\u3002\u4ee5\u4e0b\u306b\u65b9\u6cd5\u3092\u30e1\u30e2\u3002<\/p>\n

 <\/p>\n

\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8<\/h2>\n

https:\/\/taitan916.info\/sample\/lightbox2\/<\/a><\/p>\n

\u753b\u50cf\u62e1\u5927\u6642\u306b\u53f3\u4e0a\u306b\u300c\u30af\u30ea\u30c3\u30af\u3067\u9589\u3058\u308b\u300d\u3068\u3044\u3046\u30c6\u30ad\u30b9\u30c8\u304c\u8868\u793a\u3055\u308c\u3001\u5f53\u8a72\u30c6\u30ad\u30b9\u30c8\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u753b\u50cf\u304c\u975e\u8868\u793a\u306b\u306a\u308b\u70b9\u3092\u78ba\u8a8d\u3067\u304d\u308b\u3002<\/p>\n

 <\/p>\n

Lightbox\u306e\u6e96\u5099<\/h2>\n

\u4ee5\u4e0b\u304b\u3089\u30d0\u30fc\u30b8\u30e7\u30f32.7.1\u306elightbox.js\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u3002<\/p>\n

https:\/\/cdnjs.com\/libraries\/lightbox2\/2.7.1<\/a><\/p>\n

61\u884c\u76ee\u4ed8\u8fd1\u306e\u4ee5\u4e0b\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8&\u8ffd\u8a18\u3002\u300c\u30af\u30ea\u30c3\u30af\u3067\u9589\u3058\u308b\u300d\u90e8\u5206\u306f\u9069\u5b9c\u5909\u66f4\u3059\u308b\u3002<\/p>\n

\/\/\u4ee5\u4e0b\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\r\n\/\/$(\"<div id='lightboxOverlay' class='lightboxOverlay'><\/div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' \/><div class='lb-nav'><a class='lb-prev' href='' ><\/a><a class='lb-next' href='' ><\/a><\/div><div class='lb-loader'><a class='lb-cancel'><\/a><\/div><\/div><\/div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'><\/span><span class='lb-number'><\/span><\/div><div class='lb-closeContainer'><a class='lb-close'><\/a><\/div><\/div><\/div><\/div>\").appendTo($('body'));\r\n\/\/\u4ee5\u4e0b\u8ffd\u8a18\r\n$('<div id=\"lightboxOverlay\" class=\"lightboxOverlay\"><\/div><div id=\"lightbox\" class=\"lightbox\"><div class=\"lb-outerContainer\"><div class=\"lb-closeContainer\"><a class=\"lb-close\">\u30af\u30ea\u30c3\u30af\u3067\u9589\u3058\u308b<\/a><\/div><div class=\"lb-container\"><img class=\"lb-image\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAP\/\/\/wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\" \/><div class=\"lb-nav\"><a class=\"lb-prev\" href=\"\" ><\/a><a class=\"lb-next\" href=\"\" ><\/a><\/div><div class=\"lb-loader\"><a class=\"lb-cancel\"><\/a><\/div><\/div><\/div><div class=\"lb-dataContainer\"><div class=\"lb-data\"><div class=\"lb-details\"><span class=\"lb-caption\"><\/span><span class=\"lb-number\"><\/span><\/div><\/div><\/div><\/div>').appendTo($('body'));<\/pre>\n
\u4e0a\u8a18JS\u30d5\u30a1\u30a4\u30eb\u3092\u9069\u5f53\u306a\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u4ee5\u4e0b\u3067\u8aad\u307f\u8fbc\u3080\u3002<\/p>\n
<script type=\"text\/javascript\" src=\"\/\/code.jquery.com\/jquery-3.5.1.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\".\/lightbox.js\"><\/script>\r\n<link href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/lightbox2\/2.7.1\/css\/lightbox.css\" rel=\"stylesheet\"><\/pre>\n
 <\/p>\n
CSS\u3067\u8abf\u6574<\/h2>\n
<style>\r\n.lb-closeContainer {\r\n    position: absolute;\r\n    top: -20px;\r\n    right: -1px;\r\n    color: #fff;\r\n    font-weight: bold;\r\n}\r\n.lb-closeContainer .lb-close {\r\n    display: block;\r\n    float: right;\r\n    height: 24px;\r\n    background-size: contain;\r\n    text-align: right;\r\n    outline: none;\r\n}\r\n.lb-closeContainer .lb-close:hover {\r\n    cursor: pointer;\r\n    opacity: 1;\r\n}\r\n<\/style><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Lightbox(\u30d0\u30fc\u30b8\u30e7\u30f32.7.1)\u3067\u753b\u50cf\u62e1\u5927\u6642\u306b\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306e\u4f4d\u7f6e\u3092\u53f3\u4e0b\u304b ... <\/p>\n","protected":false},"author":1,"featured_media":1071,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-3479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-javascript"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t