By crocpulsar on

I have seen a simple example in http://malsup.com/jquery/cycle/begin.html
To get that work in drupal 5, you need:
http://drupal.org/project/jquery_update
http://drupal.org/project/jquery_plugin
http://malsup.com/jquery/cycle/download.html

Copy the downloaded cycle plugin into jquery plugin module folder.
Create a page content.
Upload your images into drupal
Copy the code into body. Choose input format as php code.
Don't forget change the image path.

<?php
jquery_plugin_add('cycle');
drupal_add_js(' $(document).ready(function() {
          $("#s1").cycle("fade");
          });',
         'inline'
);
?>

 <div id="s1" class="pics" style="height: 307; width: 461; padding: 0; margin: 0;">
    <img src="files/image1.jpg" width="384" height="256" style="padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 383; height: 256; top: 0; left: 0;" />
    <img src="files/image2.jpg" width="384" height="256" style="padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 383; height: 256; top: 0; left: 0;" />
    <img src="files/image3.jpg" width="384" height="256" style="padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 383; height: 256; top: 0; left: 0;" />
    <img src="files/image4.jpg" width="384" height="256" style="padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 383; height: 256; top: 0; left: 0;" />
  </div>
⋅ Categories: Drupal 5.x

Comments

KrisBulman’s picture

KrisBulman commented

thanks for this!

KrisBulman’s picture

KrisBulman commented

How are additional commands added?

Going off of the jquery documentation, it states you can add things such as next/prev buttons or control the speed.. 

$('#s1').cycle({fx:'fade',speed:2500});

But that doesn't seem to work?

KrisBulman’s picture

KrisBulman commented

my bad, I didn't have the syntax correct: 

$("#s1").cycle({"fx": "scrollHorz","prev" :"#prev1","next" : "#next1", "nowrap" : "1","timeout" : "0" });

this works, and the prev, next links were coded with: 

<div><a id="prev1" href="#">Prev</a> <a id="next1" href="#">Next</a></div>
mburak’s picture

mburak commented

krisbfunk, the scrollHorz transition is not working for me... I'm testing the same code you posted it... am I missing anything?

aufumy’s picture

aufumy commented

For drupal6 the cycle plugin is already included in the jquery_plugin module

Assuming that all nodes of a certain content type will have images only as attachments:

Add this to template.php

jquery_plugin_add('cycle');

Add this to node.tpl.php

drupal_add_js(' $(document).ready(function() {
                $("#s1").cycle("fade");
                });',
                'inline'
);

Add this to node.tpl.php inside of <div class="content">

if ($page && $type == 'restaurant') {
  echo '<div id="s1">';
  foreach ($files as $image) {
    echo '<img src="/'. $image->filepath .'" />';
  }
  echo '</div>';
}
kalm’s picture

kalm commented

Hi,

Thanks for the great example.

I've got the Cycle working on pages fine but when I try to include that page as content in a panel the effect won't work and the items that should be cycled just stack on top of one another.

Any ideas on what I might be doing wrong here or is the Panels module stopping the JQuery running?

Thanks

Andy

Edit: It's OK and working now, I'd left some duff code in template.php from when I'd tried to use innerfade, though I don't know why Panels were affected but pages were OK