{"id":2037,"date":"2014-05-27T19:16:00","date_gmt":"2014-05-28T00:16:00","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=2037"},"modified":"2016-05-29T15:39:10","modified_gmt":"2016-05-29T15:39:10","slug":"responsive-lightbox","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/renew-1\/shortcodes\/responsive-lightbox\/","title":{"rendered":"Responsive Lightbox"},"content":{"rendered":"<p>Since responsive is so important, we wanted to carry over the responsive functionality to every possible part of this theme. Fortunate for you, this included the amazing iLightBox software. A $13 value, iLightBox ensures that your lightbox images look great (and respond) on all devices. It is included for free with your purchase of X.<\/p>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Horizontal With Thumbnails<\/span><\/h2>\n<ul  class=\"x-block-grid two-up\" >\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-1.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-1.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-1.jpg\" alt=\"Example\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-2.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-2.jpg\" alt=\"Example\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-3.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-3.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-3.jpg\" alt=\"Example\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-4.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-4.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-4.jpg\" alt=\"Example\"><\/a><\/li>\n<\/ul>\n<span id=\"x-lightbox-1\" data-x-element=\"lightbox\" data-x-params=\"{&quot;selector&quot;:&quot;.my-portfolio&quot;,&quot;deeplink&quot;:true,&quot;opacity&quot;:&quot;0.875&quot;,&quot;prevScale&quot;:&quot;0.75&quot;,&quot;prevOpacity&quot;:&quot;0.75&quot;,&quot;nextScale&quot;:&quot;0.75&quot;,&quot;nextOpacity&quot;:&quot;0.75&quot;,&quot;orientation&quot;:&quot;horizontal&quot;,&quot;thumbnails&quot;:true}\" ><\/span>\n<pre  class=\"x-code\" ><code>[block_grid type=\"two-up\"] [block_grid_item] [image class=\"my-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [block_grid_item] [image class=\"my-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [block_grid_item] [image class=\"my-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [block_grid_item] [image class=\"my-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [\/block_grid]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[lightbox selector=\".my-portfolio\" deeplink=\"true\" opacity=\"0.875\" prev_scale=\"0.75\" prev_opacity=\"0.75\" next_scale=\"0.75\" next_opacity=\"0.75\" orientation=\"horizontal\" thumbnails=\"true\"]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Vertical Without Thumbnails<\/span><\/h2>\n<ul  class=\"x-block-grid two-up\" >\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-second-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-1.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-1.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-1.jpg\" alt=\"Example\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-second-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-2.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-2.jpg\" alt=\"Example\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-second-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-3.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-3.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-3.jpg\" alt=\"Example\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img my-second-portfolio x-img-link x-img-thumbnail\"  href=\"\/\/theme.co\/media\/x-lightbox-example-4.jpg\" title=\"Example Image\"    data-options=\"thumbnail: '\/\/theme.co\/media\/x-lightbox-example-4.jpg'\"><img src=\"\/\/theme.co\/media\/x-lightbox-example-4.jpg\" alt=\"Example\"><\/a><\/li>\n<\/ul>\n<span id=\"x-lightbox-2\" data-x-element=\"lightbox\" data-x-params=\"{&quot;selector&quot;:&quot;.my-second-portfolio&quot;,&quot;deeplink&quot;:true,&quot;opacity&quot;:&quot;0.875&quot;,&quot;prevScale&quot;:&quot;0.75&quot;,&quot;prevOpacity&quot;:&quot;0.75&quot;,&quot;nextScale&quot;:&quot;0.75&quot;,&quot;nextOpacity&quot;:&quot;0.75&quot;,&quot;orientation&quot;:&quot;vertical&quot;,&quot;thumbnails&quot;:false}\" ><\/span>\n<pre  class=\"x-code\" ><code>[block_grid type=\"two-up\"] [block_grid_item] [image class=\"my-second-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [block_grid_item] [image class=\"my-second-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [block_grid_item] [image class=\"my-second-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [block_grid_item] [image class=\"my-second-portfolio\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Example\" type=\"thumbnail\" link=\"true\" href=\"https:\/\/yourdomain.com\/image.jpg\" title=\"Example Image\"] [\/block_grid_item] [\/block_grid]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[lightbox selector=\".my-second-portfolio\" deeplink=\"true\" opacity=\"0.875\" prev_scale=\"0.75\" prev_opacity=\"0.75\" next_scale=\"0.75\" next_opacity=\"0.75\" orientation=\"vertical\" thumbnails=\"false\"]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>selector<\/strong>: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, &#8220;my-lightbox.&#8221; Next, you would simply write &#8220;.my-lightbox&#8221; in this field (the included period denotes a class selection).<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>deeplink<\/strong>: set to &#8220;true&#8221; to allow for deeplinking. Deeplinking provides direct individual links to each lightbox image.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>opacity<\/strong>: opacity of the background. Acceptable values rage anywhere between 0 and 1.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>prev_scale<\/strong>: the scale of the previous image. Acceptable values range anywhere between 0 and 1.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>prev_opacity<\/strong>: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>next_scale<\/strong>: the scale of the next image. Acceptable values range anywhere between 0 and 1.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>next_opacity<\/strong>: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>orientation<\/strong>: &#8220;horizontal,&#8221; or &#8220;vertical.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>thumbnails<\/strong>: set to &#8220;true&#8221; to allow thumbnail navigation.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Since responsive is so important, we wanted to carry over the responsive functionality to every possible part of this theme. Fortunate for you, this included the amazing iLightBox software. A $13 value, iLightBox ensures that your lightbox images look great (and respond) on all devices. It is included for free with your purchase of X.<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/2037"}],"collection":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/comments?post=2037"}],"version-history":[{"count":2,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/2037\/revisions"}],"predecessor-version":[{"id":7781,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/2037\/revisions\/7781"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/media?parent=2037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}