Trying to use two jquery plugins but failing
Hi all,
I am trying to use two jquery plugins one for rotation and the other fancybox...
they both work seperately but not together! any suggestions would be greatly appreciated!
-----------------------------------------------------------here is the code -----------------------------------------------------
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="CSS/screen.css" rel="stylesheet" />
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
<title>Practise Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="JS/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="CSS/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="JS/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="CSS/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="JS/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="JS/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="CSS/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="JS/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="JS/jQueryRotate.2.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dellLogo').rotate({
bind:
{
mouseover: function () {
$(this).rotate({ animateTo: 360 })
},
mouseout: function () {
$(this).rotate({ animateTo: 0 })
}
}
});
$('.fancybox').fancybox();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<span class="push-6 span-24 last" style="border-radius: 10px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);margin-top:20px;">
<span class="push-1 span-5" id="logo" style="padding-top:20px;">
<a href="/Default.aspx"><img src="images/dell.png" alt="NME" height="150" width="150" id="dellLogo"/></a>
</span>
<span class="push-1 span-18 last" style="height:85px; padding-top:61px;">
<asp:Menu ID="Menu1" runat="server" DynamicHorizontalOffset="1"
Font-Names="Trebuchet MS" Font-Size="2.25em"
ForeColor="#595959" Orientation="Horizontal"
StaticSubMenuIndent="20px">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<%--<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />--%>
<%--<DynamicMenuStyle BackColor="#B5C7DE" />--%>
<StaticSelectedStyle ForeColor="#B2C2C6" />
<%--<DynamicSelectedStyle ForeColor="White" />--%>
<%--<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />--%>
<StaticHoverStyle ForeColor="White" />
<Items>
<asp:MenuItem Text="Home" Value="Home" NavigateUrl="~/Default.aspx">
</asp:MenuItem>
<asp:MenuItem Text="D.R." Value="dataRepeater" NavigateUrl="~/dataRepeater.aspx">
</asp:MenuItem>
<asp:MenuItem Text="D.G." Value="dataGrid" NavigateUrl="~/dataGrid.aspx">
</asp:MenuItem>
<asp:MenuItem Text="Issues" Value="issues" NavigateUrl="~/issues.aspx">
</asp:MenuItem>
</Items>
</asp:Menu>
</span>
<span class="span-16" style="margin-top:50px; margin-left:-150px;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</span>
<span class="span-5 last" id="advertisement" style="padding-top:160px; padding-left:15px;">
<span class="prepend-1">
<a class="fancybox" rel="group" href="images/dell.png"><img src="images/dell.png" alt="NME" height="150" width="150" /></a>
</span>
<span class="prepend-1">
<a class="fancybox" rel="group" href="images/dell.png"><img src="images/dell.png" alt="NME" height="150" width="150" /></a>
</span>
<span class="prepend-1">
<a class="fancybox" rel="group" href="images/dell.png"><img src="images/dell.png" alt="NME" height="150" width="150" /></a>
</span>
<span class="prepend-1">
<a class="fancybox" rel="group" href="images/dell.png"><img src="images/dell.png" alt="NME" height="150" width="150" /></a>
</span>
</span>
<span class="push-5 span-23 last" id="footer" style="height:25px; padding-bottom:5px; padding-top:25px; ">
<span class="span-20 push-2 last" style="padding-left:15px;">
<asp:Menu ID="Menu2" runat="server" DynamicHorizontalOffset="1"
Font-Names="Trebuchet MS" Font-Size="1.25em"
ForeColor="#595959" Orientation="Horizontal"
StaticSubMenuIndent="20px">
<StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="2px" />
<%--<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />--%>
<%--<DynamicMenuStyle BackColor="#B5C7DE" />--%>
<StaticSelectedStyle ForeColor="#B2C2C6" />
<%--<DynamicSelectedStyle ForeColor="White" />--%>
<%--<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />--%>
<StaticHoverStyle ForeColor="White" />
<Items>
<asp:MenuItem Text="Home" Value="Home" NavigateUrl="~/Default.aspx">
</asp:MenuItem>
<asp:MenuItem Text="About" Value="About" NavigateUrl="~/Default.aspx">
</asp:MenuItem>
<asp:MenuItem Text="Products" Value="Products" NavigateUrl="~/Default.aspx">
</asp:MenuItem>
<asp:MenuItem Text="Contact" Value="Contact" NavigateUrl="~/Default.aspx">
</asp:MenuItem>
</Items>
</asp:Menu>
</span>
</span>
</span>
<span class="span-24 push-14">
<p style="color:black; font-size:0.75em;">This asp.net has been created by Joshua Edwards</p>
</span>
</form>
</body>
</html>