<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- Script for flying image --> <script type="text/javascript"> $(document).ready(function(){ $(".productPriceWrapRight a img").click(function() { var productIDValSplitter = (this.id).split("_"); var productIDVal = productIDValSplitter[1]; var productX = $("#productImageWrapID_" + productIDVal).offset().left; var productY = $("#productImageWrapID_" + productIDVal).offset().top; var basketX = $("#basketTitleWrap").offset().left; var basketY = $("#basketTitleWrap").offset().top; var gotoX = basketX - productX; var gotoY = basketY - productY; var newImageWidth = $("#productImageWrapID_" + productIDVal).width() / 3; var newImageHeight = $("#productImageWrapID_" + productIDVal).height() / 3; $("#productImageWrapID_" + productIDVal + " img") .clone() .prependTo("#productImageWrapID_" + productIDVal) .css({'position' : 'absolute','border-width':'5px','border-color':'red','border-style':'dotted'} .animate({opacity: 0.5}, 100 ) .animate({opacity: 0.2, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() { $(this).remove(); }); }); });</script> </head> <body> <form id="form1" runat="server"> <div> <!-- Datalist can also be used --> <!-- add images in the gridview dynamicaly from the database --> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" > <Columns> <asp:TemplateField HeaderText="Model"><ItemTemplate> <div class="productImageWrap" id="productImageWrapID_<%# Eval("ID") %>"> <img src = '<%# "Handler.ashx?ID= " + Eval ("ID") %> ' id = "img" /> </div> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Model"> <ItemTemplate> <div class="productPriceWrapRight"> <!-- a href tag can also be used --> <asp:LinkButton ID="a" CommandName="select" runat="server"> <img src="images/add-to-basket2.gif" alt="Add To Basket" width="111" height="32"id="featuredProduct_<%# Eval("ID") %>" /> </asp:LinkButton> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </div> <div> <div id="basketTitleWrap"> Your Basket </div> </div> </form> </body> </html>
Monday, 1 July 2013
Flying Image from one cart to another
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment