AnythingSlider in drupal

Events happening in the community are now at Drupal community events on www.drupal.org.
akaserer's picture

hi

does anybody know if there is somebody working on a module to integrate the great AnythingSlider in drupal?

http://css-tricks.com/examples/AnythingSlider/

Comments

Same here...

neofactor's picture

I noticed this Drupal theme using it...
http://osc.template-help.com/drupal_26412/

I didn't make a module for it

Cactii1's picture

I didn't make a module for it but I did integrate it in my site.

http://www.contributecontent.com

It's automated, just have to check a CCK checkbox to get a node into the slider. I was going to do it with "sticky" nodes but failed at being able to produce the PHP logic needed to add the header and footer that the slider needs.

Don't suppose you'd like to

shaneod's picture

Don't suppose you'd like to make a module Cactii1? =-)

------------------------------
Pride Web Design Cork
------------------------------

It's Not Really Module Material

Cactii1's picture

I don't think it's really module material... More in the theme than anything.

Here's how I did it.

In page.tpl.php

Right after where your scripts string is output, just make sure you put the scripts in the right directory.

<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->
    <script type="text/javascript" src="<?php print base_path() . path_to_theme();?>/js/jquery.easing.1.2.js"></script>
  <script src="<?php print base_path() . path_to_theme();?>/js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">   
        function formatText(index, panel) {
         return index + "";
     }
   
        $(function () {
       
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 3500,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 1200,             // How long the slide transition takes
                hashTags: false,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
              pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
              startText: "Go",                // Start text
                stopText: "Stop",               // Stop text
             navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
           
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
           
        });
    </script>

Then... in the content types that you want to include in the slider add a new CCK field, a checkbox. I used "Featured in the Slider" or something like that.

You'll need Views 2 as well... Because it's in a block.

Here's the Views 2 view that I used...

$view = new view;
$view->name = 'featured_slider';
$view->description = 'Featured Slider';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
  'field_article_image_fid' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'target' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'empty' => '',
    'hide_empty' => 0,
    'empty_zero' => 0,
    'link_to_node' => 0,
    'label_type' => 'none',
    'format' => 'thumbnail-node_linked',
    'multiple' => array(
      'group' => TRUE,
      'multiple_number' => '',
      'multiple_from' => '',
      'multiple_reversed' => FALSE,
    ),
    'exclude' => 0,
    'id' => 'field_article_image_fid',
    'table' => 'node_data_field_article_image',
    'field' => 'field_article_image_fid',
    'relationship' => 'none',
  ),
  'title' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'target' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'empty' => '',
    'hide_empty' => 0,
    'empty_zero' => 0,
    'link_to_node' => 1,
    'exclude' => 0,
    'id' => 'title',
    'table' => 'node',
    'field' => 'title',
    'relationship' => 'none',
  ),
  'teaser' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'target' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'empty' => '',
    'hide_empty' => 0,
    'empty_zero' => 0,
    'exclude' => 0,
    'id' => 'teaser',
    'table' => 'node_revisions',
    'field' => 'teaser',
    'relationship' => 'none',
  ),
));
$handler->override_option('filters', array(
  'field_articles_slider_value' => array(
    'operator' => '=',
    'value' => 'Featured In the Slider',
    'group' => '0',
    'exposed' => FALSE,
    'expose' => array(
      'operator' => FALSE,
      'label' => '',
    ),
    'case' => 1,
    'id' => 'field_articles_slider_value',
    'table' => 'node_data_field_articles_slider',
    'field' => 'field_articles_slider_value',
    'relationship' => 'none',
  ),
));
$handler->override_option('access', array(
  'type' => 'none',
));
$handler->override_option('cache', array(
  'type' => 'none',
));
$handler->override_option('header', '<div class="anythingSlider"><div class="wrapper">');
$handler->override_option('header_format', '3');
$handler->override_option('header_empty', 0);
$handler->override_option('footer', '</div></div>');
$handler->override_option('footer_format', '3');
$handler->override_option('footer_empty', 0);
$handler->override_option('items_per_page', 5);
$handler->override_option('style_plugin', 'list');
$handler->override_option('style_options', array(
  'grouping' => '',
  'type' => 'ul',
));
$handler->override_option('row_options', array(
  'inline' => array(),
  'separator' => '',
  'hide_empty' => 0,
));
$handler = $view->new_display('block', 'Block', 'block_1');
$handler->override_option('block_description', '');
$handler->override_option('block_caching', -1);

Of course I put all the CSS is in my main CSS file and adapted it to my needs.

Pay close attention to the HEADER and the FOOTER of the View... make sure it outputs the right HTML and that it outputs it as PHP CODE. If you use full HTML of HTML as the output type Views will close the div tags before your content has been output.

I needed to theme the view too... basically I ripped out all the extra class declarations and just made it all output in the li tag.

Ummm... Good luck? ;)

Great stuff, thanks Cactii1 !

shaneod's picture

Great stuff, thanks Cactii1 !

------------------------------
Pride Web Design Cork
------------------------------

about the content type

abdelatifs's picture

Hi Cactii1,
To be able to use your view you've created a specific content type,
Is there any way that you can dump it in here so that the tutorial is complete?

What if I wanted to display videos instead?

Thanks for your help

Start/Stop Button

mycrazydog's picture

Hopefully a helpful hint: I had problems with the little "stop/go" button background. It would change incorrectly after mouse-over/out ... green would show during "stop" and red during "go".

To fix it you must include sizzle.js. (http://sizzlejs.com/)

In css-tricks.com example he uses "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" which has jquery and sizzle combined.

Also I haven't tested it without it but I am using the jquery_update module to get the current version of jquery to 1.3.

Footer

rpr's picture

Hi

I did exactly your view but with myn the footer remove both closing divs while the header does it correctly like it should. Both uses the phpcode.

What about starting a sandbox project?

Alex Komm's picture

What about starting a sandbox project? We can try to integrate this slider in Drupal as a Views Slideshow plugin?

Doesn't Cycle already do everything that AS can?

alex.skrypnyk's picture

Doesn't Cycle already do everything that AS can?

cycle?

abdelatifs's picture

hey alex,
is cycle a module of some kind?

thanks

views_slideshow_cycle is

alex.skrypnyk's picture

views_slideshow_cycle is shipped with views_slideshow

You may configure lots of options, including fields per frame, qty of frames per slide, transition effect (based on jquery cycle plugin http://jquery.malsup.com/cycle/), custom JS-based event-handlers through views and more.

One more slider module? Just

Fidelix's picture

One more slider module?

Just see this list, please:
http://groups.drupal.org/node/20384 (And there are some modules that aren't on this list)

If you can't find the feature you want to create, consider merging your efforts with the most flexible slider module out there: views_slideshow

Contributed Module Ideas

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: