Use JavaScript to fade through image ads

It's certainly possible, but it's not something that's planned to be implemented for this module. Well written contributions welcome.

I know it's been awhile since this was posted, but I thought I'd post a little how-to, since we had to get this going for a client recently. Rather than alter the module, I made all changes within my theme:

1. Download the jquery cycle plugin. Put jquery.cycle.min.js in your theme's directory, and include the following in template.php:
   

   drupal_add_js(path_to_theme() . '/jquery.cycle.min.js', 'theme');
   

2. Add this function to your template.php:

   function [yourthemename]_ad_display($group, $display, $method = 'javascript') {
     static $id = -1;
   
     // Increment counter for displaying multiple advertisements on the page.
     $id++;
   
     // The naming convention for the id attribute doesn't allow commas.
     $group = preg_replace('/[,]/', '+', $group);
   
     if ($method == 'jquery') {
   	  $retval = "<div class=\"advertisement group-$group\" id=\"group-id-$id\">\n<script type=\"text/javascript\">\n//<![CDATA[\n";
   		$retval .= <<<JQ
   		$(document).ready(function(){
   		   $("div#group-id-$id").load("$display", function(){
   		     $('div.advertisement-space').remove();
   		     $('div#group-id-$id').cycle({
   		       fx: 'fade',
   		       speed: 200,		// speed of transition effect (ms)
   					timeout: 10000	// time between transitions (ms)
   		     });
   		    });
   		  });
   		JQ;
   		$retval .= "\n//]]>\n</script>\n</div> \n";
   		return $retval;
     }
     else if ($method == 'raw') {
       return $display;
     }
     else {
       return "\n<div class=\"advertisement group-$group\" id=\"group-id-$group\">$display</div>\n";
     }
   }
   

   Note: use of the heredoc syntax ("<<<JQ") means that this line

   JQ;
   

   can't have any spaces or tabs in front of it. Also, note that you'll have to use the "jquery" method to display your ads. And of course, be sure to replace [yourthemename] above with, well, your theme name.

3. That ought to do it. Any ad group's block which is configured to display more than one ad will instead display the ads one at a time, cycling to a new one after 10 seconds (configurable via the "timeout" property in the theme_ad_display implementation above).

Would this be really hard to allow changing timeout for each individual ad ?

thank you very much for your solution, a was searching for this from days and did not find anything until your solution
Thanks again

Here is how to set the delay for each image.

I have done is as 4 seconds * the probability of it displaying. (4 seconds is worked out from the base probability 100 * 40 in the code below)

function hook_ad_image_ad($ad) {
    if (isset($ad->aid) && (isset($ad->filepath) || isset($ad->remote_image))) {
        $output = '<div class="image-advertisement" id="ad-' . $ad->aid . '" data-rel="' . ($ad->probability * 40) . '">';
        if (isset($ad->url) && !empty($ad->url)) {
            $image = theme('ad_image_image', !empty($ad->remote_image) ? $ad->remote_image : $ad->filepath, check_plain($ad->tooltip), check_plain($ad->tooltip));
            $output .= l($image, $ad->redirect . '/@HOSTID___', array('attributes' => ad_link_attributes(), 'absolute' => TRUE, 'html' => TRUE));
        } else {
            $output .= theme('ad_image_image', !empty($ad->remote_image) ? $ad->remote_image : $ad->filepath, check_plain($ad->tooltip), check_plain($ad->tooltip));
        }
        $output .= '</div>';
        return $output;
    }
}

and then js like:

function calculateTimeout(currElement, nextElement, opts, isForward) {

    var current_image = $(currElement);
    var timeout = current_image.attr("data-rel");

    if (timeout > 0) {
        return parseInt(timeout);
    } else {
        return 4000;
    }
}

and then change your Jcarousel code to:

       fx: 'fade',
       speed: 1000,
       timeoutFn: calculateTimeout

Drupal 6 is EOL and no longer supported. Closing this as outdated for that reason. Thanks for your contribution!