Wycliffes Influence

by Donna Torr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Centre image -->
<div class="container circles" style="--m: 10; --tan: 0.41"><p>
<div class="timeline-pills">
<div><p><a><img src="https:///explore.morningstarfilm.co.uk/images/influence/wycliffe-cropped.webp" alt="Wycliffe" class="wycliffe">Wycliffe</a></p></div>
<!-- Outer images -->
<div class="timeline-element active service" data-target="influence-1" style="--i: 1"><p><a href="#influence-1"><img src="https:///explore.morningstarfilm.co.uk/images/influence/tyndale-cropped.webp" alt="William Tyndale">William Tyndale</a></p></div>
<div class="timeline-element service" data-target="influence-2" style="--i: 2"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/purvey-cropped.webp" alt="John Purvey">John Purvey</a></p></div>
<div class="timeline-element service" data-target="influence-3" style="--i: 3"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/oldcastle-cropped.webp" alt="Sir John Oldcastle">Sir John Oldcastle</a></p></div>
<div class="timeline-element service" data-target="influence-4" style="--i: 4"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/luther-cropped.webp" alt="Martin Luther">Martin Luther</a></p></div>
<div class="timeline-element service" data-target="influence-5" style="--i: 10"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/jan-hus-cropped.webp" alt="">Jan Hus</a></p></div>

<!-- top circles-->
<div class="timeline-element service" data-target="influence-6" style="--i: 5"><p><a href="#influence-info"><img src="https:///explore.morningstarfilm.co.uk/images/influence/plato-cropped.webp" alt="Plato">Plato</a></p></div>
<div class="timeline-element service" data-target="influence-7" style="--i: 6"><p><a href="#influence-info"><img...

CSS

.container {
  --d: 6.5em; /* image size */
	--rel: 1; /* how much extra space we want between images, 1 = one image size */
  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
  --s: calc(2*var(--r) + var(--d)); /* container size */
  position: relative;
  width: var(--s); height: var(--s);
	background: silver
}

.container a {
  position: absolute;
  top: 50%; left: 50%;
  margin: calc(-.5*var(--d));
	width: var(--d); height: var(--d);
  --az: calc(var(--i)*1turn/var(--m));
  transform: 
    rotate(var(--az)) 
    translate(var(--r))
    rotate(calc(-1*var(--az)))
}
.container p {
   text-align:center;
}
img { max-width: 100% }

JavaScript

jQuery(document)
  .on("mouseenter", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");
    const dataTargetElem = $("div.timeline-info#" + dataTarget);

    $(".timeline-pills .timeline-element").removeClass("hover-pill");
    currentElement.addClass("hover-pill");

    $(".timeline-info").hide();
    dataTargetElem.show();
  })
  .on("mouseleave", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const activeElement = $(".timeline-pills .timeline-element.active");
    const dataTarget = activeElement.data("target");
    const dataTargetElem = $("div.timeline-info#" + dataTarget);

    $(".timeline-pills .timeline-element").removeClass("hover-pill");

    $(".timeline-info").hide();
    dataTargetElem.show();
  })
  .on("click", ".timeline-pills .timeline-element", function(e) {
    e.preventDefault();
    const currentElement = $(this);
    const dataTarget = currentElement.data("target");

    const dataTargetElem = $("div.timeline-info#" + dataTarget);
    $(".timeline-pills .timeline-element").removeClass("active");
    currentElement.addClass("active");

    $(".timeline-info").hide();
    dataTargetElem.show();
  });