{"id":1441,"date":"2011-08-27T10:50:32","date_gmt":"2011-08-27T17:50:32","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=8"},"modified":"2019-10-03T17:27:05","modified_gmt":"2019-10-04T00:27:05","slug":"shadowbox","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/shadowbox.html","title":{"rendered":"ShadowBox For WordPress"},"content":{"rendered":"<p>[shadowbox]<\/p>\n<p style=\"text-align: center;\"><em><button class=\"w3-button w3-red w3-round-xlarge\"> This plug-in no longer work on our website<\/button><\/em><\/p>\n<blockquote>\n<p style=\"text-align: center;\">2012-09-23 <em>For users\u00a0who still use ie (internet explorer)\u00a0to access your page, make sure to\u00a0force them to disable (turn off) the compatibility or\u00a0shadowbox\u00a0won&#8217;t\u00a0work. Add this to your header.php.<\/em><\/p>\n<pre id=\"line1\">&lt;meta http-equiv=\"<a>X-UA-Compatible<\/a>\" content=\"<a>IE=9; IE=8; IE=7; IE=EDGE<\/a>\" \/&gt;<\/pre>\n<\/blockquote>\n<p style=\"text-align: center;\"><em><a title=\"shadowbox 3.0.3\" href=\"\/\/www.shadowbox-js.com\/download.html\" target=\"_blank\" rel=\"noopener noreferrer\">Shadowbox <\/a>is a very popular pop up plugin. Some of the options need to be modified for it to work with everything. For WordPress, I just load the scripts by adding these lines just before the &lt;\/head&gt; of the theme&#8217;s header.php.<\/em><\/p>\n<blockquote>\n<p style=\"text-align: left;\">&lt;!&#8211;Start Shadowbox&#8211;&gt; &lt;script src=&#8221;&lt;?php bloginfo(&#8216;template_url&#8217;); ?&gt;\/pops\/shadowbox\/shadowbox.js&#8221; type=&#8221;text\/javascript&#8221;&gt;&lt;\/script&gt; &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221; media=&#8221;all&#8221; href=&#8221;&lt;?php bloginfo(&#8216;template_url&#8217;); ?&gt;\/pops\/shadowbox\/shadowbox.css&#8221; \/&gt; &lt;script type=&#8221;text\/javascript&#8221;&gt; Shadowbox.init({ slideshowDelay: 3, animSequence:&#8221;wh&#8221;, })&lt;\/script&gt; &lt;!&#8211;end shadowbox&#8211;&gt;<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\">Images<\/p>\n<p style=\"text-align: center;\"><a class=\"preview\" title=\"full size click here\" href=\"\/media\/teststuff\/sm_cab04_75.JPG\" rel=\"shadowbox[shadow]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline; border: 2px solid black;\" title=\"thumb1\" src=\"\/media\/teststuff\/tn_cab04_75.JPG\" alt=\"full size click here\" width=\"250\" height=\"141\" \/><\/a> <span style=\"font-family: comic sans ms,sans-serif; font-size: small;\"><em><a class=\"preview\" title=\"full size click here\" href=\"\/media\/teststuff\/sm_cab04_76.JPG\" rel=\"shadowbox[shadow]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline; border: 2px solid black;\" title=\"thumb2\" src=\"\/media\/teststuff\/tn_cab04_76.JPG\" alt=\"full size click here\" width=\"250\" height=\"141\" \/><\/a><\/em><\/span><\/p>\n<p style=\"text-align: center;\"><em> <a title=\"html display\" href=\"https:\/\/www.dognmonkey.com\/techs\/\" rel=\"shadowbox[80% 80%]\"><button class=\"w3-button w3-green w3-round-xlarge\">HTML<\/button><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><a title=\"PDF display\" href=\"https:\/\/www.dognmonkey.com\/media\/teststuff\/lockcoding.pdf\" rel=\"shadowbox[80% 80%]\"><em><span style=\"font-family: comic sans ms,sans-serif;\"><button class=\"w3-button w3-blue w3-round-xlarge\">PDF<\/button><\/span><\/em><\/a><\/p>\n<p style=\"text-align: center;\"><em>The best part about shadowbox is the ability to have pop up video players and again using links with (rel=&#8221;shadowbox[80% 80%]&#8221;) script. Since all video players are embeded in the shadowbox plugin, we don&#8217;t have to assign any player. Just need to set the height &amp; width. The default height = 300 and width = 500. We do need to install quicktime, window media player for browsers.<\/em><\/p>\n<p style=\"text-align: center;\"><span style=\"font-family: comic sans ms,sans-serif; font-size: small;\"><em>Youtube<\/em><\/span><\/p>\n<blockquote>\n<p style=\"text-align: center;\"><em>&lt;a title=&#8221;youtube video&#8221; href=&#8221;\/\/www.youtube.com\/v\/s2xAtGz_bNc&amp;fs=1;autoplay=1&#8243; rel=&#8221;shadowbox;height=350;width=560;player=swf&#8221;&gt;&lt;img style=&#8221;vertical-align: baseline; border: 3px solid black;&#8221; title=&#8221;youtube with image link&#8221; src=&#8221;\/media\/teststuff\/tn_cab04_75.JPG&#8221; alt=&#8221;&#8221; width=&#8221;250&#8243; height=&#8221;141&#8243; \/&gt;&lt;\/a&gt; <\/em><\/p>\n<\/blockquote>\n<p><a title=\"youtube video\" href=\"\/\/www.youtube.com\/v\/s2xAtGz_bNc&amp;fs=1;autoplay=1\" rel=\"shadowbox;height=350;width=560;player=swf\"> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"vertical-align: baseline; border: 3px solid black;\" title=\"youtube with image link\" src=\"\/media\/teststuff\/tn_cab04_75.JPG\" alt=\"\" width=\"250\" height=\"141\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>Youtube playlist<\/em><\/p>\n<blockquote>\n<p style=\"text-align: center;\">&lt;a title=&#8221;youtube playlist video&#8221; href=&#8221;\/\/www.youtube.com\/embed?listType=playlist&amp;list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY&#8221; rel=&#8221;shadowbox;height=350;width=600&#8243;&gt; &lt;img style=&#8221;vertical-align: baseline; border: 3px solid black;&#8221; title=&#8221;youtube playlist with image link&#8221; src=&#8221;\/media\/teststuff\/tn_cab04_75.JPG&#8221; alt=&#8221;&#8221; width=&#8221;250&#8243; height=&#8221;141&#8243; \/&gt;&lt;\/a&gt;<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><a title=\"youtube playlist video\" href=\"\/\/www.youtube.com\/embed?listType=playlist&amp;list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY\" rel=\"shadowbox;height=350;width=600\"> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"vertical-align: baseline; border: 3px solid black;\" title=\"youtube playlist with image link\" src=\"\/media\/teststuff\/tn_cab04_75.JPG\" alt=\"\" width=\"250\" height=\"141\" \/><\/a><\/p>\n<p style=\"text-align: center;\">MP4 File<\/p>\n<blockquote>\n<p style=\"text-align: center;\">&lt;a title=&#8221;Play MP4 File&#8221; href=&#8221;\/media\/teststuff\/tasting.mp4&#8243; rel=&#8221;shadowbox&#8221;&gt;&lt;img class=&#8221;aligncenter&#8221; style=&#8221;vertical-align: baseline; border: 3px solid black;&#8221; title=&#8221;MP4 using JWPlayer&#8221; src=&#8221;\/media\/teststuff\/tn_cab04_75.JPG&#8221; alt=&#8221;Play MP4 File&#8221; width=&#8221;250&#8243; height=&#8221;141&#8243; \/&gt;&lt;\/a&gt;<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><a title=\"Play MP4 File\" href=\"\/media\/teststuff\/tasting.mp4\" rel=\"shadowbox\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"vertical-align: baseline; border: 3px solid black;\" title=\"MP4 using JWPlayer\" src=\"\/media\/teststuff\/tn_cab04_75.JPG\" alt=\"Play MP4 File\" width=\"250\" height=\"141\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><em>Since Quicktime player doesn&#8217;t seem to display the size of the controller correctly and fullscreen option is not there, we modified all files played by Quicktime to default JWplayer.<\/em><\/p>\n<blockquote>\n<p style=\"text-align: left;\">var jwControllerHeight=20;S.flv=function(obj,id){this.obj=obj;this.id=id;this.height=obj.height?parseInt(obj.height,10):300;if(S.options.showMovieControls){this.height+=jwControllerHeight}this.width=obj.width?parseInt(obj.width,10):500};S.flv.ext=[<span style=\"background-color: #000000; color: #00ffff;\">&#8220;flv&#8221;,&#8221;m4v&#8221;,&#8221;mp4&#8243;,&#8221;mov&#8221;<\/span>];S.flv.prototype={append:function(body,dims){var tmp=document.createElement(&#8220;div&#8221;);tmp.id=this.id;body.appendChild(tmp);var height=dims.innerHeight,width=dims.innerWidth,swf=S.path+&#8221;player.swf&#8221;,version=S.options.flashVersion,express=S.path+&#8221;expressInstall.swf&#8221;,<\/p>\n<p style=\"text-align: left;\">flashvars=apply({file:this.obj.content,height:height,width:width,autostart:(S.options.autoplayMovies?&#8221;true&#8221;:&#8221;false&#8221;),controlbar:(S.options.showMovieControls?&#8221;bottom&#8221;:&#8221;none&#8221;),backcolor:&#8221;0x000000&#8243;,frontcolor:&#8221;0xCCCCCC&#8221;,lightcolor:&#8221;0x557722&#8243;},S.options.flashVars),params=S.options.flashParams;S.flash.embedSWF(swf,this.id,width,height,version,express,flashvars,params)},remove:function(){S.flash.expressInstallCallback();S.flash.removeSWF(this.id)},onWindowResize:function(){var dims=S.dimensions,el=get(this.id);el.height=dims.innerHeight;el.width=dims.innerWidth}};var qtControllerHeight=16;S.qt=function(obj,id){this.obj=obj;this.id=id;this.height=obj.height?parseInt(obj.height,10):300;if(S.options.showMovieControls){this.height+=qtControllerHeight}this.width=obj.width?parseInt(obj.width,10):500};S.qt.ext=[<span style=\"color: #00ffff; background-color: #000000;\">&#8220;dv&#8221;,&#8221;moov&#8221;,&#8221;movie&#8221;<\/span>];<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\">AVI FILE using <a href=\"\/\/port25.technet.com\/pages\/windows-media-player-firefox-plugin-download.aspx\" target=\"_blank\" rel=\"noopener noreferrer\">WMP PLUGIN for FIREFOX<\/a><\/p>\n<blockquote>\n<p style=\"text-align: center;\">&lt;a title=&#8221;dognmonkey1a1s.wmv File&#8221; href=&#8221;\/media\/teststuff\/a8.wmv&#8221; rel=&#8221;shadowbox[demo]&#8221;&gt;&lt;img style=&#8221;vertical-align: baseline; border: 3px solid black;&#8221; title=&#8221;WMPlayer&#8221; src=&#8221;\/media\/teststuff\/tn_cab04_75.JPG&#8221; alt=&#8221;dognmonkey1a1s.wmv File&#8221; width=&#8221;250&#8243; height=&#8221;141&#8243; \/&gt;<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><em><a title=\"dognmonkey1a1s.wmv File\" href=\"\/media\/teststuff\/a8.wmv\" rel=\"shadowbox[demo]\"><img loading=\"lazy\" decoding=\"async\" style=\"vertical-align: baseline; border: 3px solid black;\" title=\"WMPlayer\" src=\"\/media\/teststuff\/tn_cab04_75.JPG\" alt=\"dognmonkey1a1s.wmv File\" width=\"250\" height=\"141\" \/><\/a><\/em><\/p>\n<p style=\"text-align: center;\"><a title=\"dognmonkey560b.mov File\" href=\"\/media\/teststuff\/a8.mov\" rel=\"shadowbox[demo];height=305;width=560\">MOV FILE<\/a><\/p>\n<blockquote>\n<p style=\"text-align: center;\">&lt;a title=&#8221;dognmonkey560b.mov File&#8221; href=&#8221;\/media\/teststuff\/a8.mov&#8221; rel=&#8221;shadowbox[demo];height=305;width=560&#8243;&gt;<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><em>Google Maps<\/em><\/p>\n<blockquote>\n<p style=\"text-align: center;\">&lt;a title=&#8221;Google Map of Sixflags MarineWorld in CA&#8221; href=&#8221;\/\/maps.google.com\/maps?f=q&amp;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=1001+Fairgrounds+Dr,+Vallejo,+CA&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=51.443116,135.263672&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=1001+Fairgrounds+Dr,+Vallejo,+Solano,+California+94589&amp;amp;ll=38.146168,-122.226076&amp;amp;spn=0.023625,0.036478&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;output=embed&#8221; rel=&#8221;shadowbox&#8221;&gt;Google Map Of Sixflags Marineworld&lt;\/a&gt;<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><a title=\"Google Map of Sixflags MarineWorld in CA\" href=\"\/\/maps.google.com\/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1001+Fairgrounds+Dr,+Vallejo,+CA&amp;sll=37.0625,-95.677068&amp;sspn=51.443116,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=1001+Fairgrounds+Dr,+Vallejo,+Solano,+California+94589&amp;ll=38.146168,-122.226076&amp;spn=0.023625,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed\" rel=\"shadowbox\">Google Map Of Sixflags Marineworld<\/a><\/p>\n<p style=\"text-align: center;\"><strong><em>SHADOWBOX.JS custom mods.<\/em><\/strong><\/p>\n<blockquote>\n<p style=\"text-align: center;\"><em>If we plan to use other pop-ups that use rel=&#8221;lighbox&#8221;, we need to remove all &#8220;lightbox&#8221; in the shadowbox.js. Edit with notepad++ and search for &#8220;^(light|shadow)box&#8221;, replace &#8220;(lightshadowbox)&#8221; with &#8220;(shadow)&#8221; only.<\/em><\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><em>If we want to have shadowbox starts with slideshow as default but at the PAUSE mode, add &#8220;pause&#8221; to these slide timer.<\/em><\/p>\n<blockquote>\n<p style=\"text-align: center;\"><em>var open=false,initialized=false,lastOptions={},slideDelay=0,slideStart,<strong>slideTimer<\/strong>;S.current=-1; (org) to var open=false,initialized=false,lastOptions={},slideDelay=0,slideStart,<strong>slideTimer<\/strong>=<strong>&#8220;pause&#8221;<\/strong>;S.current=-1;<\/em><\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><em>find the first S.close replace slidetimer = &#8220;null&#8221; to slidetimer =&#8221;pause&#8221;<\/em><\/p>\n<blockquote>\n<p style=\"text-align: center;\"><em>S.close=function(){if(!open){return}open=false;if(S.player){S.player.remove();S.player=null}if(typeof slideTimer==&#8221;number&#8221;){clearTimeout(slideTimer);<strong>slideTimer=null<\/strong>}slideDelay=0<\/em><\/p>\n<\/blockquote>\n<p style=\"text-align: center;\">to<\/p>\n<blockquote>\n<p style=\"text-align: center;\">S.close=function(){if(!open){return}open=false;if(S.player){S.player.remove();S.player=null}if(typeof slideTimer==&#8221;number&#8221;){clearTimeout(slideTimer);<em><strong>slideTimer=&#8221;pause&#8221;<\/strong><\/em>}slideDelay=0<\/p>\n<\/blockquote>\n<p style=\"text-align: center;\"><ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[shadowbox] 2012-09-23 For users\u00a0who still use ie (internet explorer)\u00a0to access your page, make sure to\u00a0force them to disable (turn off) the compatibility or\u00a0shadowbox\u00a0won&#8217;t\u00a0work. Add this to your header.php. &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=9; IE=8; IE=7; IE=EDGE&#8221; \/&gt; Shadowbox is a very popular pop up plugin. Some of the options need to be modified for it to work <a href=\"https:\/\/www.dognmonkey.com\/techs\/shadowbox.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":[12],"tags":[174],"class_list":["post-1441","post","type-post","status-publish","format-standard","hentry","category-pop-ups","tag-shadowbox"],"views":18278,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/1441","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=1441"}],"version-history":[{"count":4,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/1441\/revisions"}],"predecessor-version":[{"id":7404,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/1441\/revisions\/7404"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=1441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=1441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}