Greetings.

I'm using slideshow since Drupal 4.7 and found that there is no fading autoplay slideshow any more in 5.0 version. This is probably because you decided not to use 3d party javascripts which is right but lack of this functionality is a big loss.

We found a good jquery plugin (innerfade) to implement this and did the following:

1. Download innerfade.js from jquery site (it is very small, only 2.7K) and put it into slideshow directory.

2. Create one more extremely small slides.js:

$(document).ready( function(){ 
  $('#slides').innerfade({ 
      animationtype: 'fade',
      speed: 'slow',
      timeout: 2000, 
      type: 'random', 
      containerheight: '117px'
  });
});

3. Override theme_slideshow() function:

function phptemplate_slideshow($element) {
  $slideshow = $element['#slideshow'];

  $gallery = reset($slideshow['settings']);
  $list = array();

  $list[] = '<ul id="slides">';
  foreach ($gallery['images'] as $i) {
    $list[] = '<li><img class="image" src="'. $i['src'] .'" /></li>';
  }
  $list[] = '</ul>';

  drupal_add_js(drupal_get_path('module', 'slideshow') .'/innerfade.js');
  drupal_add_js(drupal_get_path('module', 'slideshow') .'/slides.js');

  return  implode("\r\n", $list);
}

and that's all! Autoplay fading slideshow is working!

I would like to propose you to include this feature into your module, add one more slideshow setting ("fading") if necessary and improve your theme function to detect slideshow mode.

Waiting for your feedback. Thanks!
CommentFileSizeAuthor
#9 slideshow_styles.zip3.83 KBardas
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

funkeyrandy’s picture

funkeyrandy CreditAttribution: funkeyrandy commented

i want to do this ...but all i get is a list of images....(the javascript files ARE being called however...)

thanks

ardas’s picture

ardas CreditAttribution: ardas commented

Are you sure javascript files were correctly included into result page? Please, review them by viewing page source.
If you have just a list of images this means javascript didn't processed it.
ul id="slides" is important!

be sure you put files into proper location.

sliiiiiide’s picture

sliiiiiide CreditAttribution: sliiiiiide commented

This modification works a treat! One more thing: I'd love to inlcude the slideshow image descriptions (as in the non-fading version). Would be grateful if someone could point me in the right direction - i'm pretty new to php...

ardas’s picture

ardas CreditAttribution: ardas commented

Patch phptemplate_slideshow() function and dump $element parameter - image titles should be there. If there are no image titles you should read them from database.

For module author ... It looks like a good feature and probably theme function should include image titles as well (ideally there should be a variable to toggle titles).

mancini’s picture

mancini CreditAttribution: mancini commented
Category: feature » support

Excuse me, why I have this errors when I submit the slideshow content:

warning: reset(): Passed variable is not an array or object in /var/www/html/modules/slideshow/slideshow.module on line 227.
warning: Invalid argument supplied for foreach() in /var/www/html/modules/slideshow/slideshow.module on line 231.

Would anyone help me? Thank you very much

kkaefer’s picture

kkaefer CreditAttribution: kkaefer commented
Category: support » feature

Please do not hijack completely unrelated threads.

headkit’s picture

headkit CreditAttribution: headkit commented

scriptfile is embeded correctly, id=slides is implemented but in firefox there is still shown a list of images...
:-(

headkit’s picture

headkit CreditAttribution: headkit commented

hm, i changed some settings in slides.js and then it worked. thats fine.
but containerheight: 'auto' does not work - and i need that!
also i want to add the functionality that there is shown the number of pictures and every image has its own link like "1 | 2 | 3 | 4" where a click stops the slideshow and shows the linked picture.
any solutions in that direction yet?

ardas’s picture

ardas CreditAttribution: ardas commented
FileSize
slideshow_styles.zip3.83 KB

Greetings,

I am providing a patch which implements slideshow style feature.
1. Original style called Manual Rotation now.
2. A new Auto Fading style is added and implements the feature discussed above.
3. theme_slideshow now calls either theme('slideshow_manual', ...) or theme('slideshow_auto_fading', ...) depending on style.

Attached archive consists of the following:
1. innerfade.js - jQuery plugin
2. slides.js - Initialization of innerfade (TODO: Customize settings on a node basis)
3. slideshow_install.patch - Patch for hook_install() to add a new style column and update_3() to alter existing table.
4. slideshow_module.patch - Patch to a module.

ardas’s picture

ardas CreditAttribution: ardas commented
Status: Active » Needs review

forgot to change status...

Dear kkaefer, if you have any comments or thoughts regarding this patch please share them with me. We are interesting in supporting the module and helping to improve it.

dub4u’s picture

dub4u CreditAttribution: dub4u commented

Against which slideshow version is this patch? I have problems applying it:

$ patch slideshow.install slideshow_install.patch
(Stripping trailing CRs from patch.)
patching file slideshow.install
Hunk #1 succeeded at 99 (offset 64 lines).
Hunk #2 FAILED at 110.
Hunk #3 succeeded at 149 with fuzz 2 (offset 13 lines).
1 out of 3 hunks FAILED -- saving rejects to file slideshow.install.rej

slideshow.install.rej contains:

***************
*** 109,114 ****
          vid integer NOT NULL DEFAULT 0,
          location INTEGER NOT NULL,
          align INTEGER NOT NULL,
          dimensions varchar(20) NULL,
          PRIMARY KEY (nid, vid)
        )");
