Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a script to get you started. You'll need to do something with the image urls rather than just displaying them, but I'm sure you will figure this out...</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css" &gt; div { border: solid 1px black; height:200px; } &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript"&gt; var pixelsBetweenImages = 200; var imagesArray = {} var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size) imagesArray[0] = ""; imagesArray[1] = ""; imagesArray[2] = ""; imagesArray[3] = "/images/ImageThree.gif"; imagesArray[4] = "/images/ImageFour.gif"; imagesArray[5] = "/images/ImageFive.gif"; imagesArray[6] = "/images/ImageSix.gif"; imagesArray[7] = "/images/ImageSeven.gif"; imagesArray[8] = "/images/ImageEight.gif"; $(window).scroll(function() { var scrollpos = $(window).scrollTop() + $(window).height(); var imageIndex = Math.floor(scrollpos / pixelsBetweenImages); if (imagesArray[imageIndex] != "") { var div = $("#" + imageIndex); div.html(imagesArray[imageIndex]); imagesArray[imageIndex] = ""; } }); &lt;/script&gt; &lt;div&gt;Visible on first load&lt;/div&gt; &lt;div&gt;Visible on first load&lt;/div&gt; &lt;div&gt;Visible on first load&lt;/div&gt; &lt;div id="3"&gt;3&amp;nbsp;&lt;/div&gt; &lt;div id="4"&gt;4&amp;nbsp;&lt;/div&gt; &lt;div id="5"&gt;5&amp;nbsp;&lt;/div&gt; &lt;div id="6"&gt;6&amp;nbsp;&lt;/div&gt; &lt;div id="7"&gt;7&amp;nbsp;&lt;/div&gt; &lt;div id="8"&gt;8&amp;nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload