Hi all.

i am currently building a shop and on my home page i have 9 sections for all my categorys, in each of these sections it will pull from the database 5 most viewed products...no problem....

 

however i want it to display the titles as a vertical link;

for example

 

product one

product two

product three

product four

product five

 

with a space next to them so when they are clicked it will display an image of the product and the price underneath,

 

I thought this was straight forward. However, because PHP pulls all 5 results when i click one of the links on the vertical nav, it animates all 5, and shows all images and product information.

 

Can anyone advise, using this system what i would need to do to get JQuery to do one at a time.

 

The code i have written is basic however it exaplins what im trying to acheive.

 

<div class="top_5_cats">
<?php

if (mysql_connect()) {
       printf("Connect failed: %s\n", mysql_error());
       exit();
} else {
       $sql_comp = "SELECT title, price, picture FROM products WHERE category = 'computing' LIMIT 0, 5";
       $res_comp = mysql_query($sql_comp); //May need connection variable

       if ($res_comp) {
               while ($compArray = mysql_fetch_array($res_comp, MYSQL_ASSOC)) {
                       $title=$compArray['title'];
                       $price=$compArray['price'];
                       $picture=$compArray['picture'];
                       ?>
<div class="top_5_links">  <?  echo " <ul><li class=\"tp_links\"> ".$title."</li></ul>";?> </div>
        <li class="top_5_image"> 
                       <img src="../images/thumbs_/<?=$compArray['picture']?> "/>
               <big style="color:green"> £<? echo  "".$price."";?></big>
                       </li>

<script type="text/javascript">

$(document).ready(function() {
                                                  $('.tp_links').click(function() {
                                                                                         $('.top_5_image').fadeIn(2000);
                                                                                                         });

                                                  });
</script>


<?php                   
               }
       } else {
               printf ("Could not retrieve data: %s\n", mysqli_error());
       }
       mysql_free_result($res_comp);
       mysql_close();
}


?>

 

 

 

Thanks in advance!

 

Craig

$('.tp_links').click(function() {

$('.top_5_image').fadeIn(2000);

});

 

});

 

try changing the jquery to target the element rather than the class:

 

$('.tp_llinks').click(function(){
$(this).fadeIn(2000);
});

 

 

that should only trigger the element thats being clicked

I guess I should stop posting first thing in the morning before my coffee has kicked in

 

Sorry

 

Looking at it again cant you set an id on the .top_5_image li based on the title (or another unique value) and target that rather than the class?

 

if ($res_comp) {
           	while ($compArray = mysql_fetch_array($res_comp, MYSQL_ASSOC)) {
                   	$title=$compArray['title'];
                   	$price=$compArray['price'];
                   	$picture=$compArray['picture'];
                   	?>
<div class="top_5_links">  <?  echo " <ul><li class=\"tp_links\"> ".$title."</li></ul>";?> </div>
<li class="top_5_image" id="<? echo $title; ?>"> 
	<img src="../images/thumbs_/<? echo $compArray['picture']?> "/>
	<big style="color:green"> £<? echo  "".$price."";?></big>
</li>

 

	$(".tp_links").click(function(){
		$("#<?php echo $title;?>").fadeIn(2000);
	});

 

something like that?

 

Also should that element be an li I can't see the <ul> <ol> it is in.

 

Thanks Rallport for pointing this out

Do you mind sharing how you would do it?

 

The only other way I can see is to add it to the class attribute instead of using an ID but if there is another way I'd love to know. It's always interesting to see how different developers/coders tackle the same problem