Ritesh Udupa's Blog

HTML Code:

<html>
<head>
<title>
Slideshow with JQuery
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
var Icount = $(".ISlideShow div").length;
        var fade = setInterval("rotateImages()",5000);
$(".ISlideShow div").hover(function(){
                 clearInterval(fade);
  $(".Thumbnails").show();
       },function(){
  $(".Thumbnails").hide();
          $(".ISlideShow div").show();
  fade = setInterval("rotateImages()",5000);
});
$(".Thumbnails").hover(function(){
                 clearInterval(fade);
  $(".Thumbnails").show();
  },function(){
  $(".Thumbnails").hide();
                 $(".ISlideShow div").show();
  fade = setInterval("rotateImages()",5000);
});
$(".Thumbnails img").hover(function(){
  var checkurl = $(this).attr("src");
  $(".ISlideShow div").hide();
  $(".ISlideShow div img[src = '"+checkurl+"']").parent().show();
},function(){
});
});
function rotateImages(){
var oCurPhoto = $(".ISlideShow div.current");
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
  oNxtPhoto = $(".ISlideShow div:eq(0)");
oCurPhoto.removeClass("current").addClass("previous");
oNxtPhoto.css({opacity:0}).addClass("current").animate({opacity:1},1000,function(){oCurPhoto.removeClass("previous");});
}
</script>
<style type="text/css">
div.ISlideShow{
  width:400px;
  height:300px;
}
.ISlideShow div{
  position:absolute;
  z-index:0;
}
  .ISlideShow div.previous{
  z-index:1;
}
.ISlideShow div img{
  width:400px;
  height:300px;
}
.ISlideShow div.current{
  z-index:2;
  opacity:1;
}
.Thumbnails{
  display:none;
}
.Thumbnails .TImages{
  position:absolute;
  z-index:3;
}
.Thumbnails .transparent{
  position:absolute;
  z-index:2;
  background-color:#fff;
   filter: alpha(opacity=50);
                 -moz-opacity: 0.5;
                 -khtml-opacity: 0.5;
                 opacity: 0.5;
                 height:70px;
  margin-top:-70px;
  width:400px;
}
.Thumbnails div{
  padding-top:50px;
  margin-top:-80px;
  padding-left:5px;
}
.Thumbnails div img{
  float:left;
  width:75px;
  height:50px;
  margin-right:15px;
}
</style>
</head>
<body>
<div class="ISlideShow" style="width: 100%;">
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWiDoO1oO4H_3x5jbayOR7Kq1BAQV_YnsDyQMr5bdYdv47F5AVQtBnW58YqhlpEWsG3AfQ8u1vyjaxaWYlS6GMMi66sDabZoAH8pGzVbmgCcLESUVHIO07zTFzTwSlY6bhlY0QjTuQ5xw/s400/abstract-pictures-electric-guitar-desktop_.jpg" /></div>
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AFGlzwDwGF5JEJa_xt7rtyzs4pgu7IXh6HXCzCTHClGnuJK69BlTFOzi91r3Xuflcw9ZNwCYOg94oBKeGh42yU4qKTHhbTWagrliIgn7ozgmQKnkBujKeBny8v9BZwyHp0aXzqJ2fvH5/s400/3d_abstract_white-hd.jpg" /></div>
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN6ttXDuaP7X-HmGfZo6MwixV_z4123PHalekEQrUC1QRV7glnliAAtEFQlcCYYpMSzxBsCZf6TCnXBa01OvRWVV0Z0I59-_QVAgbRkCQ8IaPzDJhoexEqbmuSdReyEQ7jVjrScUEI_cy/s400/abstract-pictures-abstract-cool.jpg" /></div>
</div>
<div class="Thumbnails">
<div class="TImages">
<div class="ImagesFetched">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWiDoO1oO4H_3x5jbayOR7Kq1BAQV_YnsDyQMr5bdYdv47F5AVQtBnW58YqhlpEWsG3AfQ8u1vyjaxaWYlS6GMMi66sDabZoAH8pGzVbmgCcLESUVHIO07zTFzTwSlY6bhlY0QjTuQ5xw/s400/abstract-pictures-electric-guitar-desktop_.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AFGlzwDwGF5JEJa_xt7rtyzs4pgu7IXh6HXCzCTHClGnuJK69BlTFOzi91r3Xuflcw9ZNwCYOg94oBKeGh42yU4qKTHhbTWagrliIgn7ozgmQKnkBujKeBny8v9BZwyHp0aXzqJ2fvH5/s400/3d_abstract_white-hd.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN6ttXDuaP7X-HmGfZo6MwixV_z4123PHalekEQrUC1QRV7glnliAAtEFQlcCYYpMSzxBsCZf6TCnXBa01OvRWVV0Z0I59-_QVAgbRkCQ8IaPzDJhoexEqbmuSdReyEQ7jVjrScUEI_cy/s400/abstract-pictures-abstract-cool.jpg" />
</div>
</div>
<div class="transparent">
.</div>
</div>
</body>
</html>

Demo:

You can see the demo on top of this blog.
The dimensions are tweaked to make the allignments right. You can make changes in margin and padding as you wish.

Hi Guys,

This is my first time blogging and i am excited.
I have seen so many guys out there trying to bring in JQuery to browser enabled infopath forms in Sharepoint. Is this even possible?
The answer is YES.

Steps:

1). There is a core.js file loaded when you open your browser enabled infopath form. This is our key to success. Location of the file for me is http://sitename/_layouts/inc/core.js and may differ for you guys.

2). Get the head tag of the page.

   var head = document.getElementsByTagName('head')[0];

3). Including jquery in head tag.

      var script1 = document.createElement('script');
   script1.type = 'text/javascript';
   script1.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js';
   head.appendChild(script1);

4). Include one more .js file in head where you can write your jquery code.

       var script2 = document.createElement('script');
   script2.type = 'text/javascript';
   script2.src = '/_layouts/inc/customjs.js';
   head.appendChild(script2);

5). Include .css file for styling in the head section.
      var style1 = document.createElement('link');
   style1.rel = 'stylesheet';
   style1.type = 'text/css';
   style1.href = '/_layouts/inc/CustomCss.css';
   head.appendChild(style1);

6). Verify whether your jquery document ready works by writing the following in customjs.js file

        $(function(){
          alert('It Works');
    });

7). IMPORTANT - Your infopath form is loaded to browser after the document ready function is called hence your controls in infopath are still undefined.
   Solution:
     window.onload = function() {
         window.setTimeout(readyCall, 1000);
   }
     function readyCall(){
       alert('It works');
}

readyCall is a function which is called after a delay of 1 second and within that time your infopath form should be loaded else increase the delay. Now there is no need to write JQuery's document ready. Write all your code in the function you call after window.setTimeout.

8). WARNING!! - The core.js file is loaded for all your infopath forms in your site hence including customjs.js file might create serious problems. So, before including the customjs.js file, verify your url first and include the file.
            Use this in core.js file to check your URL
       if(window.location = "/*URL of infopath form*/")
       {
          //include jquery, javascript and css file.
       }

Now you can use jquery to make ajax calls to get data into your forms or add fading effects, animations etc. The use is endless. Remember, Use this only if you cannot get something to work in infopath the normal way.

Please do let me know if there is a better way to do this.
Happy to receive your suggestions and comments. Happy Coding :-)

Ritesh Udupa's Blog

Slideshow with hover effect - Demo

Sunday, November 28, 2010

Image Slideshow using JQuery with hover effect

Wednesday, September 22, 2010

Add JQuery to Browser enabled Infopath forms in SharePoint - Ritesh Udupa K