update

AlfScourfield/index.html

@@ -15,13 +15,13 @@ <h1>In Memory of Kenneth Alfred (Alf) Scourfield</h1>
       <a href="https://drive.google.com/drive/folders/1NK4tHBtGx0D9Xut6IRPiEB2jZRsSnvfl?usp=drive_link">Google Drive Photos Archive</a> 
       <p id="counter">Loading...</p> 
       <div class="image-container"> 
-        <iframe id='iframe' src="d" width="700vw" height="700vh" allow="autoplay"></iframe> 
+        <a href="https://ibb.co/vL4QFw5"><img id="img" src="https://i.ibb.co/BT2rpzD/unnamed.jpg" alt="unnamed" width-max="800ew" height-max="800ew"></a>
       </div> 
       <div class="controls"> 
         <button id="prevBtn">Previous</button> 
         <button id="nextBtn">Next</button> 
       </div> 
     </div> 
-    <script src="script.js"></script> 
+    <script src="script_alt.js"></script> 
   </body> 
   </html>

AlfScourfield/jpeg2png.py

@@ -0,0 +1,24 @@
+# script that will take files from a given directory and convert them to png in a local directory
+# using the PIL library
+Path = '/Users/rs17612/Google Drive/My Drive/Alf Scourfield Photos'
+Pathout = 'AlfScourfield/png_photos'
+import os
+from PIL import Image
+# import hief module
+from pillow_heif import register_heif_opener
+
+register_heif_opener()
+
+
+# empty out the directory
+for file in os.listdir(Pathout):
+    os.remove(f'{Pathout}/{file}')
+
+for file in os.listdir(Path):
+
+    if not file.endswith('.pdf' or '.DS_Store'):
+        img = Image.open(f'{Path}/{file}')
+        clean_name = os.path.splitext(file)[0]
+        # downsizing the image quality
+        img.save(f'{Pathout}/{clean_name}.jpg', 'jpeg', quality=60)
+        print('all done!')

AlfScourfield/script.js

@@ -14,7 +14,7 @@ function updateIframeSrc(index) {
       iframe.style.opacity = 1;
     };
     updateCounter(currentIndex, lines.length);
-  }, 1000);
+  }, 10);
 }
 
 fetch(PATH_txt)

AlfScourfield/script_alt.js

@@ -0,0 +1,78 @@
+const PATH_txt = "https://rhysalfshaw.com/AlfScourfield/image_links.txt";
+let currentIndex = 1;
+let lines = [];
+let intervalId;
+
+// Function to update the iframe src attribute with a fade transition
+function updateIframeSrc(index) {
+  const iframe = document.getElementById("img");
+  iframe.style.opacity = 0;
+
+  setTimeout(() => {
+    iframe.src = lines[index];
+    iframe.onload = () => {
+      iframe.style.opacity = 1;
+    };
+    updateCounter(currentIndex, lines.length);
+  }, 100);
+}
+
+fetch(PATH_txt)
+  .then((response) => response.text())
+  .then((text) => {
+    lines = text.split(/\r?\n/);
+    updateIframeSrc(currentIndex);
+    startAutoPlay();
+  })
+  .catch((error) => {
+    console.error('Error fetching or processing the file:', error);
+  });
+
+// Function to start autoplay
+function startAutoPlay() {
+  intervalId = setInterval(incrementIndex, 20000);
+}
+
+// Function to stop autoplay
+function stopAutoPlay() {
+  clearInterval(intervalId);
+}
+
+// Function to increment the index, wrapping if necessary
+function incrementIndex() {
+  currentIndex = (currentIndex + 1) % lines.length;
+  updateIframeSrc(currentIndex);
+  updateCounter(currentIndex, lines.length);
+}
+
+// Function to decrement the index, wrapping if necessary
+function decrementIndex() {
+  if (currentIndex === 0) {
+    currentIndex = lines.length - 1;
+  } else {
+    currentIndex -= 1;
+  }
+  updateIframeSrc(currentIndex);
+  updateCounter(currentIndex, lines.length);
+
+}
+
+// Function to update the counter display
+function updateCounter(current, total) {
+  const counterElement = document.getElementById("counter");
+  counterElement.textContent = `${current} of ${total}`;
+}
+
+// Add click event listener to the "Previous" button
+document.getElementById("prevBtn").addEventListener("click", () => {
+  decrementIndex();
+  stopAutoPlay();
+  startAutoPlay(); // Restart the autoplay timer
+});
+
+// Add click event listener to the "Next" button
+document.getElementById("nextBtn").addEventListener("click", () => {
+  incrementIndex();
+  stopAutoPlay();
+  startAutoPlay(); // Restart the autoplay timer
+});

AlfScourfield/styles.css

@@ -49,7 +49,7 @@ p {
   padding-right: 5%;
 }
 
-#iframe {
+#img {
   max-width: 100%;
   max-height: 100%;
   opacity: 1;