Jump to:

23379 Posts in 18298 Topics by 2867 members

General Questions

SilverStripe Forums » General Questions » Hover Slide Effect with jQuery on SilverStripe

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 786 Views
  • vic
    Avatar
    Community Member
    3 Posts

    Hover Slide Effect with jQuery on SilverStripe Link to this post

    i have tried every thing i can think of its not working for my can anyone help hers the code

          <script src="js/cufon-yui.js" type="text/javascript"></script>
          <script src="js/Cantarell.font.js" type="text/javascript"></script>
          <script type="text/javascript">
             Cufon.replace('a,h3');
             Cufon.replace('h1', {
                textShadow: '0px 1px #fff'
             });
             Cufon.replace('h2', {
                textShadow: '0px 1px #fff'
             });
          </script>
    <!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
          <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    $(function() {
                //custom animations to use
                //in the transitions
                var animations      = ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
                var total_anim      = animations.length;
                //just change this to one of your choice
                var easeType      = 'swing';
                //the speed of each transition
                var animSpeed      = 450;
                //caching
                var $hs_container   = $('#hs_container');
                var $hs_areas      = $hs_container.find('.hs_area');
                
                //first preload all images
    $hs_images = $hs_container.find('img');
    var total_images = $hs_images.length;
    var cnt = 0;
    $hs_images.each(function(){
    var $this = $(this);
    $('<img/>').load(function(){
    ++cnt;
    if(cnt == total_images){
                         $hs_areas.each(function(){
                            var $area       = $(this);
                            //when the mouse enters the area we animate the current
                            //image (random animation from array animations),
                            //so that the next one gets visible.
                            //"over" is a flag indicating if we can animate
                            //an area or not (we don't want 2 animations
                            //at the same time for each area)
                            $area.data('over',true).bind('mouseenter',function(){
                               if($area.data('over')){
                                  $area.data('over',false);
                                  //how many images in this area?
                                  var total      = $area.children().length;
                                  //visible image
                                  var $current    = $area.find('img:visible');
                                  //index of visible image
                                  var idx_current = $current.index();
                                  //the next image that's going to be displayed.
                                  //either the next one, or the first one if the current is the last
                                  var $next      = (idx_current == total-1) ? $area.children(':first') : $current.next();
                                  //show next one (not yet visible)
                                  $next.show();
                                  //get a random animation
                                  var anim      = animations[Math.floor(Math.random()*total_anim)];
                                  switch(anim){
                                     //current slides out from the right
                                     case 'right':
                                        $current.animate({
                                           'left':$current.width()+'px'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'left'      : '0px'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the left
                                     case 'left':
                                        $current.animate({
                                           'left':-$current.width()+'px'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'left'      : '0px'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the top   
                                     case 'top':
                                        $current.animate({
                                           'top':-$current.height()+'px'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'top'      : '0px'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the bottom   
                                     case 'bottom':
                                        $current.animate({
                                           'top':$current.height()+'px'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'top'      : '0px'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the right   and fades out
                                     case 'rightFade':
                                        $current.animate({
                                           'left':$current.width()+'px',
                                           'opacity':'0'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'left'      : '0px',
                                              'opacity'   : '1'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the left and fades out   
                                     case 'leftFade':
                                        $current.animate({
                                           'left':-$current.width()+'px','opacity':'0'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'left'      : '0px',
                                              'opacity'   : '1'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the top and fades out   
                                     case 'topFade':
                                        $current.animate({
                                           'top':-$current.height()+'px',
                                           'opacity':'0'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'top'      : '0px',
                                              'opacity'   : '1'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                     //current slides out from the bottom and fades out   
                                     case 'bottomFade':
                                        $current.animate({
                                           'top':$current.height()+'px',
                                           'opacity':'0'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'top'      : '0px',
                                              'opacity'   : '1'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;      
                                     default:
                                        $current.animate({
                                           'left':-$current.width()+'px'
                                        },
                                        animSpeed,
                                        easeType,
                                        function(){
                                           $current.hide().css({
                                              'z-index'   : '1',
                                              'left'      : '0px'
                                           });
                                           $next.css('z-index','9999');
                                           $area.data('over',true);
                                        });
                                        break;
                                  }   
                               }
                            });
                         });
                         
                      //when clicking the hs_container all areas get slided
                         //(just for fun...you would probably want to enter the site
                         //or something similar)
                         $hs_container.bind('click',function(){
                            $hs_areas.trigger('mouseenter');
                         });
                      }
                   }).attr('src',$this.attr('src'));
                });         
                

    });
    </script>

  • vic
    Avatar
    Community Member
    3 Posts

    Re: Hover Slide Effect with jQuery on SilverStripe Link to this post

    i think its has to do with $ in the code when i remove it the page works again but java script still dose not
    when i but it back i get
    ( ! ) Parse error: syntax error, unexpected T_STRING, expecting ')' in C:\Windows\Temp\silverstripe-cacheC--wamp-www-SilverStripe-v2.4.5\.cache.themes.spacestudio7.templates.Page.ss on line 321

  • vic
    Avatar
    Community Member
    3 Posts

    Re: Hover Slide Effect with jQuery on SilverStripe Link to this post

    i found way around on the .ss file to make it work i add a iframe and link it to the page would still like to now y this did not work? on the .ss file

    786 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.