Friday 22 March 2013

how to Create Image slide show or Image Slider Using JQuery in asp.net


Description:-

                  in this example we explain how to create a Fancy slide show of an Image witout Refreshing the page using Jquery.

today in Every Application or in Every website we all show that Slide show of the Buisness relative Images are Displayed in Slide show. so you can easily create a Beautiful Slide show and put it in your Application.

in which we use the jquery fadeOut() and  fadeIn() Function to move the image one by one from right to left and continuesoly display image from the bunch of image that we already set it in advance in design time.


Fancy Slideshow of Image Gallery in JQuery Slide Show in JQuery 

Fancy and Beautiful Login Popup in JQuery SignUp and Login Popup in Jquery  



Code For Slide Show:-

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
    $("#slideshow > div:gt(0)").hide();

    setInterval(function () {
        $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    }, 3000);
    $(document).ready(function () {
        $("#flip").click(function () {
            $("#panel").slideToggle("slow");
        });
    });
</script>
    <title>YaMessaging - In House Messaging and Mailing System</title>
    <style type="text/css">
        #slideshow {
    margin: 50px auto;
    position: relative;
    width: 300px;
    height: 50px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}
 #panel
{

text-align:center;
background-color:inherit;
border:solid 1px #c3c3c3;
border-color:Blue;
display:block;
width:100px;
height:50px;
position:absolute;
right:50px;

}
#panel
{
padding:50px;
display:none;
}
.b1
{
    position:absolute;
    right:20px;
    top:100px;
}
.b2
{
    position:absolute;
    right:100px;
    top:100px;
}
.im
{
    position:absolute;
    right:120px;
    top:50px;
 
}
 .s
{
list-style-image: url('online.png');
}
.z
{
    position:absolute;
            top: 20px;
            left: 15px;
            width: 16px;
            height: 50px;
        }
        .style1
        {
            width: 100px;
            height:50px;
            vertical-align: top;
        }
        .t
        {
          background-color: White; border-color:Black;border-width:1px;border-style:solid;height:150px;width:150px; font-size: 11pxpadding: 4px 4px 4px 4px;
        }
    </style>
</head>




 <body>
<div id="slideshow">
   <div>
     <img src="1.jpeg" height="150" width="300" />
   </div>
   <div>
     <img src="2.jpeg" height="50" width="300" alt="a" />
   </div>
   <div>
     <img src="3.jpeg" height="50" width="300" alt="a" />
   </div>
   <div>
     <img src="4.jpeg" height="50" width="300" alt="a" />
   </div>
   <div>
     <img src="5.jpeg" height="50" width="300" alt="a" />
   </div>
   <div>
     <img src="6.jpeg" height="50" width="300" alt="a" />
   </div>
   <div>
     <img src="7.jpeg" height="50" width="300" alt="a" />
   </div>
   <div>
     <img src="8.jpeg" height="50" width="300" alt="a" />
   </div>
</div>

</body>
This entry was posted in :

0 comments:

Post a Comment