Widget:SlidingGallery: Difference between revisions

From sandbox
Jump to navigation Jump to search
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
Created page with "<style> →Layout containers matching your original specifications: .gallery-outer { position: relative; height: 100%; } .gallery-bg { position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 100%; } .gallery-viewport { position: relative; margin: 0 auto; width: 742px; height: 300px; overflow: hidden; } →Sliding engine (Starts sliding automatically): .wrapper { position: absolute; top: 0; left: 0; displa..."
 
Gfc (talk | contribs)
Bureaucrats, sandbox-editors, Administrators, Widget editors
2,219 edits
No edit summary
 
(One intermediate revision by the same user not shown)
Line 16: Line 16:
}
}


/* ⏸️ PAUSE ANIMATION ON HOVER: Stops the sliding movement when mouse enters the gallery area */
/* ⏸️ PAUSE ANIMATION ON HOVER */
.wrapper:hover {
.wrapper:hover {
   animation-play-state: paused;
   animation-play-state: paused;
Line 34: Line 34:
}
}


/* 🔍 ENLARGE IMAGE ON HOVER: Makes the specific image slightly pop out */
/* 🔍 ENLARGE IMAGE ON HOVER */
.gallery-item img:hover {
.gallery-item img:hover {
   transform: scale(1.15);
   transform: scale(1.15);
Line 56: Line 56:
   <div class="gallery-bg">
   <div class="gallery-bg">
     <div class="gallery-viewport">
     <div class="gallery-viewport">
       <div class="wrapper">
       <!-- The JavaScript loop will safely inject the layout directly into this wrapper -->
       
      <div class="wrapper" id="js-gallery-wrapper"></div>
        <!-- Smarty loop dynamically printing your elements -->
        {foreach $images as $index => $img}
          <div class="gallery-item">
            <a href="/wiki/{$links[$index]|escape:'url'}">
              <img src="/images/{$img|escape:'html'}" alt="{$captions[$index]|escape:'html'}">
            </a>
            <div class="gallery-caption">{$captions[$index]}</div>
          </div>
        {/foreach}
 
      </div>
     </div>
     </div>
   </div>
   </div>
</div>
</div>
<script>
(function() {
  // Capture the raw parameters passed from the wiki page setup
  var rawImages = "<!-- {$images|escape:'javascript'} -->";
  var rawLinks = "<!-- {$links|escape:'javascript'} -->";
  var rawCaptions = "<!-- {$captions|escape:'javascript'} -->";
  // Clean up the text data strings into manageable clean arrays
  var images = rawImages ? rawImages.split(',') : [];
  var links = rawLinks ? rawLinks.split(',') : [];
  var captions = rawCaptions ? rawCaptions.split(',') : [];
  var htmlOutput = '';
  // Generate the gallery rows loop using clean Javascript
  for (var i = 0; i < images.length; i++) {
    if (!images[i].trim()) continue;
    var cleanImg = images[i].trim().replace(/ /g, '_');
    var cleanLink = links[i] ? links[i].trim().replace(/ /g, '_') : '';
    var caption = captions[i] ? captions[i].trim() : '';
    htmlOutput += '<div class="gallery-item">';
    htmlOutput += '  <a href="/wiki/' + encodeURIComponent(cleanLink) + '">';
    htmlOutput += '    <img src="/images/' + encodeURIComponent(cleanImg) + '" alt="' + caption + '">';
    htmlOutput += '  </a>';
    htmlOutput += '  <div class="gallery-caption">' + caption + '</div>';
    htmlOutput += '</div>';
  }
  // Inject the completed slider directly into the viewport container
  document.getElementById('js-gallery-wrapper').innerHTML = htmlOutput;
})();
</script>

Latest revision as of 21:05, 15 October 2026

<style> /* Layout containers matching your original specifications */ .gallery-outer { position: relative; height: 100%; } .gallery-bg { position: relative; margin: 0 -1em; padding: 0; background-color: transparent; border: 1px none #ddd; height: 100%; } .gallery-viewport { position: relative; margin: 0 auto; width: 742px; height: 300px; overflow: hidden; }

/* Sliding engine (Starts sliding automatically) */ .wrapper { 

 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 gap: 15px;
 width: 5000px; 
 animation: 60s credits linear infinite;

}

/* ⏸️ PAUSE ANIMATION ON HOVER */ .wrapper:hover { 

 animation-play-state: paused;

}

.gallery-item { 

 display: inline-block;
 text-align: center;
 width: 150px;

}

.gallery-item img { 

 width: 100px;  /* Match widths=100px */
 height: 200px; /* Match heights=200px */
 object-fit: contain;
 transition: transform 0.3s ease;

}

/* 🔍 ENLARGE IMAGE ON HOVER */ .gallery-item img:hover { 

 transform: scale(1.15);
 cursor: pointer;

}

.gallery-caption { 

 font-size: 0.85em;
 color: #333;
 margin-top: 5px;
 line-height: 1.2;

}

@keyframes credits { 

 0% { transform: translateX(0); }
 100% { transform: translateX(-2500px); }

} </style>

<script> (function() { 

 // Capture the raw parameters passed from the wiki page setup
 var rawImages = "";
 var rawLinks = "";
 var rawCaptions = "";

 // Clean up the text data strings into manageable clean arrays
 var images = rawImages ? rawImages.split(',') : [];
 var links = rawLinks ? rawLinks.split(',') : [];
 var captions = rawCaptions ? rawCaptions.split(',') : [];

 var htmlOutput = ;

 // Generate the gallery rows loop using clean Javascript
 for (var i = 0; i < images.length; i++) {
   if (!images[i].trim()) continue;

   var cleanImg = images[i].trim().replace(/ /g, '_');
   var cleanLink = links[i] ? links[i].trim().replace(/ /g, '_') : ;
   var caption = captions[i] ? captions[i].trim() : ;

htmlOutput += '

'; 
   htmlOutput += '  <a href="/wiki/' + encodeURIComponent(cleanLink) + '">';
   htmlOutput += '    <img src="/images/' + encodeURIComponent(cleanImg) + '" alt="' + caption + '">';
   htmlOutput += '  </a>';
htmlOutput += '
' + caption + '
'; htmlOutput += '

'; 

 }

 // Inject the completed slider directly into the viewport container
 document.getElementById('js-gallery-wrapper').innerHTML = htmlOutput;

})(); </script>

Retrieved from "https://sandbox.umd.edu/wiki/index.php?title=Widget:SlidingGallery&oldid=3385"