7-page-content edit

slideshow-research  edit

Flexbox slideshow for Research section

Slideshow Page

Because it takes a research university.

We're called the College of William & Mary, but we're actually a university, making our share of a university's contributions to the creation of knowledge — research and scholarship.

A research university holds a myriad of projects and relationships — large, small and in-between. Like these... Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency. We're big enough to contribute effectively to many of the solutions of problems at national and global levels, yet small enough to keep overhead costs from ballooning.

Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency. We're big enough to contribute effectively to many of the solutions of problems at national and global levels, yet small enough to keep overhead costs from ballooning.

Copy
Edit
<!-- components/7-page-content/slideshow-research.php --> <?php outputElement("header", "Slideshow Page", "Because it takes a research university."); ?> <?php outputMenu("page-nav"); ?> <div id="research-gallery" class="flexslider"> <ul class="slides"> <li> <a href="" style="background-image:url('<?php echo $asset_url; ?>/slideshow/financial-report-president-katherine-rowe-by-eric-lusher.jpg');" /> <div class="research-gallery-caption"> <a href=""> <span class="research-gallery-title">Thinking Forward</span> <br /> <span class="research-gallery-caption-text">Research &amp; Scholarship. “A vibrant community enriched by diverse perspectives is essential for William &amp; Mary to cultivate leaders who will thrive in a rapidly changing world.”</span> </a> </div> </li> <li> <a href="/about/administration/senioradmin/financeadministration/financeoffice/financialinfo/financialreport/philanthropy/index" style="background-image:url('<?php echo $asset_url; ?>/slideshow/financial-report-phone-and-night-sky.jpg');" /> <div class="research-gallery-caption"> <a href="/about/administration/senioradmin/financeadministration/financeoffice/financialinfo/financialreport/philanthropy/index"> <span class="research-gallery-title">Philanthropy</span> <br /> <span class="research-gallery-caption-text">Bold. It's who we are, what we do and the way we give. It's the impact we are making on William &amp; Mary.</span> </a> </div> </li> <li> <a href="/about/administration/senioradmin/financeadministration/financeoffice/financialinfo/financialreport/financialoverview/index" style="background-image:url('<?php echo $asset_url; ?>/slideshow/financial-report-crim-dell-bridge.jpg');" /> <div class="research-gallery-caption"> <a href="/about/administration/senioradmin/financeadministration/financeoffice/financialinfo/financialreport/financialoverview/index"> <span class="research-gallery-title">Financial Overview &amp; Performance</span> <br /> <span class="research-gallery-caption-text">The William &amp; Mary endowment is at its highest ever at $962.2 million.</span> </a> </div> </li> </ul> <div id="research-gallery-caption-container"></div> </div> <script type="text/javascript"> var wmSlideshowRandomize = false; </script> <p>We're called the College of William &amp; Mary, but we're actually a university, making our share of a university's contributions to the creation of knowledge — research and scholarship.</p> <p><a href="points-of-pride/index.php" title="A Research University - Points of (research) pride"> <img alt="A research university holds a myriad of projects and relationships — large, small and in-between. Like these..." class="rightwithcaption" height="150" src="<?php echo $asset_url; ?>/research/_images/pride-points-click.png" width="240"> </a>Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency. We're big enough to contribute effectively to many of the solutions of problems at national and global levels, yet small enough to keep overhead costs from ballooning.</p> <p>Our research culture places an emphasis on quality, selectivity and innovation. Our size fosters both collaboration and efficiency. We're big enough to contribute effectively to many of the solutions of problems at national and global levels, yet small enough to keep overhead costs from ballooning.</p> <!-- local slideshow script is in wm/atomic-foot.php -->
Copy
Copy
Edit
/* scss/7-page-content/_slideshow-research.scss */ #research-gallery { position: relative; /* width: 100%; width: calc(100% - 5px); */ /* right: 20px; */ padding: 20px 0px 30px 0px; margin-bottom: 2em; margin-top: 0; /* background: linear-gradient(to bottom, #ffffff 85%, #efefef 100%);*/ } /* end add */ #research-gallery .slides { overflow: hidden; margin: 0; } #research-gallery .slides, #research-gallery .slides li a { height: 265px; } #research-gallery .slides li a { background-size: cover; width: 100%; display: block; background-position: center center; } #research-gallery { .slide-move { transform: scale(1.1); transition-property: transform; transition-duration: 8s !important; -webkit-backface-visibility: hidden; } .top-left { transform-origin: top left; } .bottom-left { transform-origin: bottom left; } .top-right { transform-origin: top right; } .bottom-right { transform-origin: bottom right; } .top-center { transform-origin: top center; } .bottom-center { transform-origin: bottom center; } .center-right { transform-origin: center right; } .center-left { transform-origin: center left; } .center-center { transform-origin: center center; } } #research-gallery-caption-container { margin-top: 10px; } .research-gallery-title, .research-gallery-caption-text { display: inline-block; } .research-gallery-title { color: var(--color-webgold-75); font-weight: bold; font-size: 21px; margin-top: 5px; } .research-gallery-title:hover { text-decoration: underline; } .research-gallery-caption-text { font-weight: normal; color: #000000; font-size: 14px; line-height: 1.4em; margin-top: 5px; } .research-gallery-caption { display: none; } #research-gallery .flex-direction-nav { height: 35px; margin-top: 40px !important; } #research-gallery .flex-direction-nav a { color: var(--color-wmgreen-90); margin: 0; top: auto; height: 72px; bottom: 15px; width: 49.5%; } #research-gallery .flex-direction-nav a:after { content: ""; position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 72px; background-color: var(--color-wmsilver-0); z-index: -1; } #research-gallery .flex-direction-nav a:hover:after { background-color: var(--color-wmsilver-15); } #research-gallery .flex-direction-nav a:before { line-height: 71px; font-size: 27px; } #research-gallery .flex-direction-nav .flex-prev { left: 0; } #research-gallery .flex-direction-nav .flex-next { right: 0; } @media only screen and (min-width: 510px) { #research-gallery .slides, #research-gallery .slides li a { height: 305px; } } @media screen and (min-width: 650px) { #research-gallery .slides, #research-gallery .slides li a { height: 380px; } } @media screen and (min-width: 720px) { .slide-move { transform: scale(1.05); } #research-gallery { background: #ffffff; padding: 0px; padding-top: 20px; right: 0px; margin-top: 0; } #research-gallery:after { background-color: transparent; width: 1px; height: 1px; } #research-gallery .slides, #research-gallery .slides li a { height: 470px; } #research-gallery .flex-direction-nav { position: absolute; top: 400px; right: 15px; z-index: 10; width: 80px; height: 35px; } #research-gallery .flex-direction-nav .flex-prev { left: 0px; } #research-gallery .flex-direction-nav .flex-next { right: 0px; } #research-gallery .flex-pauseplay { position: absolute; top: 252px; right: 55px; z-index: 10; } #research-gallery .flex-direction-nav a { margin: 0; background: #ffffff; color: #999999; bottom: 0; width: 36px; } #research-gallery .flex-direction-nav a:hover { background: var(--color-wmsilver-15); color: var(--color-wmgreen-90); } #research-gallery .flex-direction-nav a { height: 33px; } #research-gallery .flex-direction-nav a:before { line-height: 33px; font-size: 15px; } #research-gallery .flex-direction-nav { margin-top: 0; } #research-gallery .flex-direction-nav a:after { display: none; } } @media only screen and (min-width: 860px) { #research-gallery .slides, #research-gallery .slides li a { height: 470px; } #research-gallery .flex-direction-nav { /* top: 420px; */ } } /* MOBILE TO DESKTOP BREAKPOINT */ @media only screen and (min-width: 930px) { #research-gallery { padding: 0px; } #research-gallery .flex-direction-nav { top: 380px; } } @media only screen and (min-width: 1000px) { // .user_content { // width: 100% !important; // } #research-gallery .slides, #research-gallery .slides li a { height: 475px; } #research-gallery-caption-container { position: absolute; bottom: 85px; left: 20px; z-index: 10; pointer-events: none; } #research-gallery .research-gallery-title, #research-gallery .research-gallery-caption-text { background: rgba(var(--color-black-105-rgb), 0.7); opacity: 0; font-weight: normal; padding: 10px; } #research-gallery .research-gallery-title { color: var(--color-wmgold-35); font-size: 32px; margin-bottom: 5px; padding: 20px; font-weight: 400; } #research-gallery .research-gallery-title:hover { text-decoration: none; } #research-gallery .research-gallery-caption-text { color: #ffffff; margin-left: 10px; margin-right: 30px; font-size: 16px; } #research-gallery .flex-direction-nav { top: 385px; bottom: 15px; } }