Themes

Hi Mary, 

Busy time of year for us all.. Santa coming soon.. 

I have dropped the working code in to here.. 

https://bootsnipp.com/user/snippets/Q0Do5

understand your first post.. as both 

•  lightbox (Via plug in and full page activity)
  
• Modal's (Via Moodle base code)
  

CSS and Java code are in place..

in my research I did come across Richard's filter

https://moodle.org/mod/forum/discuss.php?d=362216#p1460807

So for giggles, I am taking this a bit further as when it is working it looks great. I can see a lot of use for Modals in Moodle 

( Just had to do that pun .

And as per my button example I have got  working so another nice way to drop some "important\take note" type information into.. 

So going back to the Carousel type "lightbox Modal" code. 

it is just going to be getting the right HTML calls going to the CSS and JavaScript that is already contained. 

This is what I have for CSS at the moment.. 

 /* for Modal setout */
 /* dg added */
.modal {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: 0px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0,0,0,.3);
    background-clip: padding-box;
    outline: 0;
}

 /* dg added */

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 9999999999999999999999999999999999999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  left: 0;
  width: 100%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
/* The Modal -end */

This is the HTML

<div class="editor-indent" style="margin-left: 20px; padding: 0 0 0 40px; margin-right: 50px">
<div class="container-fluid">
<div class="row-fluid">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
<div class="column">
    <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
  </div>
<div class="column">
    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
  </div>
<div class="column">
    <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
  </div>
</div>

<div id="myModal" class="modal" style="display: none;">
  <span class="close cursor" onclick="closeModal()">×</span>
  <div class="modal-content">

    <div class="mySlides" style="display: none;">
      <div class="numbertext">1 / 4</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides" style="display: none;">
      <div class="numbertext">2 / 4</div>
      <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides" style="display: none;">
      <div class="numbertext">3 / 4</div>
      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides" style="display: block;">
      <div class="numbertext">4 / 4</div>
      <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

<div class="column">
      <img class="demo" src="https://www.w3schools.com/howto/img_nature_wide.jpg" onclick="currentSlide(1)">
    </div>

<div class="column">
      <img class="demo" src="https://www.w3schools.com/howto/img_fjords_wide.jpg" onclick="currentSlide(2)">
    </div>

<div class="column">
      <img class="demo" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" onclick="currentSlide(3)">
    </div>

<div class="column">
      <img class="demo active" src="https://www.w3schools.com/howto/img_lights_wide.jpg" onclick="currentSlide(4)">
    </div>
  </div>
</div></div></div>

Then looking at the Javascript (which we know we dont really need)

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

this is going to take a bit of work to pull apart so going to have to put it on the back burner until early next year once we get this xmas rush. but if someone gets it working let me know what we need to do.. as I am sure a coder looks at this and can see my mistakes

As noted, when I throw in all the code, it works and looks great.. but.. breaks things across the theme or I say Moodle base.