Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Slow down slider or change effects
 
Tizzalicious
Member
 
Avatar
Total Posts:  42
Joined:  2011-05-28
 

Hi everyone!

I am using the grayscale template, and I would like to change the effect of the slider. It has a sliding effect, but it’s super super fast. I’d like to change it to fade, or at least slow it down, so it doesn’t slide as fast.

I found the explanation on how to change it here: http://webandpeople.com/articles/2010/05/customize-grayscale-magento-theme-home-page-slider/ , However, my code in the Home Page Header block does not include the part of the slider with the code for speed, etc. I only have the part with the images.

I found the code I think I need somewhere else on the webandpeople forums:

<script type="text/javascript\">// <![CDATA[
jQuery(document).ready(function() {
slider = jQuery(’#slider-content’);
slider.before(’<div id="stripNav0" class="stripNav">’)
.cycle({ fx: ‘fade’, timeout: 4000, speed: 1000, next: ‘.stripNavL’, prev: ‘.stripNavR’, pager:’#stripNav0’ }); });
nextLink = jQuery(’#stripNavLa’);
prevLink = jQuery(’#stripNavRa’);
changeFx = function(fx) { opts = $(slider).data(’cycle.opts’); opts.currFx = fx; opts.fx = fx; slider.cycle.saveOriginalOpts(opts); }
// ]]></script>

And if I add that to the home page header block I CAN control the speed and effects, but in addition, it also adds 3 extra “pager counters” to my slider. There are only 3 images, but it will show 6 blocks, the “active” block changing from 1, 2, 3 back to 1, but the 3 extra blocks still showing.

You can see what I mean with the blocks in the attachments. The 3rd block is highlighted, and the 3rd and last picture is showing. After that, it goes back to the first picture, with the first block highlighted.

My code now looks like this:

<script type="text/javascript\">// <![CDATA[
jQuery(document).ready(function() {
slider = jQuery(’#slider-content’);
slider.before(’<div id="stripNav0" class="stripNav">’)
.cycle({ fx: ‘fade’, timeout: 4000, speed: 1000, next: ‘.stripNavL’, prev: ‘.stripNavR’, pager:’#stripNav0’ }); });
nextLink = jQuery(’#stripNavLa’);
prevLink = jQuery(’#stripNavRa’);
changeFx = function(fx) { opts = $(slider).data(’cycle.opts’); opts.currFx = fx; opts.fx = fx; slider.cycle.saveOriginalOpts(opts); }
// ]]></script>
<div class="slider-wrap">
<div id="stripNavL0" class="stripNavL" onclick="changeFx(’scrollRight’)"><a id="stripNavLa" href="#">Left</a></div>
<div id="slider-content" class="slider-wrap"><img src="{{media url="home_banner.jpg"}}" alt="” width="950" height="280" /> <img src="{{media url="home_banner_2.jpg"}}" alt="” width="950" height="280" /> <img src="{{media url="home_banner_3.jpg"}}" alt="” width="950" height="280" /></div>
<div id="stripNavR0" class="stripNavR" onclick="changeFx(’fade’)"><a id="stripNavRa" href="#">Right</a></div>
</div>

Did I maybe add the code somewhere where it shouldn’t be? And is it somewhere else too, so it’s there twice, which might cause the 6 pager counters instead of 3?

I hope you can help me out.

Image Attachments
Home page_1313244794544.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
knotte01
Jr. Member
 
Total Posts:  4
Joined:  2011-07-14
 

Hi, i’m having the same trouble and really want to slower down the slider. Does anyone have a solution for this?

Thank you!

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Looking at the code above, I would say you need to adjust :

speed1000
 
Magento Community Magento Community
Magento Community
Magento Community
 
rambi31
Jr. Member
 
Total Posts:  7
Joined:  2013-04-23
 

I was digging deeper and looking for any relations and connections between cycle-fade-effect.js and \"slier-wrap\" container class wrapped by script. Everything what I found is pointing at one function in line 591 in cycle-fade-effect.js :

// invoked after transition
$.fn.cycle.updateActivePagerLink = function(pagercurrSlide{
    
$(pager).find(\'a\').removeClass(\'activeSlide\').filter(\'a:eq(\'+currSlide+\')\').addClass(\'activeSlide\');
As well the order in which scripts operate and are loaded trough CMS->Pages->Home page->Custom Layout Update XML and XML in head reference. slider.js is staight way linked with containers with ID=\"slider-content\"
<div id="slider-content" class="slider-wrap">
The same relation between wrapped container and animation methods and functions
<div  class="slider-wrap" style="height: 280px; overflow: hidden;">
in this case 1210 in cycle-fade-effect.js:
// wipe - clip animation
$.fn.cycle.transitions.wipe = function($cont$slidesopts{
    
var $cont.css(\'overflow\',\'hidden\').width();
    var 
$cont.height();
    
opts.cssBefore opts.cssBefore || {};
    var 
clip;
    if (
opts.clip{
    
...
})(jQuery);
All jQuery and Java Scripts are first loaded in head section trough XML in CMS->Pages->Home page->Design->Custom Layout Update XML in the following sentence:
<reference name=\"head\"> <action method=\"addItem\">
  <
type>skin_css</type>
  <
name>css/slider.css</name>
  <
params/>
  </
action> <action method=\"addItem\">
  <
type>skin_js</type>
  <
name>js/jquery-1.5.2.min.js</name>
  </
action> <action method=\"addItem\">
  <
type>skin_js</type>
  <
name>js/cycle-fade-effect.js</name>
  </
action> <action method=\"addItem\">
  <
type>skin_js</type>
  <
name>js/slider.js</name>
  </
action> </reference>
All structure of the element is quite simple. Whole Static Block \"home_page_header_block\" created trough CMS->Static Blocks->home_page_header_block->Content:
<div  class=\"slider-wrap\" style=\"height: 280px; overflow: hidden;\">
  <
div id=\"stripNavL0\" class=\"stripNavL\" onclick=\"changeFx(\'scrollRight\')\"><a id=\"stripNavLa\" href=\"#\">Left</a></div>
  <
div id=\"slider-content\" class=\"slider-wrap\">
  <
a href=\"#\" title=\"\"><img src=\"{{media url=\"home_banner.jpg\"}}\" alt=\"\" width=\"950\" height=\"280\" /></a
  <
a href=\"#\" title=\"\"><img src=\"{{media url=\"home_banner_2.jpg\"}}\" alt=\"\" width=\"950\" height=\"280\" /></a>
  <
a href=\"#\" title=\"\"><img src=\"{{media url=\"home_banner_3.jpg\"}}\" alt=\"\" width=\"950\" height=\"280\" /></a>
  </
div>
  <
div id=\"stripNavR0\" class=\"stripNavR\" onclick=\"changeFx(\'fade\')\"><a id=\"stripNavRa\" href=\"#\">Right</a></div>
</
div>
Than block is implemented and displayed trough PHP in \\app\\design\\frontend\\default\\grayscale\\template\\page\\html\\header.phtml as Html output:
<div class=\"home_page_header_block\">
<?php echo $this->getChildHtml(\'home_page_header_block\'); ?>
</div>
Once block is ready to go all containers <div></div> included in head section with appropriate class=\"slider-wrap\" linked with cycle-fade-effect.js are wrapped by script with additional options or not like overflow: hidden in and navigation layer related with appropriate elements, buttons with class=\"stripNav\" and identifier with z index in \\skin\\frontend\\default\\grayscale\\css\\slider.css :
<div  class=\"slider-wrap\" style=\"height: 280px; overflow: hidden;\">
  <
div id=\"stripNavL0\" class=\"stripNavL\" onclick=\"changeFx(\'scrollRight\')\"><a id=\"stripNavLa\" href=\"#\">Left</a></div>
  <
div id=\"stripNavR0\" class=\"stripNavR\" onclick=\"changeFx(\'fade\')\"><a id=\"stripNavRa\" href=\"#\">Right</a></div>
Than containers with appropriate id=\"slider-content\" in head section are identified by slider.js as a content of the slider
slider jQuery(\'#slider-content\');

And all effects included in the script are applied than to that content. In our case is:
<div id=\"slider-content\" class=\"slider-wrap\">
  <
a href=\"#\" title=\"\"><img src=\"{{media url=\"home_banner.jpg\"}}\" alt=\"\" width=\"950\" height=\"280\" /></a
  <
a href=\"#\" title=\"\"><img src=\"{{media url=\"home_banner_2.jpg\"}}\" alt=\"\" width=\"950\" height=\"280\" /></a>
  <
a href=\"#\" title=\"\"><img src=\"{{media url=\"home_banner_3.jpg\"}}\" alt=\"\" width=\"950\" height=\"280\" /></a>
 </
div>
That\’s it. In big shortcut it is the way of implementing your own or any custom jQuery element in your theme. In my opinion everything could be very simplified just by adding whole code, jQuery and java scripts and blocks straight to layout.xml and adequate *.phtml template files.
 
Magento Community Magento Community
Magento Community
Magento Community
 
GoMageTeam
Guru
 
Avatar
Total Posts:  356
Joined:  2013-01-13
Warsaw, Poland
 

Hello guys,

We have read much useful information here.  The investigation is interesting and attracts the attention. What do you think of our GoMage Slider? Have you ever tested this extension, which has a wide range of effects that refresh online site?

Please, get more information about it here:

http://www.gomage.com/extensions/gomage-slider.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top