Click here to Skip to main content
15,304,276 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
Hello,
I wanted to have a slideshow for a portfolio website and I liked to use the Coin Slider[^] with ASP.Net. Here is my code:
ASP.NET
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
    $(window).load(function () {
        $('#coin-slider').coinslider(
        {
            width: 600, // width of slider panel
            height: 300, // height of slider panel
            spw: 7, // squares per width
            sph: 5, // squares per height
            delay: 3000, // delay between images in ms
            sDelay: 30, // delay beetwen squares in ms
            opacity: 0.7, // opacity of title and navigation
            titleSpeed: 3000, // speed of title appereance in ms
            effect: 'random', // random, swirl, rain, straight
            navigation: true, // prev next and buttons
            links: true, // show images as links
            hoverPause: true // pause on hover
        }
        );
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
	<div id="coin-slider">
        <asp:HyperLink ID="HyperLink1" runat="server">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/SliderImages/pic1.jpg" />
            <span>
                <asp:Label ID="Label1" runat="server" Text="Label">Loren Empsome</asp:Label></span>
        </asp:HyperLink>
        <asp:HyperLink ID="HyperLink2" runat="server">
            <asp:Image ID="Image2" runat="server" ImageUrl="~/SliderImages/pic2.jpg" />
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>asads wrere sasdsdadas</span>
        </asp:HyperLink>
        <asp:HyperLink ID="HyperLink3" runat="server">
            <asp:Image ID="Image3" runat="server" ImageUrl="~/SliderImages/pic3.jpg" />
            <span>
                <asp:Label ID="Label3" runat="server" Text="Label">sd 53234234 hsdf zfgdfdf</asp:Label></span>
        </asp:HyperLink>
        <asp:HyperLink ID="HyperLink4" runat="server">
            <asp:Image ID="Image4" runat="server" ImageUrl="~/SliderImages/pic4.jpg" />
            <span>
                <asp:Label ID="Label4" runat="server" Text="Label">adfasdfab fdfdf sdfff</asp:Label></span>
        </asp:HyperLink>
    </div>
  
</asp:Content>


In Master page, I included:
HTML
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/coin-slider.js"></script>
<link rel="stylesheet" href="../Styles/coin-slider-styles.css" type="text/css" />


The page display and slide changing is fine, but there is no animation between images as seen in Demo[^]. If i used the same concept in plain HTML, the animation works fine. Any idea? Did i do anything wrong? I'm a newbie to .Net framework and trying to learn. Also, can anyone suggest me a similar slideshow like that, but it should be IE6+ compatible?

Thanks in advance.
Posted

which browser u r using ?? most of this all are slide show running in croma and firefox,,
visit this for more slideshow :
http://webanthology.net/1522-jquery-image-slideshowslider-tutorials-and-plugins-for-your-next-projects/2009/11/24/[^]
   
Chauhan_Yatin, thank you for your reply. I tried in all major browsers i.e. Mozilla 11, Chrome 18, and IE9. Images are being changed without any animation. I liked to use Coin Slider as it is Open Source License and animations are pretty cool compared to other sliders which I checked. I checked numerous, but some of them are not working in IE6 or 7 or 8. But Coin Slider's Demo is working, even in IE6 and IE8 also. I tried to use the jQuery 1.4.2 as mentioned by some commentators without any luck. Can anyone check this? By the way, I don't have any other scripts to get conflict..

Thanks... :)
   
Finally, I was able to achieve what i wanted... If we used .Net controls, the engine will add an id to the hyperlinks, images and label controls.. That's causing the problem. this slider will automatically add id's to get images and spans animated. Thanks to firebug for giving idea to fix the issue.

HTML
 <div id="slideHolder">
      <div class="coin-slider" id="coin-slider">
  <div id="slides">
      <a href="#"><img src="SliderImages/pic1.jpg" /><span>Loren Empsome</span></a>
      <a href="#"><img src="SliderImages/pic2.jpg" /><span>asads wrere sasdsdadas</span></a>
      <a href="#"><img src="SliderImages/pic3.jpg" /><span>sd 53234234 hsdf zfgdfdf</span></a>
      <a href="#"><img src="SliderImages/pic4.jpg" /><span>adfasdfab fdfdf sdfff</span></a>
  </div>
</div>
</div>


You can also add this awesome slider to your website. compatible with most of the browsers. Working fine even in IE6.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900