Project: CNN Image Gallery

A few weeks ago, CNN launched their spiffy new site which I was fortunate enough to have my hands dirtied from. I’ll save my comments for the redesign for another post, but wanted to point out the image gallery I worked on.

Details about the gallery

  • generic and allows setting any gallery feed on embed
  • allows deeplinking to specific images on embed
  • allows navigating to specific images from javascript
  • allows changing gallery feed via javascript
  • tracks image clicks
  • tracks gallery loads
  • allows emailing of gallery
  • Overall the experience with the gallery is pretty smooth. However, because it is competing with a bunch of other processes on the page, you can visually see the lag it is experiencing (via captions hide/reveal animation).

    For those with a bit of Flash community knowledge the new image gallery has a pretty familiar look. One might even venture to think that the module is indeed what it appears to be, SlideShow Pro. However, you would be wrong. Despite it’s drastically similar resemblance, it is a ground up custom write. Should it have been? Thats a good question. My first response when I saw the design firm’s mocks were, go get SlideShow Pro. I even pointed them to Todd and told him about it (since he was still at Turner). It was obvious they had used it as a model, so why not just customize it, right?

    Well in the case of CNN, they wanted control. Control over the UI, control over the effects, control over the data, control over the internals, control over events, and basically the control to modify everything and anything to do with the module. I granted their wish and did a ground up write, which took little time. It was a clean implementation that did only what they asked and was fine tuned to their needs. It was the details that you don’t see that made the custom write the correct decision, and in the end I agree with their choice.

    With all that said, I think it is a compliment to Todd that they followed his design. Though it made me feel odd with the project being so close his work, it points out the validity of his component. If CNN mirrors SlideShowPro, then that should tell you the component rocks. I wasn’t able to use it here, but I highly recommend it.

    2 comments

    1. P.J. Onori

      It is indeed very nice work – my only question is why their decision for Flash. As someone who develops Flash applications, I definitely understand the appeal and benefits of Flash/Flex, but I am beginning to think that the basic slideshow paradigm, is more suited for implementation in advanced Javascript. There are definitely times where Flash would be the better solution (i.e. high motion, rich interaction models, etc.) but for 90% of slideshows out there, Javascript can take care of it.

      This is by no means a knock on your work – it’s great. Rather, it’s a question on why you think the client decided to go the Flash route? Any thoughts on that?

    2. Kenny Bunch

      PJ,
      I think it’s based on a few things. First, Flash is a lot quicker to develop and get the look and feel right. Also, you have the notion that a Flash asset is a single instance. It makes it completely portable. For instance, if you want to snap that into a viral widget, it’s already ready and will work everywhere (a lot of sites disable js code). The code is also lot more manageable and debugable too. Some of the js engines are getting better at catching issues, but due to the complete dynamic nature of the language it’s harder to find bugs up front. Could the gallery be done in DHTML? Certainly. You can do a lot more complex apps than that with DHTML. So this one could have been an either or situation, but it was just simpler in Flash

      I agree with you on using DHTML when needed. I was a DHTML wizard before doing Flash and still use it when it’s the better solution. If you look at the rest of CNN, you will notice a LOT of DHTML going on. In these places it makes more sense. The functionality screams for it and would be a bad choice for Flash. It’s about picking the right technology for the job.

    Post a comment

    You may use the following HTML:
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">