4
\$\begingroup\$

I am working on making a minimalistic personal testing website to conduct various experiments for my role at work. I'd like to add a couple of bells and whistles to it, particularly a slideshow that cycles between several images. I could just as easily grab a plug-in, but I'd like to promote this Stack Exchange beta site and offer a simple challenge with concrete rules.

Rules:

  • JavaScript and jQuery are allowed. The jQuery library is assumed to be included.
  • The function of the code is to take three images and fade-cycle through each of them at regular intervals of five seconds indefinitely. Fade time is one second.
  • Must be compatible with Internet Explorer 9 (and later), Chrome, and Firefox.
  • The code golf submission is the total number of characters between the inline script. Characters in externally referenced files are also included.

HTML is the following, pretty-printed as it's not part of the challenge:

<html>
  <head>
    <title>JS Slideshow code golf</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
      /* CODE GOLF SUBMISSION HERE */
    </script>
  </head>
  <body>
    <div class="s">
      <img id="a" src="img1.png" />
      <img id="b" src="img2.png" />
      <img id="c" src="img3.png" />
    </div>
  </body>
</html>

Full attribution will be given to the author on any code I end up using.

\$\endgroup\$
7
  • \$\begingroup\$ is the size of HTML counted? Or, are we even forced to create the respective elements from code starting from only an element with a known ID somewhere in the document? How much may we assume about the HTML? \$\endgroup\$ Sep 25, 2013 at 4:52
  • \$\begingroup\$ Excellent clarification. You can assume basic HTML markup is already there, such as the image tags and any necessary div tags to support the code. \$\endgroup\$
    – Gigazelle
    Sep 25, 2013 at 5:12
  • 1
    \$\begingroup\$ If HTML is free, exactly how much can I put in there? Can I just do eval($("i").data("c"))? If not, why? \$\endgroup\$ Sep 25, 2013 at 5:15
  • \$\begingroup\$ Another question: are we allowed to use ES6, which Chrome does not yet support, or we need to support all modern browsers? What about IE? \$\endgroup\$ Sep 25, 2013 at 5:21
  • \$\begingroup\$ Thanks Jan for the additional specifications. I've included an HTML template and exactly what qualifies as a submission. \$\endgroup\$
    – Gigazelle
    Sep 25, 2013 at 5:42

1 Answer 1

8
\$\begingroup\$

70 68(JS) + 22(CSS) characters

setInterval('$(".s").append($(".s :first").hide().fadeIn(1e3))',5e3)

CSS:

img{position:absolute}

jsfiddle: http://jsfiddle.net/QACAY/

pure jQuery. The only browser-stuff is setInterval, which dates as far back as IE4. jQuery support doesn't reach that far. Javascript syntax here is ancient as well.

Of course, in practice, do not pass strings to setInterval! It is ten characters shorter (fewer with es6 arrow functions), but it's unreadable (madness? This is code golf!), it forces you into the global scope (which we don't mind here), it's slower (but we are far from being concerned with performance of calling jQuery code) and it won't pass any decent code review.

Works best if all images have the same shape. But, it will work just as fine with semitransparent images as long as visible stacking counts as fine and no more background is visible when any single image is removed.

Since this does not wait for DOM ready, there's a tiny chance that only some of the image elements inside a gallery are loaded when an interval fires. In this case, the stack of images will get reordered. I don't think it's a problem. In fact, I kinda like it.

After slight tweaking, it looks like code that could easily pass through a code review and get into production (also, be sure to modify the CSS to not be too aggressive):

$(function(){
  $(".s").each(function(_, s){
    setInterval(function(){
      $(":first", s).hide().appendTo(s).fadeIn(1000);
    }, 5000);
  });
});
\$\endgroup\$
2
  • \$\begingroup\$ Can you use 1e3 and 5e3? \$\endgroup\$
    – gnibbler
    Sep 27, 2013 at 3:34
  • \$\begingroup\$ I think :first could be :eq() \$\endgroup\$
    – bendytree
    Sep 30, 2013 at 13:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.