RyanMinor Posted March 6, 2012 Share Posted March 6, 2012 Hi, I have a page where I am running two image rotations and also doing Ajax calls to display products. The first image rotation is being done with jqFancyTransitions which works perfectly regarding whether or not I just made an Ajax call. However the other image rotator I had to code myself because jqFancyTransitions wouldn't work with my transparent png images. So I made my own, but when I click a product (which sends an Ajax call), the timing gets messed up. I am kind of new to JS and jQuery so I am not quite sure what is going on. Any direction or suggestions on how to fix this is appreciated. My code is below. <!DOCTYPE html> <html lang="en"> <head> <title><?php echo $page['page_title']; ?> | <?php echo $header['title']; ?></title> <meta charset="utf-8"> <meta name="keywords" content="<?php echo $page['page_meta_keywords']; ?>"/> <meta name="description" content="<?php echo $page['page_meta_description']; ?>"/> <link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="all"> <link href='http://fonts.googleapis.com/css?family=Questrial|Anton' rel='stylesheet' type='text/css'> <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.5.2.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>js/jqFancyTransitions.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slideshowHolder').jqFancyTransitions({ delay: 5000, width: 483, height: 573, }); $('#merchandiseSlider img').hide(); function merchandiseSlider() { $("#merchandiseSlider img").first().appendTo('#merchandiseSlider').hide(); $("#merchandiseSlider img").first().show(); setTimeout(merchandiseSlider, 10000); } merchandiseSlider(); }); function get_record_id(record_id) { $('#dynamic').load('http://digrepro.com/category/product', { "record_id":record_id }); } </script> </head> <body class="main-background"> <div id="main"> <?php $this->load->view('menu_view'); ?> <div id="content"> <!-- START LEFT-CONTENT --> <div id="left-content" style="float:left; width:485px;"> <!-- START ROTATING IMAGES --> <div id="slideshowHolder"> <?php foreach ($rotators as $rotator) { ?> <img src="<?php echo base_url(); ?>images/<?php echo $rotator['rotator_photo']; ?>" width="483px" /> <?php } ?> </div> <!-- END ROTATING IMAGES --> </div> <!-- END LEFT-CONTENT --> <!-- START RIGHT-CONTENT --> <div id="right-content" style="float:right; width:535px;"> <!-- START THUMBNAIL DISPLAY --> <div id="display-content" style="float:left; margin-left:3px; width:50%;"> <div align="center" style="height:140px; color:#FF1EDC; font-size:36px;"> <img src="<?php echo base_url(); ?>images/<?php echo $header['image']; ?>" style="max-height:140px;" /> </div> <table width="100%" cellpadding="5" cellspacing="0"> <tr> <?php $sql_endRow = 0; $sql_columns = 4; $sql_hloopRow1 = 0; foreach ($products as $product) { if($sql_endRow == 0 && $sql_hloopRow1++ != 0) { ?> <tr> <?php } ?> <td align="center"> <a href="javascript:void(0)" onClick="get_record_id(<?php echo $product['product_id']; ?>)"> <img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" class="product-thumb" /> </a> </td> <?php $sql_endRow++; if($sql_endRow >= $sql_columns) { ?> </tr> <?php $sql_endRow = 0; } } if($sql_endRow != 0) { while ($sql_endRow < $sql_columns) { ?> <td> </td> <?php $sql_endRow++; } ?> </tr> <?php }?> </table> <div id="pagination" align="center"> <?php echo $pagination; ?> </div> </div> <!-- END THUMBNAIL DISPLAY --> <!-- START PRODUCT INFORMATION DISPLAY --> <div id="product-display" style="float:right; width:48%; margin-right:2px;"> <div id="dynamic"> <img src="<?php echo base_url(); ?>/products/<?php echo $initial['product_photo']; ?>" width="100%"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr> <td colspan="2" align="center" bgcolor="#000000"> <div style="color:#FF1EDC; font-size:22px;"> <strong><?php echo $initial['product_name']; ?></strong> </div> </td> </tr> <tr> <td colspan="2" align="left" valign="top" bgcolor="#000000" height="45px"> <div style="line-height:120%; margin-left:8px; margin-right:8px;"> <?php echo $initial['product_description']; ?> </div> </td> </tr> <tr> <td align="left" bgcolor="#000000"><div style="margin-left:8px;"><?php echo $initial['product_sku']; ?></div></td> <td align="right" bgcolor="#000000"><div style="margin-right:8px;">$<?php echo $initial['product_price']; ?></div></td> </tr> <tr> <td colspan="2" align="center" bgcolor="#000000"> <form name="add_to_cart" method="post" action="/cart/add"> <input type="hidden" name="id" value="<?php echo $initial['product_id']; ?>"> <input type="hidden" name="name" value="<?php echo $initial['product_name']; ?>"> <label for="quantity"><span style="color:#FF1EDC; font-weight:bold; font-size:16px;">BUY NOW! </span></label> <select name="quantity" style="margin-right:5px;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="hidden" name="price" value="<?php echo $initial['product_price']; ?>"> <input type="hidden" name="color" value="<?php echo $initial['product_color']; ?>"> <input type="submit" name="add" class="submit" value="Add To Cart"> </form> </td> </tr> </table> </div> <div id="merchandiseSlider" style="margin-top:10px;"> <img src="<?php echo base_url(); ?>images/merchandise-slogan-3.png" /> <img src="<?php echo base_url(); ?>images/merchandise-slogan-1.png" /> <img src="<?php echo base_url(); ?>images/merchandise-slogan-2.png" /> </div> </div> <!-- END PRODUCT INFORMATION DISPLAY --> </div> <!-- END RIGHT-CONTENT --> <div style="clear: both;"></div> </div> <?php $this->load->view('social_view'); ?> <div style="clear:both;"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.