I have a slideshow that uses the Jquery cycle plugin. example of slideshow is

Question

0

Asked: May 24, 20262026-05-24T05:59:39+00:00 2026-05-24T05:59:39+00:00

I have a slideshow that uses the Jquery cycle plugin. example of slideshow is

0

I have a slideshow that uses the Jquery cycle plugin. example of slideshow is at http://collaborativebydesign.com.au/demos/exposure/index.php/design-portfolio/logos

The slideshow works and the navigation scrolls from page to page but my client wants the navigation active link to slide from page to page. So i have been trying to use Jquery .animate to enable this

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

but this doesnt seem to be working. I have tried placing it in a js file and putting the script tag into my head. i have also tried placing the script onto the page. How can i get my navigation links to smoothly transition from page to page

this is the php file that creates the slideshow

    <?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>';}; ?>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-24T05:59:40+00:00

Editorial Team

2026-05-24T05:59:40+00:00Added an answer on May 24, 2026 at 5:59 am

The easiest approach would probably be to have every link on position:absolute; without background and add an extra <div> that has the same width and height as the links/pagenumbers and then animate it’s position by setting it position:absolute; as well and changing its left value

That is basically the same principle as the “famous” LavaLamp plugin uses with an <ul> and an extra <li>

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have a slideshow that uses the Jquery cycle plugin. example of slideshow is

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply