This is a simple gallery I created using JCE Editor. It uses pure HTML and Javascipt so the editor is not required but makes building a easier.

Notes:

• I RSFirewall eats the code.
• Gap in between images
  • If you put the <img> declarations on different lines like in the code below you will get gaps between the images.
  • A simple solution is to put all of the <img> on the same line
  • You could use floats
  • There might be other solutions out there, but I have not tried them

HTML

<p style="max-width: 960px; margin: auto auto;">
    <img src="/images/kb/2017/870/cat-whiskers-kitty-tabby.jpg" alt="cat" onmouseover="this.src='/images/kb/2017/870/cat-whiskers-kitty-tabby-rollover.jpg';" onmouseout="this.src='/images/kb/2017/870/cat-whiskers-kitty-tabby.jpg';" />
    <img src="/images/kb/2017/870/cat-whiskers-kitty-tabby.jpg" alt="cat" onmouseover="this.src='/images/kb/2017/870/cat-whiskers-kitty-tabby-rollover.jpg';" onmouseout="this.src='/images/kb/2017/870/cat-whiskers-kitty-tabby.jpg';" />
    <img src="/images/kb/2017/870/cat-whiskers-kitty-tabby.jpg" alt="cat" onmouseover="this.src='/images/kb/2017/870/cat-whiskers-kitty-tabby-rollover.jpg';" onmouseout="this.src='/images/kb/2017/870/cat-whiskers-kitty-tabby.jpg';" />
    <img src="/images/kb/2017/870/kitten-green-eyes-grass.jpg" alt="cat" onmouseover="this.src='/images/kb/2017/870/kitten-green-eyes-grass-rollover.jpg';" onmouseout="this.src='/images/kb/2017/870/kitten-green-eyes-grass.jpg';" />
    <img src="/images/kb/2017/870/kitten-green-eyes-grass.jpg" alt="cat" onmouseover="this.src='/images/kb/2017/870/kitten-green-eyes-grass-rollover.jpg';" onmouseout="this.src='/images/kb/2017/870/kitten-green-eyes-grass.jpg';" />
    <img src="/images/kb/2017/870/kitten-green-eyes-grass.jpg" alt="cat" onmouseover="this.src='/images/kb/2017/870/kitten-green-eyes-grass-rollover.jpg';" onmouseout="this.src='/images/kb/2017/870/kitten-green-eyes-grass.jpg';" />
</p>