{"id":10,"date":"2016-11-07T17:20:07","date_gmt":"2016-11-07T22:20:07","guid":{"rendered":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/?page_id=10"},"modified":"2021-08-26T11:27:48","modified_gmt":"2021-08-26T15:27:48","slug":"carousel-lightbox","status":"publish","type":"page","link":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/carousel-lightbox\/","title":{"rendered":"Carousel Lightbox"},"content":{"rendered":"\n<p>The following showcases how the Ultimate Lightbox plugin can be used in conjunction with the Ultimate Slider plugin to create a carousel of images with a lightbox effect.<\/p>\n\n\n<style>.ewd-us-slide .ewd-us-slide-title { font-size: 4.25rem !important; }.ewd-us-slide .ewd-us-slide-excerpt { font-size: 2rem !important; }.ewd-us-slider .ewd-us-nav-arrow .ewd-us-slider-icon { color: #ffffff !important; }.ewd-us-slider .ewd-us-nav-arrow .ewd-us-slider-icon { line-height: 1.85 !important; }.ewd-us-slider .ewd-us-nav-arrow .ewd-us-arrow-div { background: #974799 !important; }<\/style><div class=\"clear\"><\/div>\n<div class=\"ewd-us-slider-section\">\n\n\t<div  class=\"ewd-us-slider ewd-us-slider-slide-indicators-dots ewd-us-slider-mobile-hide-body ewd-us-slider-mobile-hide-buttons\" >\n\n\t\t\n\t\t<ul class=\"ewd-us-slider-window\">\n\t\t\n\t\t\t\n<li  class=\"ewd-us-slide ewd-ulb-lightbox\" id=\"ewd-us-slide-0\" data-ulbsource=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/escalator.jpg\" data-ulbtitle=\"CLICK FOR LIGHTBOX\" data-ulbdescription=\"&lt;p&gt;This is an example of how the lightbox works with a slider image. Click the image to open the lightbox.&lt;\/p&gt;\n\" >\n\t\t\t\t\n\t<img decoding=\"async\" src=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/escalator.jpg\">\n\t<div class=\"ewd-us-slide-text\">\n\t\t\n\t\t<div class=\"ewd-us-slide-title\">CLICK FOR LIGHTBOX<\/div>\n\t\t<div class=\"clear\"><\/div>\n\t\t\n\t\t<div class=\"ewd-us-slide-excerpt\"><p>This is an example of how the lightbox works with a slider image. Click the image to open the lightbox.<\/p>\n<\/div>\n\t\t<div class=\"clear\"><\/div>\n\n\t\t<ul class=\"ewd-us-slide-buttons\">\n\n\t\t\t\n\t\t<\/ul>\n\t\n\t<\/div> \n\n\t\n\t<\/li>\n<li  class=\"ewd-us-slide ewd-us-hidden ewd-ulb-lightbox\" id=\"ewd-us-slide-1\" data-ulbsource=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/golden.jpg\" data-ulbtitle=\"ULTIMATE LIGHTBOX\" data-ulbdescription=\"&lt;p&gt;Add a responsive lightbox to any or every image on your site simply by clicking on a checkbox on the plugin&#8217;s options page.&lt;\/p&gt;\n\" >\n\t\t\t\t\n\t<img decoding=\"async\" src=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/golden.jpg\">\n\t<div class=\"ewd-us-slide-text\">\n\t\t\n\t\t<div class=\"ewd-us-slide-title\">ULTIMATE LIGHTBOX<\/div>\n\t\t<div class=\"clear\"><\/div>\n\t\t\n\t\t<div class=\"ewd-us-slide-excerpt\"><p>Add a responsive lightbox to any or every image on your site simply by clicking on a checkbox on the plugin&#8217;s options page.<\/p>\n<\/div>\n\t\t<div class=\"clear\"><\/div>\n\n\t\t<ul class=\"ewd-us-slide-buttons\">\n\n\t\t\t\n\t\t<\/ul>\n\t\n\t<\/div> \n\n\t\n\t<\/li>\n<li  class=\"ewd-us-slide ewd-us-hidden ewd-ulb-lightbox\" id=\"ewd-us-slide-2\" data-ulbsource=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/cityscape.jpg\" data-ulbtitle=\"Lightbox in Slider\" data-ulbdescription=\"&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet vulputate dui. Nam posuere accumsan consectetur.&lt;\/p&gt;\n\" >\n\t\t\t\t\n\t<img decoding=\"async\" src=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/cityscape.jpg\">\n\t<div class=\"ewd-us-slide-text\">\n\t\t\n\t\t<div class=\"ewd-us-slide-title\">Lightbox in Slider<\/div>\n\t\t<div class=\"clear\"><\/div>\n\t\t\n\t\t<div class=\"ewd-us-slide-excerpt\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet vulputate dui. Nam posuere accumsan consectetur.<\/p>\n<\/div>\n\t\t<div class=\"clear\"><\/div>\n\n\t\t<ul class=\"ewd-us-slide-buttons\">\n\n\t\t\t\n\t\t<\/ul>\n\t\n\t<\/div> \n\n\t\n\t<\/li>\n<li  class=\"ewd-us-slide ewd-us-hidden ewd-ulb-lightbox\" id=\"ewd-us-slide-3\" data-ulbsource=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/mountains.jpg\" data-ulbtitle=\"A Fourth Slide\" data-ulbdescription=\"&lt;p&gt;This is a fourth slide to showcase in the Carousel&lt;\/p&gt;\n\" >\n\t\t\t\t\n\t<img decoding=\"async\" src=\"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-content\/uploads\/2016\/11\/mountains.jpg\">\n\t<div class=\"ewd-us-slide-text\">\n\t\t\n\t\t<div class=\"ewd-us-slide-title\">A Fourth Slide<\/div>\n\t\t<div class=\"clear\"><\/div>\n\t\t\n\t\t<div class=\"ewd-us-slide-excerpt\"><p>This is a fourth slide to showcase in the Carousel<\/p>\n<\/div>\n\t\t<div class=\"clear\"><\/div>\n\n\t\t<ul class=\"ewd-us-slide-buttons\">\n\n\t\t\t\n\t\t<\/ul>\n\t\n\t<\/div> \n\n\t\n\t<\/li>\t\n\t\t<\/ul>\n\n\t\t<div class=\"ewd-us-nav-arrow\" id=\"left\">\n\t<div class=\"ewd-us-arrow-div ewd-us-arrow-background-shape-circle\">\n\t\t<div class=\"ewd-us-slider-icon ewd-us-arrow\" id=\"left\">g<\/div>\n\t<\/div>\n<\/div>\n\n<div class=\"ewd-us-nav-arrow\" id=\"right\">\n\t<div class=\"ewd-us-arrow-div ewd-us-arrow-background-shape-circle\">\n\t\t<div class=\"ewd-us-slider-icon ewd-us-arrow\"  id=\"right\">h<\/div>\n\t<\/div>\n<\/div>\n\t<\/div>\n\n\t<div class=\"ewd-us-slider-control\" id=\"\">\n\t<div class=\"ewd-us-slider-control-button-list\"><\/div>\n<\/div>\n\n<\/div>\n\n<div class=\"clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>The following showcases how the Ultimate Lightbox plugin can be used in conjunction with the Ultimate Slider plugin to create a carousel of images with a lightbox effect.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":10,"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/pages\/10\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/www.etoilewebdesign.com\/ultimate-lightbox\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}