jqueryアニメーションコーディングcantが動作するようにします

Question

私はJqueryサイクルプラグインを使用するスライドショーを持っています。スライドショーの例はhttp://collaborativebydesign.com.au/demos/exposure/index.php/design-portfolio/logos

です。スライドショーは動作し、ナビゲーションはページ間でスクロールしますが、クライアントはナビゲーションアクティブリンクをページ間でスライドさせたいと考えています。だから私はこれを有効にするためにJQueryのアニメーションを使用しようとしている

$activeSlide.animate({ 
     left : currSlide * 150 
    }, 400, 'swing'); 

しかし、これは動作していないようです。私はそれをjsファイルに置き、スクリプトタグを頭に入れてみました。私はまた、ページにスクリプトを配置しようとしました。どのように私は、ページからページへの円滑な移行

に私のナビゲーションリンクを取得することができ、これは最も簡単な方法は、おそらく背景なしposition:absolute;上のすべてのリンクを持っているし、追加することですスライドショー

<?php defined('_JEXEC') or die('Restricted access'); // no direct access 

/** 
* LV ENHANCED image slider - An AJAX image slider 
* 
* @version 1.0 
* @package LV ENHANCED image slider 
* @author Juergen Koller 
* @copyright (C) http://www.lernvid.com 
* @license GNU/GPL: http://www.gnu.org/copyleft/gpl.html 
* 
**/ 


    // set width of nav 
    $lveisnav_width = $lveisWidth - 10; 

    // math the height if nav active  
    if ($useNav == 1) { 
     $lveis_height = $ulHeight + $navHeight; 
    } 
    else { 
     $lveis_height = $ulHeight; 
    };   

    // slider background color 
    if ($transparentBgColor == 1) { 
     $sliderBg = 'transparent'; 
    } 
    else { 
     $sliderBg = '#'.$lveis_bgcolor; 
    };   


// get the document object 
$doc =& JFactory::getDocument(); 

// style declaration 
$doc->addStyleDeclaration(' 
html { 
    filter: expression(document.execCommand("BackgroundImageCache", false, true)); 
} 
#container { 
    width: 716px; 
    height: 510px; 
    padding:0 !important; 
    margin:0 auto !important; 
    top:0px; 
    position: relative; 
    z-index:1; 
} 
h1 { 
    display:block; 
    width:716px; 
    height:505px; 
    margin: 0 auto; 
    top:0px; 
    position: relative; 
    background-image: url(../../modules/mod_center_image_slider/images/layer.png); 
    z-index:10; 
} 
#lveis-wrapper_'.$slider_id.' { 
    display:block; 
    width: 716px !important; 
    height: 505px !important; 
    position: absolute; 
    top:0px; 
    z-index: 60; 
} 
#lveis-wrapper_'.$slider_id.' ul#lveis { 
    height: '.$ulHeight.'px !important; 
} 
#lveis-wrapper_'.$slider_id.' ul#lveis, #lveis-wrapper_'.$slider_id.' ul#lveis li { 
    width:400px; 
    height: '.$ulHeight.'px !important; 
    list-style-type:none; 
    overflow:hidden; 
} 
#lveis-wrapper_'.$slider_id.' .lveisnav { 
    width: 716px !important; 
    height: 37px !important; 
    background:#white !important; 
    border:0px solid #'.$lveisnav_bordercolor.' !important; 
    padding:4px !important; 
    display:inline-block; 
    display:block; 
    overflow: hidden; 
    position:absolute; 
    top:506px; 
    left:0px; 
    z-index:50; 
} 
#lveis-wrapper_'.$slider_id.' .lveisindex a { 
    float:left; 
    width:16px; 
} 
#lveis-wrapper_'.$slider_id.' .lveisindex a:hover { 
    width:16px; 
} 
#lveis-wrapper_'.$slider_id.' .lveisnav .prev, #lveis-wrapper_'.$slider_id.' .lveisnav .next { 
    float:right; 
    display:block; 
} 
#lveis-wrapper_'.$slider_id.' .lveisnav .next a { 
    display:block; 
    width:36px; 
    height:35px; 
    border:0px; 
    background: url(../../modules/mod_client_image_slider/images/next.jpg) no-repeat; 
    } 
#lveis-wrapper_'.$slider_id.' .lveisnav .next a:hover, a:focus { 
    background-position: 0 -35px; 
    } 
#lveis-wrapper_'.$slider_id.' .lveisnav .prev a { 
    display:block; 
    width:36px; 
    height:35px; 
    border:0px; 

    background: url(../../modules/mod_client_image_slider/images/prev.jpg) no-repeat; 
    }  
#lveis-wrapper_'.$slider_id.' .lveisnav .prev a:hover, a:focus{ 
    background-position:0 -35px 
    } 
