how do i use a photo slide show inside listview??i am using jquery....the first row works fine..the pictures keep on looping...but in the next rows the pictures do not change..i mean its static...i am binding the image path from the columns"Image1" "Image2" "Image3".
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Restaurant.aspx.vb" Inherits="Restaurant" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="CSS_Styles/Restaurant.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="header">
<asp:LoginStatus ID="LoginStatus1" runat="server"
ForeColor="White"
CssClass="signin" />
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
CssClass="register"
ForeColor="White"
NavigateUrl="~/login.aspx">Register</asp:HyperLink>
<asp:Label ID="Label2" runat="server"
ForeColor="White"
CssClass="welcome">Welcome!Guest.
</asp:Label>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/account.aspx"
ForeColor="White"
CssClass="myaccount"
ToolTip="Click here to go to your account page.">My Account</asp:HyperLink>
<asp:Label ID="Label2" runat="server"
ForeColor="White"
CssClass="welcome">Welcome!<asp:LoginName ID="LoginName2" runat="server" />
</asp:Label>
</LoggedInTemplate>
</asp:LoginView>
<!-- end .header --></div>
<div id="navPos">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<asp:HyperLink ID="Home" runat="server" NavigateUrl="~/homepage_aspx/homepage.aspx">Home</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="Products" runat="server" CssClass="MenuBarItemSubmenu">Products</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Groceries" runat="server">Groceries</asp:HyperLink></li>
<li><asp:HyperLink ID="DepartmentalItems" runat="server">Departmental Items</asp:HyperLink></li>
<li><asp:HyperLink ID="Electronics" runat="server">Electronics</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Mobiles" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=mobiles">Mobiles</asp:HyperLink></li>
<li><asp:HyperLink ID="Laptops" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=computers">Laptops & Computers</asp:HyperLink></li>
<li><asp:HyperLink ID="Accessories" runat="server">Accessories</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="Kitchen" runat="server">Kitchen Items</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink5" runat="server">HyperLink</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink6" runat="server">HyperLink</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="WhyUS" runat="server">Why Us</asp:HyperLink></li>
<li><asp:HyperLink ID="Payment" runat="server">Payment</asp:HyperLink></li>
<li><asp:HyperLink ID="Contact_Us" runat="server" NavigateUrl="ContactUs.aspx">Contact Us</asp:HyperLink></li>
<li><asp:HyperLink ID="AboutUs" runat="server">About Us</asp:HyperLink></li>
</ul>
</div><br /><br />
<div class="content1">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</div>
<br />
<!-- <div id="wrapper">
<div id="ResImage">
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White">
Pay Rs 499 for MAKEOVER PACKAGE:
Revival Facial, Haircut, Hair Wash, Blow Dry,
Upper Lip & Eyebrows Threading worth
Rs 1480 @ LAKME STUDIOS & SALONS, DELHI & NCR
(Valid at 16 outlets)</asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text="Rs.2000" CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text="Rs.6000" CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text="Rs.1400" CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="开发者_StackOverflow中文版server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div> -->
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"
DataKeyNames="OfferID" GroupItemCount="2" >
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<td runat="server" style="">
OfferID:
<asp:TextBox ID="OfferIDTextBox" runat="server" Text='<%# Bind("OfferID") %>' />
<br />
RestaurantID:
<asp:TextBox ID="RestaurantIDTextBox" runat="server"
Text='<%# Bind("RestaurantID") %>' />
<br />
Offer:
<asp:TextBox ID="OfferTextBox" runat="server" Text='<%# Bind("Offer") %>' />
<br />
Value:
<asp:TextBox ID="ValueTextBox" runat="server" Text='<%# Bind("Value") %>' />
<br />
Discount:
<asp:TextBox ID="DiscountTextBox" runat="server"
Text='<%# Bind("Discount") %>' />
<br />
YouPay:
<asp:TextBox ID="YouPayTextBox" runat="server" Text='<%# Bind("YouPay") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" />
<br />
</td>
</InsertItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="groupPlaceholderContainer" runat="server" border="0" style="">
<tr ID="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
</td>
</tr>
</table>
</LayoutTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<ItemTemplate>
<td runat="server" style="">
<div id="wrapper">
<div id="ResImage">
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White" Text='<%# Eval("Offer") %>'></asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text='<%# Eval("Value") %>' CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text='<%# Eval("Discount") %>' CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text='<%# Eval("YouPay") %>' CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:Label ID="lblRestaurantName" runat="server" Text='<%# Eval("RestaurantName") %>'></asp:Label><br />
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<td runat="server" style="">
<div id="wrapper">
<div id="ResImage">
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White" Text='<%# Eval("Offer") %>'></asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text='<%# Eval("Value") %>' CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text='<%# Eval("Discount") %>' CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text='<%# Eval("YouPay") %>' CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:Label ID="lblRestaurantName" runat="server" Text='<%# Eval("RestaurantName") %>'></asp:Label><br />
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div>
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">
OfferID:
<asp:Label ID="OfferIDLabel1" runat="server" Text='<%# Eval("OfferID") %>' />
<br />
RestaurantID:
<asp:TextBox ID="RestaurantIDTextBox" runat="server"
Text='<%# Bind("RestaurantID") %>' />
<br />
Offer:
<asp:TextBox ID="OfferTextBox" runat="server" Text='<%# Bind("Offer") %>' />
<br />
Value:
<asp:TextBox ID="ValueTextBox" runat="server" Text='<%# Bind("Value") %>' />
<br />
Discount:
<asp:TextBox ID="DiscountTextBox" runat="server"
Text='<%# Bind("Discount") %>' />
<br />
YouPay:
<asp:TextBox ID="YouPayTextBox" runat="server" Text='<%# Bind("YouPay") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
<br />
</td>
</EditItemTemplate>
<GroupTemplate>
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<SelectedItemTemplate>
<td runat="server" style="">
OfferID:
<asp:Label ID="OfferIDLabel" runat="server" Text='<%# Eval("OfferID") %>' />
<br />
RestaurantID:
<asp:Label ID="RestaurantIDLabel" runat="server"
Text='<%# Eval("RestaurantID") %>' />
<br />
Offer:
<asp:Label ID="OfferLabel" runat="server" Text='<%# Eval("Offer") %>' />
<br />
Value:
<asp:Label ID="ValueLabel" runat="server" Text='<%# Eval("Value") %>' />
<br />
Discount:
<asp:Label ID="DiscountLabel" runat="server" Text='<%# Eval("Discount") %>' />
<br />
YouPay:
<asp:Label ID="YouPayLabel" runat="server" Text='<%# Eval("YouPay") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:databaseConnectionString %>"
SelectCommand="SELECT RestaurantOffers.RestaurantID, RestaurantOffers.Offer, RestaurantOffers.Value, RestaurantOffers.Discount, RestaurantOffers.YouPay, RestaurantName.RestaurantName, RestaurantName.Address, RestaurantName.PhoneNumber, RestaurantName.Image1, RestaurantName.Image2, RestaurantName.Image3, RestaurantOffers.OfferID FROM RestaurantName INNER JOIN RestaurantOffers ON RestaurantName.RestaurantID = RestaurantOffers.RestaurantID ORDER BY NEWID() "
ConflictDetection="CompareAllValues"
DeleteCommand="DELETE FROM [RestaurantOffers] WHERE [OfferID] = @original_OfferID AND [RestaurantID] = @original_RestaurantID AND (([Offer] = @original_Offer) OR ([Offer] IS NULL AND @original_Offer IS NULL)) AND (([Value] = @original_Value) OR ([Value] IS NULL AND @original_Value IS NULL)) AND (([Discount] = @original_Discount) OR ([Discount] IS NULL AND @original_Discount IS NULL)) AND (([YouPay] = @original_YouPay) OR ([YouPay] IS NULL AND @original_YouPay IS NULL))"
InsertCommand="INSERT INTO [RestaurantOffers] ([OfferID], [RestaurantID], [Offer], [Value], [Discount], [YouPay]) VALUES (@OfferID, @RestaurantID, @Offer, @Value, @Discount, @YouPay)"
OldValuesParameterFormatString="original_{0}"
UpdateCommand="UPDATE [RestaurantOffers] SET [RestaurantID] = @RestaurantID, [Offer] = @Offer, [Value] = @Value, [Discount] = @Discount, [YouPay] = @YouPay WHERE [OfferID] = @original_OfferID AND [RestaurantID] = @original_RestaurantID AND (([Offer] = @original_Offer) OR ([Offer] IS NULL AND @original_Offer IS NULL)) AND (([Value] = @original_Value) OR ([Value] IS NULL AND @original_Value IS NULL)) AND (([Discount] = @original_Discount) OR ([Discount] IS NULL AND @original_Discount IS NULL)) AND (([YouPay] = @original_YouPay) OR ([YouPay] IS NULL AND @original_YouPay IS NULL))">
<DeleteParameters>
<asp:Parameter Name="original_OfferID" Type="String" />
<asp:Parameter Name="original_RestaurantID" Type="String" />
<asp:Parameter Name="original_Offer" Type="String" />
<asp:Parameter Name="original_Value" Type="String" />
<asp:Parameter Name="original_Discount" Type="String" />
<asp:Parameter Name="original_YouPay" Type="String" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="RestaurantID" Type="String" />
<asp:Parameter Name="Offer" Type="String" />
<asp:Parameter Name="Value" Type="String" />
<asp:Parameter Name="Discount" Type="String" />
<asp:Parameter Name="YouPay" Type="String" />
<asp:Parameter Name="original_OfferID" Type="String" />
<asp:Parameter Name="original_RestaurantID" Type="String" />
<asp:Parameter Name="original_Offer" Type="String" />
<asp:Parameter Name="original_Value" Type="String" />
<asp:Parameter Name="original_Discount" Type="String" />
<asp:Parameter Name="original_YouPay" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="OfferID" Type="String" />
<asp:Parameter Name="RestaurantID" Type="String" />
<asp:Parameter Name="Offer" Type="String" />
<asp:Parameter Name="Value" Type="String" />
<asp:Parameter Name="Discount" Type="String" />
<asp:Parameter Name="YouPay" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<!-- end .content --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
</script>
</form>
</body>
</html>
jQuery is only finding the first row in the list view marked with an id of slideshow. From http://api.jquery.com/id-selector/:
For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient.
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
Try using a class instead to select your elements.
I didn't try this, but just trying to get you in the right direction... change:
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
to
<div class="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
and anywhere your jquery has #slideshow to .slideshow
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论