Jump to Navigation

jQuery Featured Items & Background Fade

  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.
  • strict warning: Declaration of views_handler_field::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_field.inc on line 1148.
  • strict warning: Declaration of views_handler_sort::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_sort::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_sort.inc on line 165.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_handler_filter::query() should be compatible with views_handler::query($group_by = false) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/handlers/views_handler_filter.inc on line 599.
  • strict warning: Declaration of views_plugin_query::options_submit() should be compatible with views_plugin::options_submit($form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_query.inc on line 181.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_style_default.inc on line 24.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home1/salonfal/public_html/drupal6/sites/all/modules/views/plugins/views_plugin_row.inc on line 136.
  • strict warning: Non-static method view::load() should not be called statically in /home1/salonfal/public_html/drupal6/sites/all/modules/views/views.module on line 1118.

Recent Comments

There are a number of ways you could go about "pausing" the slideshow on hover.  I would take a...

Hi,
I love the featured content fader... I actually prefer this over a traditional slider because the effect...

Hi,
Thanks for your posting. It is a great image gallery.
Thanks again. Regards.

Great example, this is a good basic structure for anyone who is new to web development. Thanks.

Hey Tom,

Working with arrays in javascript is pretty easy.  First off you'll need to declare it...

jQuery Featured Items with Background Colour Fade

I have seen some really great examples of featured content sections on websites. Some use image sliders while others use image fades and background effects.  I recently stubbled upon a great example on www.f-i.com

In this tutorial I will recreate the featured content block from www.f-i.com using jQuery.  For this example you will need to use jQuery 1.4.2 (http://docs.jquery.com/Downloading_jQuery) and the jQuery Color plugin (http://github.com/jquery/jquery-color).

View the working demo and see example the code

Comments

Hi,
I love the featured content fader... I actually prefer this over a traditional slider because the effect seems more authentic and classy.

I just have one question. Is there a way to pause the current slide on hover? I think that would make this content fader PERFECT!!

Please let me know ASAP. Thanks

There are a number of ways you could go about "pausing" the slideshow on hover.  I would take a look at clearInterval method. You can add a onHover (or mouse over) event to clear the setInterval function, and then add another setInterval when you mouse out.

Hope that helps. 

Post new comment