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> Link to comment https://forums.phpfreaks.com/topic/258392-ajax-call-messing-up-image-rotation-timing/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.