title: Getting current image from scrollable list of images
body: <p>I have list of scrollable images (<a href="https://denoutdoors.com/collections/aframe-house-plans/products/small-a-frame-house-with-loft?variant=39264937803840" rel="nofollow noreferrer">example</a>) and I try to find out which is the current image that is shown of the screen.</p>
  <p>The idea is to focus the current image thumbnail. Here is my code (I'm using Smarty TE):</p>
  <pre class="lang-html prettyprint-override"><code>{if $images}
  &lt;div class=&quot;galleryHolder left&quot;&gt;
      &lt;div class=&quot;thumbsHolder left&quot;&gt;
          &lt;div class=&quot;pos-sticky&quot;&gt;
              {section name=i loop=$images}
              &lt;a href=&quot;/files/{$images[i].file}&quot; data-fancybox=&quot;gallery&quot; class=&quot;thumb&quot;&gt;
                  &lt;picture&gt;
                      &lt;source srcset=&quot;/files/webp/tntn/{$images[i].file_webp} 1x&quot; type=&quot;image/webp&quot;&gt;
                      &lt;source srcset=&quot;/files/tntn/{$images[i].file} 1x&quot; type=&quot;image/jpeg&quot;&gt;
                      &lt;img class=&quot;thumbImg&quot; src=&quot;/files/tntn/{$images[i].file}&quot; alt=&quot;{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}&quot;&gt;
                  &lt;/picture&gt;
              &lt;/a&gt;
              {/section}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;imagesHolder right&quot;&gt;
          {section name=i loop=$images}
          &lt;a href=&quot;/files/{$images[i].file}&quot; data-fancybox=&quot;gallery&quot; class=&quot;full&quot;&gt;
              &lt;picture&gt;
                  &lt;source srcset=&quot;/files/webp/{$images[i].file_webp} 1x&quot; type=&quot;image/webp&quot;&gt;
                  &lt;source srcset=&quot;/files/{$images[i].file} 1x&quot; type=&quot;image/jpeg&quot;&gt;
                  &lt;img class=&quot;fullImg&quot; src=&quot;/files/{$images[i].file}&quot; alt=&quot;{if $images[i].name}{$images[i].name}{else}{$row.name}{/if}&quot;&gt;
              &lt;/picture&gt;
          &lt;/a&gt;
          {/section}
      &lt;/div&gt;
  &lt;/div&gt;
  {/if}
  </code></pre>