JQuery Cycle plugin

[jyemail]

Hi CoreCMS users, I'm very excited, because finally I'd could to use the JQuery Cycle to show the images. And I'm going to teach how I'm using it.

1. You don't need to install the Cycle, because is all ready installed!.
2. Go to this page "jQuery Cycle Plugin" and you could see a lot of JQuery Cycle demos, I'm using the "Use 'mouseover' instead of 'click' for pager events.
   Nota: If you select another demo, be sure to understand how to install it.
3. Now you need the css and the function.
   the CSS copy this in the css tyle theme manually or go to (admin - style/layout - theme: currenty used - Stylesheets: basic.css
   

   #nav { margin: 5px; }<br>
   #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }<br>
   #nav a.activeSlide { background: #ea0 }<br>
   #nav a:focus { outline: none; }<br>
   

   
   
   the FUNCTION copy this one underneath it all on the INPUTS (admin / Content / entries / Editing: Custom layout - inputs),
   

   X2 script type="text/javascript"><br>
   $(function() {<br>
       $('#slideshow').cycle({<br>
           speed:       200,<br> <!-- you could change it -->
           timeout:     0,<br>
           pager:      '#nav',<br>
           pagerEvent: 'mouseover'<br>
       });<br>
   });<br>
   X2 /script>

   Nota: replace the X2 for this symbol <

   Nota 2: I tryed to insert the function in the "index head" with the others scripts, but doesn't work properly. So, for that reason I insert the function there.

4. Now we need to add some extra code around the "CORE(ENTRY:MEDIA)" in the same place before (function). ENTRIES / EDITING CUSTOM LAYOUT / INPUTS panel
   
   • Enter to the back-end (admin panel) - CONTENT - ACTIONS: Edit custom layout - Inputs: Contents.
   • Inside there find or insert this code* "CORE(ENTRY:MEDIA)".
     * for insert this code just read the instructions "Commands/info (clickable)".
   • Now add the code like this: and remember to erase the old, just need one "CORE(ENTRY:MEDIA)"
     

     <div id="nav"></div>
     <div id="slideshow">CORE(ENTRY:MEDIA)</div>

So, that's all bro's... You could see it renderar.com.

This is not a perfect instruction, because we must to insert the punt 4 and 3.b on every ENTRY, so if some body know how to insert this code inside the theme, please share it!.. many people will thank you.