JQuery Image Slider for Announcement List in SharePoint 2007

Written By: Gayathri Narayanan -- 9/15/2011 -- join -- contribute -- (4065) comments -- printer friendly version

Rating: Rate --

Categories: Design, MOSS 2007, Navigation, Programming and Customizations, Visual Studio, Web Parts, WSS3

< Prev - 1 | 2 | 3 | 4 | 5 | 6 | - Next > | Become a paid author

Step 2

: You need to register jQuery in the master page of the SharePoint site. Get the latest jQuery file (jquery-1.6.2.min.js) from jQuery website and store it in a separate folder in the 12 hive. I have done it here "/_layouts/1033/Styles/jQuery".

Nivo Slider needs its own jQuery plug-in to do the sliding function. You can download the Nivoslider Jquery file from here. Add the jQuery file to the same folder and register it along with the JQuery Plug-in. Add the lines below in the masterpage in the <Head> portion to get it registered successfully.

<script type="text/javascript" src="/_layouts/1033/Styles/jQuery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/_layouts/1033/Styles/jQuery/jquery.nivo.slider.pack.js"></script>

Step 3:

Include the function call below in the Masterpage just before the </Body> tag. Below is a screen shot of the master page:

	<script type="text/javascript">
    jQuery(document).ready(function() {
                effect:'fade', //Specify sets like: 'fold,fade,sliceDown' 
                slices:10,  //slice effect not used
                animSpeed:500, //Slide transition speed (500 equals 0.5 second)
                pauseTime:5000, //Set time between transition for Main Banners (5000 equals five seconds)
                startSlide:0, //Set starting Slide (0 index)
                directionNav:false, //Next and Prev
                directionNavHide:false, //Only show on hover
                controlNav:true, //1,2,3...
                controlNavThumbs:false, //Use thumbnails for Control Nav
                controlNavThumbsFromRel:false, //Use image rel for thumbs
                controlNavThumbsSearch: '.jpg', //Replace this with...
                controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
                keyboardNav:false, //Use left and right arrows
                pauseOnHover:true, //Stop animation while hovering
                manualAdvance:false, //Force manual transitions
                captionOpacity:0.7 //Universal caption opacity
            var navValue = jQuery('.nivo-controlNav').children().length;
            navValue = parseInt(navValue * 23);
            jQuery('.nivo-controlNav').css('width', navValue); 
        var controlNav = jQuery('.nivo-controlNav');
        controlNav.find('a.nivo-control').each(function(index) {
            jQuery(this).mouseover (function(){								  
                jQuery('#contentcontainer .preview').fadeIn(); 
                    var total = jQuery('.nivo-controlNav').children().length;
                    var navValue = jQuery(this).attr("rel");
                    navValue = parseInt( navValue);
                    leftvalue = parseInt((234-(total*11.5)) + ( navValue * 23 ));
                  jQuery('.preview div').eq(navValue).css('display', 'block');
				  jQuery('.indicator').css('left', leftvalue);
            jQuery(this).mouseout (function(){								  
                  jQuery('#contentcontainer .preview').hide();
                  jQuery('.preview div').css('display', 'none');

< Prev - 1 | 2 | 3 | 4 | 5 | 6 | - Next >

Learn more about SharePoint

Sponsor Information

Copyright (c) 2010-2017 Edgewood Solutions, LLC All rights reserved
privacy | disclaimer | copyright | advertise | contribute | feedback | about
Some names and products listed are the registered trademarks of their respective owners. |