{"id":388,"date":"2022-11-05T00:08:00","date_gmt":"2022-11-05T00:08:00","guid":{"rendered":"https:\/\/dornsife.usc.edu\/components\/?page_id=388"},"modified":"2022-12-15T01:12:25","modified_gmt":"2022-12-15T01:12:25","slug":"modal-image-gallery","status":"publish","type":"page","link":"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/","title":{"rendered":"Modal Image Gallery"},"content":{"rendered":"  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--spacer \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--spacer\"\n    \n      >\n\n    \n\n  <\/div><\/div>\n\n\n\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--rich-text \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--rich-text\"\n    \n      >\n\n    \n      \n<div class=\"f--field f--wysiwyg\">\n\n    \n  <p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-466\" src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-1.jpg\" alt=\"\" width=\"960\" height=\"540\" srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-1.jpg 960w, https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-1-300x169.jpg 300w, https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-1-768x432.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<hr \/>\n<p>Minimum upload image: 1500 x any H<\/p>\n<p>&nbsp;<\/p>\n\n\n\n<\/div>\n\n\n  <\/div><\/div>\n\n\n\n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--rich-text \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--rich-text\"\n    \n      >\n\n    \n      \n<div class=\"f--field f--wysiwyg\">\n\n    \n  <h2>How to Video<\/h2>\n<div class=\"video-embed\"><iframe loading=\"lazy\" title=\"Modal Image Gallery\" src=\"https:\/\/player.vimeo.com\/video\/778310388?h=49c7035277&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"273\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/div>\n\n\n\n<\/div>\n\n\n  <\/div><\/div>\n\n\n\n\n\n            \n\n  \n    \n\n\n\n\n\n\n<div\n  class=\"cc--component-container cc--modal-image-gallery \"\n\n  \n  \n  \n  \n  \n  \n  >\n  <div class=\"c--component c--modal-image-gallery\"\n    \n      >\n\n    \n  <div class=\"inner-wrapper\">\n\n      <div class=\"text-container\">\n                  \n<div class=\"f--field f--section-title\">\n\n    \n  <h2>\n          Modal Image Gallery\n      <\/h2>\n\n\n<\/div>\n      \n                  \n<div class=\"f--field f--description\">\n\n    \n  <p><span style=\"font-weight: 400;\">Clicking on expand icon opens the Modal lightbox above the screen with Slides. When only one image slide is added, lightbox doesn\u2019t have navigation arrows. When more than one image slide is added , navigation arrows appear and allow user to switch between slides.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Like the Photo Wall but less splashy and accommodating fewer or more images, this experience is designed for a series of related images that reveal captions on expand. Title and Description let you frame the theme. <\/span><\/p>\n\n\n\n<\/div>\n          <\/div>\n  \n      <div class=\"image-container\">\n          \n<div class=\"f--field f--image\">\n\n    \n    \n    \n    \n    \n    \n              \n      <img\n                            data-src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-768x432.jpg\"\n          data-srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-1280x720.jpg 1280w,https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/modal_img_gallery-768x432.jpg 768w\"          data-sizes=\"(min-width:1200px) 75vw, (min-width:768px) 83vw, 100vw\"          class=\"lazyload\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n  \n\n<\/div>\n\n              <a href=\"#gallery-976754008\" class=\"gallery-trigger\">\n          <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000000\" d=\"M28,7v7.9h-2.6l0-3.4l-4.3,4.3c-0.3,0.3-0.6,0.4-0.9,0.4s-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.3,0-1.9l4.3-4.3h-3.4V7H28z M7,28v-7.9h2.6v3.4l4.3-4.3c0.5-0.5,1.3-0.5,1.9,0c0.5,0.5,0.5,1.3,0,1.9l-4.3,4.3h3.4V28H7z\"\/><\/svg>\n          Light Box &#8211; Image Gallery\n        <\/a>\n          <\/div>\n    \n      <div id=\"gallery-976754008\" class=\"gallery-container lity-hide\">\n\n      <div class=\"swiper images\">\n        <div class=\"swiper-wrapper\">\n                                    <div class=\"swiper-slide\">\n                                      \n<div class=\"f--field f--image\">\n\n    \n    \n    \n    \n    \n    \n              \n      <img\n                            data-src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-19-4-55-11-am-768x432.jpg\"\n          data-srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-19-4-55-11-am-1280x720.jpg 1280w,https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-19-4-55-11-am-768x432.jpg 768w\"          data-sizes=\"(min-width:1200px) 75vw, (min-width:768px) 83vw, 100vw\"          class=\"lazyload\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n  \n\n<\/div>\n                              <\/div>\n                                                <div class=\"swiper-slide\">\n                                      \n<div class=\"f--field f--image\">\n\n    \n    \n    \n    \n    \n    \n              \n      <img\n                            data-src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-19-7-23-07-am-768x432.jpg\"\n          data-srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-19-7-23-07-am-1280x720.jpg 1280w,https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-19-7-23-07-am-768x432.jpg 768w\"          data-sizes=\"(min-width:1200px) 75vw, (min-width:768px) 83vw, 100vw\"          class=\"lazyload\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n  \n\n<\/div>\n                              <\/div>\n                                                <div class=\"swiper-slide\">\n                                      \n<div class=\"f--field f--image\">\n\n    \n    \n    \n    \n    \n    \n              \n      <img\n                            data-src=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-21-8-09-32-am-768x432.jpg\"\n          data-srcset=\"https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-21-8-09-32-am-1280x720.jpg 1280w,https:\/\/dornsife.usc.edu\/components\/wp-content\/uploads\/sites\/33\/2022\/11\/photo-may-21-8-09-32-am-768x432.jpg 768w\"          data-sizes=\"(min-width:1200px) 75vw, (min-width:768px) 83vw, 100vw\"          class=\"lazyload\"\n        \n                  role=\"none\"\n        \n        \n                                      \/>\n\n    \n    \n  \n  \n\n<\/div>\n                              <\/div>\n                              <\/div>\n      <\/div>\n\n      <div class=\"swiper captions\">\n        <div class=\"controls-container\">\n          <button class=\"button-prev\" aria-label=\"Previous Image\">\n            <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n            x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\">\n            <polygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#FFF\" points=\"15.7,27.5 5.7,17.5 \n            15.7,7.5 18.7,10.4 13.6,15.4 28.3,15.4 28.3,19.6 13.6,19.6 18.7,24.6 \"\/>\n            <\/svg>\n          <\/button>\n          <button class=\"button-next\" aria-label=\"Next Image\">\n            <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\n\t x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" xml:space=\"preserve\"><polygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#FFF\" points=\"19.3,27.5 29.3,17.5 \n\t19.3,7.5 16.3,10.4 21.4,15.4 6.7,15.4 6.7,19.6 21.4,19.6 16.3,24.6 \"\/>\n<\/svg>\n\n          <\/button>\n        <\/div>\n\n        <div class=\"swiper-wrapper\">\n                                    <div class=\"swiper-slide\">\n                                  <div class=\"slide-caption\">\n                        \n<div class=\"f--field f--description\">\n\n    \n  <p>Italy maymester<\/p>\n\n\n\n<\/div>\n                  <\/div>\n                              <\/div>\n                                                <div class=\"swiper-slide\">\n                                  <div class=\"slide-caption\">\n                        \n<div class=\"f--field f--description\">\n\n    \n  <p>Italy maymester<\/p>\n\n\n\n<\/div>\n                  <\/div>\n                              <\/div>\n                                                <div class=\"swiper-slide\">\n                                  <div class=\"slide-caption\">\n                        \n<div class=\"f--field f--description\">\n\n    \n  <p>italy maymester<\/p>\n\n\n\n<\/div>\n                  <\/div>\n                              <\/div>\n                              <\/div>\n\n      <\/div>\n\n\n    <\/div>\n  \n  <\/div>\n\n\n  <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-388","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Modal Image Gallery - Wordpress CMS Components<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modal Image Gallery - Wordpress CMS Components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress CMS Components\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-15T01:12:25+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/\",\"url\":\"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/\",\"name\":\"Modal Image Gallery - Wordpress CMS Components\",\"isPartOf\":{\"@id\":\"https:\/\/dornsife.usc.edu\/components\/#website\"},\"datePublished\":\"2022-11-05T00:08:00+00:00\",\"dateModified\":\"2022-12-15T01:12:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dornsife.usc.edu\/components\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modal Image Gallery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dornsife.usc.edu\/components\/#website\",\"url\":\"https:\/\/dornsife.usc.edu\/components\/\",\"name\":\"Wordpress CMS Components\",\"description\":\"CMS components\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dornsife.usc.edu\/components\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Modal Image Gallery - Wordpress CMS Components","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Modal Image Gallery - Wordpress CMS Components","og_url":"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/","og_site_name":"Wordpress CMS Components","article_modified_time":"2022-12-15T01:12:25+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/","url":"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/","name":"Modal Image Gallery - Wordpress CMS Components","isPartOf":{"@id":"https:\/\/dornsife.usc.edu\/components\/#website"},"datePublished":"2022-11-05T00:08:00+00:00","dateModified":"2022-12-15T01:12:25+00:00","breadcrumb":{"@id":"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dornsife.usc.edu\/components\/modal-image-gallery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dornsife.usc.edu\/components\/"},{"@type":"ListItem","position":2,"name":"Modal Image Gallery"}]},{"@type":"WebSite","@id":"https:\/\/dornsife.usc.edu\/components\/#website","url":"https:\/\/dornsife.usc.edu\/components\/","name":"Wordpress CMS Components","description":"CMS components","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dornsife.usc.edu\/components\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/comments?post=388"}],"version-history":[{"count":22,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/388\/revisions"}],"predecessor-version":[{"id":2004,"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/pages\/388\/revisions\/2004"}],"wp:attachment":[{"href":"https:\/\/dornsife.usc.edu\/components\/wp-json\/wp\/v2\/media?parent=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}