3

The website I am trying to develop has asked for a slider much like the one on Nowness.com.

http://www.nowness.com/

The specific functionality they would like is that at the end of the slide show or video, an overlay comes up with links to other pages on the site. Ideally, it would be a grid of images, and perhaps no overlay at all. So, you come to the site, a video plays, and after the video is done, a grid of images comes up. I don't know if I'm being entirely clear, but I was wondering if anyone could take a look at Nowness and go to the end of the slideshow, and perhaps be able to tell me what technology they may be using to achieve that effect. Thank you.

|improve this question
3

It uses HTML/JS for that. The only usage of Flash there is fullscreen mode of slideshow.

|improve this answer
  • 4
    From some initial poking around, it's not even using a plugin, just core jQuery stuff. There's a container called mediaOverlay right in the HTML, empty. When you reach the end of the show, some scripting pulls the various bits of content, appends them to the elements, and uses fadeIn() to reveal it. Everything else is in the stylesheet. If you just search for mediaOverlay throughout the HTML, JS and CSS you should be able to pull out the relevant bits of code. – Su' Sep 28 '11 at 18:39
2

I'm one of the developers at Createthe Group, who built the NOWNESS site. I worked on the feature you're referring to, and Su's reverse engineering is a great look at how it functions.

We used a basic "slideFader" plugin for the slide show part, with a callback set for the "onComplete" option. This callback disables the timer, sets up the "replay" functionality, and shows the overlay. The mediaOverlay is an object that has some basic functions for initalizing, opening and closing the overlay.

If we end up moving and releasing the feature into a stand alone plugin, I'll post it up here for other developers to use.

|improve this answer
  • Hi Jason, thanks for chiming in. I'm pretty new to jQuery, and to Stack Overflow, and it's pretty amazing to see the help that is available here. Just curious, if you don't use Flash, how do you get the site to work on non-HTML5 browsers? Also, when you mention the "slideFader" plugin, what exactly do you mean by plugin? – Michael Blaustein Oct 7 '11 at 16:29
  • Nevermind about the slideFade plugin, I found it on the jQuery site. Still would be interested to hear about Flash, though. – Michael Blaustein Oct 7 '11 at 16:46
  • Hi Michael, the slideshow doesn't acutally use any special HTML5 features, and uses javascript (with jQuery) to manipulate the elements in the DOM. There are many things you can do in the browser with out flash or HTML5 canvas/svg features. The plugin is actually something I wrote myself, I don't think it's been added to the jQuery site as far as I know, but honestly there's so many slideshow plugins, you should use whatever one you like or is easy to integrate with your site. – Jason Oct 12 '11 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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