Only JavaScript and html slide show in Share Point

You Have to add the scrip in your Master Page .
 <script type="text/javascript">

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
    </script>

Toggle in Picture Sliding Webpart and Video Webpart in Sharepoint 2010

In this toggle the Video webpart and Sliding webpart in sharepoint using the simple jquery.

1)First add the two webparts in sharepoint site and save it.
2)And than go to the SP designer.
3)Open the Particular Page and find the webpart(Video webpart and Sliding webpart) place.its like below

4)And arranged the with in the <td> tag.(img below)

5)After that create a hyper links on top of div tag.

6)Add the jquery coding on the bottom of the page and also refer the jquery-1.4.1.js.



 <script type="text/javascript">
        $(document).ready(function () {
            $('#slide_toggle').hide();
        });

        $(function () {
            $('#slide_toggle').click(function () {
                $('#slideWebpart').toggle();
                $('#videoWebpart').hide();

                $('#slide_toggle').hide();
                $('#video_toggle').show();
            });
        });

        $(function () {
            $('#video_toggle').click(function () {
                $('#videoWebpart').toggle();
                $('#slideWebpart').hide();

                $('#video_toggle').hide();
                $('#slide_toggle').show();
            });
        });
    </script>

6)finally save the page and see the output.

Hide the Picture WebPart Frame Layout and Titlebar

We have hide and Enable the Picture Web Parts Library.
since Picture Library was like that

And than we have to remove the From and icon from the Picture Library
First we
1)Go to SP Designer and Open the Particular Page.
2)Fine this Picture Library Part in designer code view.like this



3)After that in this Picture Library WebPartZone set the FrameType="None" for like blow fig
 4)and the set Franetype="none".
5) finally save and Refersh the page the Picture Library like...

Picture Library Slide Show Images within fixed size

This slide show web part displays the images with it's original size. Due to this the web part changes its size according to the image size. If we want the slide show to run within the specific size on the page then we need to control the size of the images to the fixed length during runtime.

To achieve this we need to add the picture Library Slide Show web part & insert the following script in that web part.

<style type="text/css">
.ms-WPBody TD {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: auto !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.ms-WPBody TD DIV {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100% !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.ms-WPBody TD IMG {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 260px !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 190px !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px; align: center
}
.s4-wpcell-plain {
    PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100% !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
}
.ms-PartSpacingVertical {
    MARGIN-TOP: 0px
}
.style1 {
    COLOR: #808080
}</style>

SharePoint SlideShow Using Java script

using this  code in master Page at where you want

 <a href="javascript:gotoshow()">
        <img src="images/1.jpg"" name="slide" border="0" width="300" height="375"></a>

      <script type="text/javascript">
        slideshowimages("images/1.jpg", "images/2.jpg", "images/3.jpg");
        slideshowlinks("#", "#", "#");

        //configure the speed of the slideshow, in miliseconds
        var Sspeed = 2000

        var Currentimage = 0
        var whichimage = 0
        function slideit() {
            if (!document.images)
                return
            document.images.slide.src = Simage[whichimage].src
            Currentimage = whichimage
            if (whichimage < Simage.length - 1)
                whichimage++
            else
                whichimage = 0
            setTimeout("slideit()", Sspeed)
        }
        slideit()
    </script>


After that Add this script to inside the Head tag in SharePoint Master Page.


    <script type="text/javascript">


var Simage=new Array()

var Slink=new Array()

function slideshowimages(){

for (i=0;i<slideshowimages.arguments.length;i++){

Simage[i]=new Image()

Simage[i].src=slideshowimages.arguments[i]

}

}




function slideshowlinks(){

for (i=0;i<slideshowlinks.arguments.length;i++)

Slink[i]=slideshowlinks.arguments[i]

}




function gotoshow(){

if (!window.winslide||winslide.closed)

winslide=window.open(Slink[Currentimage])

else

winslide.location=Slink[Currentimage]

winslide.focus()

}    </script>



That's it... it working all browser.

Picture library slide show webpart Alignment issues (sharepoint 2010)

The picture library webpart uses the css classes in corev4.css in sharepoint 2010. The web part uses “.ms-WPBody” css class for styling. I over wrote this class in my custom style sheet as “.ms-WPBody.
 So, I wrote my custom css using this class name as follows: 

.ms-WPBody.noindex{ font-size:8pt; font-family:"Segoe UI" !important; } .ms-WPBody.noindex table{ font-size:1em; width:100% !important; height:100% !important; } .ms-WPBody.noindex td{ font-size:10pt; font-family:"Segoe UI" !important; width:100% !important; height:200px !important; margin-left:auto !important;margin-right:auto !important; /* text-align:center !important;*/ } .ms-WPBody.noindex td div{ height:auto !important; width:100% !important; text-align:center !important; display:block !important;; } .ms-WPBody.noindex td div span{ width:100% !important; } .ms-WPBody.noindex td img{ height:100% !important; width:100% !important; } 

source code like that..

<table>
<tr>
<td>
<div>
<WebPartPages:PictureLibrarySlideshowWebPart>
</WebPartPages:PictureLibrarySlideshowWebPart>
</div>
</td>
</tr>
</table>