Other Recent Articles

SharePoint 2010 JQuery Slideshow with image fade

By Eranda Ketawalage on Friday, December 23, 2011 0 comments









1. Download the following Javascript

2. Upload those(Jquery.js and jquery.innerfade.js) to your SharePoint site any document library

3. Copy the URL of each Javascript files

4. select the appropriate Image files and upload them in to another image library of your SharePoint site

4. Now go to your SharePoint site home page and add Content Editor web-part

5. Then click Edit Web-part in the down arrow in right side and click Edit HTML in menu bar

6. Add following scripts in to HTML body of the web-part (replace red color parts appropriately with the URLs of JavaScript s and URLs of Images)
==========================================


<script src="/SiteCollectionDocuments/js/jquery.js" type="text/javascript"></script>
<script src="/SiteCollectionDocuments/js/jquery.innerfade.js" type="text/javascript">
</script>



<script type="text/javascript">
       $(document).ready(
              function(){
                     $('#news').innerfade({
                           animationtype: 'slide',
                           speed: 750,
                           timeout: 2000,
                           type: 'random',
                           containerheight: '1em'
                     });

                     $('#portfolio').innerfade({
                           speed: 'slow',
                           timeout: 4000,
                           type: 'sequence',
                           containerheight: '220px'
                     });
                    
                     $('.fade').innerfade({
                           speed: 'slow',
                           timeout: 1000,
                           type: 'sequence',
                           containerheight: '1.5em'
                     });
              }
       );
</script>


<ul id="portfolio">
<li><img src="images/image1.jpg"/></li>
<li><img src="images/image2.jpg"/></li>
<li><img src="images/image3.jpg" /></li>
<li><img src="images/image4.jpg" /></li>
<li><img src="images/image5.jpg" /></li>
</ul>      

==========================================


Category: fade , image , Javascript , JQuery , SharePoint , Slideshow

0 comments:

Post a Comment

Amazon

Share this