--- 110,116 ----
          vid integer NOT NULL DEFAULT 0,
          location INTEGER NOT NULL,
          align INTEGER NOT NULL,
+         style INTEGER NOT NULL,
          dimensions varchar(20) NULL,
          PRIMARY KEY (nid, vid)
        )");

I tried against slideshow 5.x-2.0-c and HEAD.

ardas’s picture

ardas CreditAttribution: ardas commented

I did it against development release which was available when I did the patch.

I made the patch file with Araxis Merge. Could it be a reason?

ardas’s picture

ardas CreditAttribution: ardas commented

From the provided source code I don't see any problems to apply the patch. The new line is "style INTEGER NOT NULL", all other code is the same.

jo1ene’s picture

jo1ene CreditAttribution: jo1ene commented

ARDAS - I emailed you about this, but I have been finding so many good messages in my spam box that I'm afraid your reply might be lost. Thank you for taking the time to add this feature! I was wondering what it would take ($) and/or are you available to do the same for this project:
http://drupal.org/project/cck_multimage

bappa.sarkar’s picture

bappa.sarkar CreditAttribution: bappa.sarkar commented
Title: Fading autoplay slideshow » Problem in multiple slideshow in a single page

I have use
1. Innerfade.js
2. slide.js
3. Override theme_slideshow()

I publish 2 slideshows in a single page. One slideshow is ok but the other one giving list of images.

jo1ene’s picture

jo1ene CreditAttribution: jo1ene commented
Title: Problem in multiple slideshow in a single page » Fading autoplay slideshow

Please don't hijack this thread's title. This thread is about an autoplay feature. Feel free to submit your findings regarding this patch, but leave the issue title alone.

ardas’s picture

ardas CreditAttribution: ardas commented

jo1ene, it is impossible to estimate time needed to implement this feature in CCK Multimage module, I've never used it and at the moment I sent a request to this module's author regarding co-maintaining it. I hope I'll be able to provide some patches for this module. I'll contact you shortly when I have some response from him.

Thank you for your interest.

ardas’s picture

ardas CreditAttribution: ardas commented

bappa.sarkar, please create a separate thread for this issue.

bappa.sarkar’s picture

bappa.sarkar CreditAttribution: bappa.sarkar commented

Hi ARDAS,
Thanx for your suggesion, But JavaScript always run in single thread. I give some time to fix the problem. I am new in JQuery. After learning some concept of JQuery I found the solution.

=========Solution is=========

Change in slides.js file. I change

$('#slides').innerfade({ -------> $("ul[@id=slides]").innerfade({

Now it is working fine.

ardas’s picture

ardas CreditAttribution: ardas commented

Sorry, but what was the problem? What is the difference between "#slides" and "@id=slides"?

SteelersMobileAdmin’s picture

SteelersMobileAdmin CreditAttribution: SteelersMobileAdmin commented

Hey guys, this is going to be a dumb question...i do have a good understanding of php, but i dont see what you guys are saying by "Override theme_slideshow()" Where are you referencing this at? should there be a 3rd separate php file or is it the slideshow.module?
the files i have under the slideshow directory are:
slideshow.js
slidshow.admin.inc
slideshow.info
slideshow.css
slideshow.module
innerfade.js

Sorry about this question, but i have spent a few hours and tried a bunch of different things but nothing works.

Thanks,
Oh and im using godaddy to host so i cant use the .install or the .patch

d.sibaud’s picture

d.sibaud CreditAttribution: d.sibaud commented

Hello, a question, when this feature will be committed in the current version or in a development version?

unfeasible’s picture

unfeasible CreditAttribution: unfeasible commented

Subscribe. Any patches for the slideshow fade for D6 in the works?

netivajak’s picture

netivajak CreditAttribution: netivajak commented

The only change for D6 I had to make as far as I recall was to use the theme name as the prefix rather than phptemplate_

So instead of:

phptemplate_slideshow

I used

my_theme_name_I_really_should_make_them_shorter_slideshow

Hope this helps someone.

ymmatt’s picture

ymmatt CreditAttribution: ymmatt commented

I applied this patch to Drupal 5.x and it works great except for some styling/flow issues. The footer of the page ends up behind the slideshow, an easy fix was to adjust the container height in slides.js

Also, the first image is styled with the ul dot.

Thanks for the great work!