#lveis-wrapper_'.$slider_id.' .lveisnav a { 
    color:#'.$lveisnav_a.' !important; 
    border:0px solid #'.$lveisnav_aborder.' !important; 
    font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", "Arial Black", sans-serif; 
    font-weight:700; 
    font-stretch:normal;  
    font-size:14px !important; 
    padding:0 3px !important; 
    margin:2px; 
    text-decoration:none; 
    text-align:center; 
} 
#lveis-wrapper_'.$slider_id.' .lveisnav a:hover { 
    color: #'.$lveisnav_ahover.' !important; 
} 
#lveis-wrapper_'.$slider_id.' .lveisindex a.activeSlide { 
    top: 506; 
    left: 0; 
    width: 15px; 
    height: 25px; 
    background-color: #807E7D; 
    background-color: rgba(128, 126, 125, .1); 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
} 
#lveis-wrapper_'.$slider_id.' #lveis img, #lveis-wrapper_'.$slider_id.' #lveis a { 
    border:0 !important; 
    outline:0 !important; 
    margin:0 !important; 
    padding:0 !important; 
} 
#lveis-wrapper_'.$slider_id.' .lveisnav-clr { 
    clear:both; 
} 
' ); 
?> 


<?php if ($useCompression == 0) {?> 
    <script src="modules/mod_center_image_slider/js/jquery.js" type="text/javascript"></script> 
    <script src="modules/mod_center_image_slider/js/jquery.dimensions.js" type="text/javascript"></script> 
    <script src="modules/mod_center_image_slider/js/jquery.center.js" type="text/javascript"></script> 
    <script src="modules/mod_center_image_slider/js/functions.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="modules/mod_center_image_slider/css/style.css" type="text/css" media="screen" /> 
    <?php }; ?> 
<?php if ($useCompression == 1) {?> 

    <script src="modules/mod_center_image_slider/js/jquery.js" type="text/javascript"></script> 
    <script src="modules/mod_center_image_slider/js/jquery.dimensions.js" type="text/javascript"></script> 
    <script src="modules/mod_center_image_slider/js/jquery.center.js" type="text/javascript"></script> 
    <script src="modules/mod_center_image_slider/js/functions.js" type="text/javascript"></script> 
    <script type="text/javascript" src="modules/mod_center_image_slider/js/js_compress.php"></script> 
    <link rel="stylesheet" href="modules/mod_center_image_slider/css/style.css" type="text/css" media="screen" /> 

<?php }; ?> 

<script type="text/javascript"> 
    var jQlveis = jQuery.noConflict(); 
    jQlveis(document).ready(function() { 
     jQlveis('#lveis-wrapper_<?php echo $slider_id; ?> ul#lveis').cycle({ 
      fx: '<?php echo $effectFx; ?>', 
      random: <?php echo $random; ?>, 
      timeout: <?php echo $timeout; ?>, 
      speed: <?php echo $speed; ?>, 
      next: '#lveis-wrapper_<?php echo $slider_id; ?> .lveisnav .next', 
      prev: '#lveis-wrapper_<?php echo $slider_id; ?> .lveisnav .prev', 
      pager:'#lveis-wrapper_<?php echo $slider_id; ?> .lveisindex', 
      height: <?php echo $ulHeight; ?>, 
      pause: <?php echo $pause; ?> 
     }); 
    }); 
</script> 
<?php if ($imageCentered == 1) {echo'<center>';}; ?> 
    <noscript>You need Javascript enabled in your browser to see sliding images...</noscript> 
    <?php if ($useModalbox == 1) { 
     JHTML::_('behavior.mootools'); 
     JHTML::_('behavior.modal'); 
    };?> 
    <div id="container"> 
     <h1></h1> 
     <div id="lveis-wrapper_<?php echo $slider_id; ?>"> 
     <div class="centered"> 
     <ul id="lveis"> 
      <?php 
       $files = glob($imageFolder . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE); 
       for ($i=0; $i<count($files); $i++) 
       { 
        $num = $files[$i]; 
        echo '<li>'; 
        if ($uselinks == 1) { 
         if ($stretchImages == 1) { 
          echo '<a class="modal" href="'.$num.'" target="'.$linktarget.'"><img src="'.$num.'" alt="'.$num.'" width="'.$imageWidth.'" height="'.$imageHeight.'" /></a>'; 
         } 
         else { 

          echo '<a class="modal" href="'.$num.'" target="'.$linktarget.'"><img src="'.$num.'" alt="'.$num.'" /></a>'; 
         }; 
        } 
        else { 
         if ($stretchImages == 1) { 
          echo '<img src="'.$num.'" alt="'.$num.'" width="'.$imageWidth.'" height="'.$imageHeight.'" />'; 
         } 
         else { 
          echo '<img src="'.$num.'" alt="'.$num.'" />'; 
         }; 
        };   
        echo'</li>'; 
       } 
      ?> 
     </ul> 
      </div> 
     <?php if ($useNav == 1) {?> 
      <div class="lveisnav"> 
       <?php if ($nextbutton == 1) {?> 
        <div class="next"> 
        <a href="javascript:void(0);"></a> 
        </div> 
       <?php }; ?> 
       <?php if ($prevbutton == 1) {?> 
        <div class="prev"> 
        <a href="javascript:void(0);" ></a> 
        </div> 
       <?php }; ?> 
       <?php if ($lveisindex == 1) {?> 
        <div class="lveisindex"></div> 
       <?php }; ?> 
      </div> 

     <?php }; ?>  
     </div> 
     </div> 
     <div class="lveisnav-clr"></div> 

<?php if ($imageCentered == 1) {echo'</center>';}; ?> 

Answer 1

を作成するPHPファイルであります同様position:absolute;それを設定し、基本的にそのleft値

を変更することで、それは位置だアニメーションその後、リンク/ pagenumbersと同じwidthとheightを持っており、余分な<div> 「有名な」LavaLampプラグインと同じ原則は、<ul>と余分に使用します<li>