{"id":5502,"date":"2016-02-03T11:47:39","date_gmt":"2016-02-03T19:47:39","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=5502"},"modified":"2019-09-15T11:53:36","modified_gmt":"2019-09-15T18:53:36","slug":"jquery-lightgallery","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/jquery-lightgallery.html","title":{"rendered":"jQuery lightGallery"},"content":{"rendered":"<p>[lightgallery]<br \/>\n<em>Sometimes I want to embed a gallery inside a bootstrap collapsible paragraph, but Fotorama doesn&#8217;t work inside bootstrap collapsible shortcodes. I stumbled into this great <a href=\"\/\/sachinchoolur.github.io\/lightGallery\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery lightGallery<\/a> and I manage to get it to work inside the bootstrap collapsible shortcodes. To extensively use this lightGallery, you do need support from the owner. I just use this for simple Gallery display.<\/em><\/p>\n<p style=\"text-align: left;\"><em>Since I don&#8217;t want to load too many scripts on my website, they tend to slow down the page load, so I create shortcodes to load these lightGallery scripts and use them only when needed.<\/em><\/p>\n<p>[lgallery]<a href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/bs_lighgallery.jpg\" rel=\"attachment wp-att-5522\" data-sub-html=\"Youtube Karaoke.\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5522 size-thumbnail aligncenter\" title=\"lightgallery\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/bs_lighgallery-200x112.jpg\" alt=\"bs_lighgallery\" width=\"200\" height=\"112\" data-sub-html=\"Youtube Karaoke.\" \/><\/a>[\/lgallery]<\/p>\n<p style=\"text-align: center;\"><button class=\"w3-button w3-red w3-round-xlarge\">this is my gallery inside collapsible post<\/button><\/p>\n<p><!--nextpage--><\/p>\n<p>[lightgallery]<br \/>\n[lgallery]<a href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/12\/z_karaoke.jpg\" rel=\"attachment wp-att-5297\" data-sub-html=\"Youtube Karaoke.\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5297\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/12\/z_karaoke-200x112.jpg\" alt=\"z_karaoke\" width=\"200\" height=\"112\" srcset=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/12\/z_karaoke-200x112.jpg 200w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/12\/z_karaoke-300x169.jpg 300w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/12\/z_karaoke.jpg 600w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a> <a href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/10\/z_x360_minipcie.jpg\" rel=\"attachment wp-att-5229\" data-sub-html=\" Mini Wifi PCIe For OS X.\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5229\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/10\/z_x360_minipcie-200x112.jpg\" alt=\"z_x360_minipcie\" width=\"200\" height=\"112\" \/><\/a> <a href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney134-1024x576.jpg\" rel=\"attachment wp-att-5519\" data-sub-html=\"1024x Picture\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5519\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney134-1024x576-200x112.jpg\" alt=\"13disney134-1024x576\" width=\"200\" height=\"112\" srcset=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney134-1024x576-200x112.jpg 200w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney134-1024x576-300x169.jpg 300w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney134-1024x576-768x432.jpg 768w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney134-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a>\u00a0<a href=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney106-1024x576.jpg\" rel=\"attachment wp-att-5516\" data-sub-html=\"1024x Picture\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-5516\" src=\"\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney106-1024x576-200x112.jpg\" alt=\"13disney106-1024x576\" width=\"200\" height=\"112\" srcset=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney106-1024x576-200x112.jpg 200w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney106-1024x576-300x169.jpg 300w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney106-1024x576-768x432.jpg 768w, https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2016\/02\/13disney106-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a>[\/lgallery]<br \/>\n<em>For this demo page &#8211;<\/em><\/p>\n<blockquote><p>-shortcode for bootstrap collapsible scripts<\/p>\n<p>-shortcode for lightGallery scripts<\/p>\n<p>&lt;div id=&#8221;lightgallery&#8221; class=&#8221;list-unstyled row&#8221;&gt;<\/p>\n<p>-Images with thumbnails &#8211; I made thumbnails as small as possible.<\/p>\n<p>-use\u00a0data-sub-html=&#8221;<br \/>\n&amp;lt;p&amp;gt;this is the title.&amp;lt;\/p&amp;gt;<br \/>\n&amp;lt;p&amp;gt;&#8221; after the href= for caption.<\/p>\n<p>&lt;\/div&gt;<\/p>\n<p>-close bootstrap collapsible shortcode<\/p><\/blockquote>\n<p style=\"text-align: center;\"><button class=\"w3-button w3-red w3-round-xlarge\">shortcode for lightGallery<\/button><\/p>\n<ul>\n<li style=\"text-align: left;\"><em>Create a lightgallery.php for shortcode<\/em><\/li>\n<\/ul>\n<blockquote>\n<p style=\"text-align: left;\">\u00a0&lt;?php<br \/>\nadd_shortcode( &#8216;mygallery&#8217;, &#8216;mygalleryscript&#8217; );<br \/>\nfunction mygalleryscript() {<br \/>\nreturn<br \/>\n&#8216;&lt;link href=&#8221;\/idogjs\/lightGallery\/dist\/css\/lightgallery.css&#8221; rel=&#8221;stylesheet&#8221;&gt;&lt;script src=&#8221;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lightgallery.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lg-fullscreen.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lg-thumbnail.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lg-autoplay.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lg-zoom.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lg-hash.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/lg-pager.js&#8221;&gt;&lt;\/script&gt;&lt;script src=&#8221;\/idogjs\/lightGallery\/lib\/jquery.mousewheel.min.js&#8221;&gt;&lt;\/script&gt;&lt;script type=&#8221;text\/javascript&#8221;&gt;<br \/>\nvar $jG=jQuery.noConflict();<br \/>\n$jG(document).ready(function(){<br \/>\n});<br \/>\n&lt;\/script&gt;<br \/>\n&lt;script src=&#8221;\/idogjs\/lightGallery\/dist\/js\/idogGallery.js&#8221;&gt;&lt;\/script&gt;&#8217;<br \/>\n; }<\/p>\n<\/blockquote>\n<ul>\n<li><em>Include in theme function.php<\/em><\/li>\n<\/ul>\n<blockquote>\n<p style=\"text-align: left;\">include &#8216;lightgallery.php&#8217;;<\/p>\n<\/blockquote>\n<ul>\n<li style=\"text-align: left;\"><em>Make sure all the scripts are in the correct folder url.<\/em><\/li>\n<\/ul>\n<ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>[lightgallery] Sometimes I want to embed a gallery inside a bootstrap collapsible paragraph, but Fotorama doesn&#8217;t work inside bootstrap collapsible shortcodes. I stumbled into this great jQuery lightGallery and I manage to get it to work inside the bootstrap collapsible shortcodes. To extensively use this lightGallery, you do need support from the owner. I just <a href=\"https:\/\/www.dognmonkey.com\/techs\/jquery-lightgallery.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288,807,20],"tags":[799,805,806],"class_list":["post-5502","post","type-post","status-publish","format-standard","hentry","category-css-wordpress","category-scripts","category-wordpress","tag-bootstrap-collapsible","tag-jquery-lightgallery","tag-lightgallery"],"views":393,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/5502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=5502"}],"version-history":[{"count":4,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/5502\/revisions"}],"predecessor-version":[{"id":7224,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/5502\/revisions\/7224"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=5502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=5502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=5502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}