[SOLVED] New Category template with products with pictures and combinations... one step closer... Need help with javascript libraries

[YaKs]

Hello all,

I have post in several forums if this category view was possibe (to show all the products with pictures and combination and a add cart button for each product) and the answer was always negative... so I decide to give a try and take a look on the code to see what is possible to be done.

Basically I was moving some code from product.php inside a loop in category.php, for each product just called the smarty product template too. This seemed easy in my head but after two days I am still trying to make it work.

I have reach a point where some results can be shown, the two products with all their pictures in the same page.
http://v2.muertosdearte.com/category.php?id_category=6
(category arcade warrarior)
but in the second product, the javascript doesnt seem to work. here is where I would like to ask for the help of some javascript expert if any. this is my first time dealing with jQuery, jqzoom and others

    __PS_BASE_URI__.'js/jquery/jquery.idTabs.modified.js',
   __PS_BASE_URI__.'js/jquery/jquery.scrollto.js',
   __PS_BASE_URI__.'js/jquery/jquery.serialScroll.js',
   __PS_BASE_URI__.'js/jquery/jquery.jqzoom.js',
   _THEME_JS_DIR_.'tools.js',
   _THEME_JS_DIR_.'product.js'

I dont really know which one is the one in charge of doing the change of the image and the horizontal scroll... jqzoom i guess not.

something I should be aware of? any tip? any help? any good software to debug javascript? I am only using firebug but i am newbie with it.

please find attach the files i modified so far. category.php is locate in the root and the other two in your theme folder.

Hope someone can join me to achieve the goal.

have a nice day! Cheers!
Jose

categorylist.zip

[YaKs]

I figured out yesterday night. I have been struggling with jQuery how to go through the whole DOM tree and register the method displayImage for each 'view_block li a' element. I didnt know how to make a loop so what I did is to set a maximum of 5 product in the category list and create manually 5 hover hooks...

    //hover 'other views' images management
   $('#views_block1 li a').hover(
       function(){displayImage($(this),1);},
       function(){}
   );

       //hover 'other views' images management
   $('#views_block2 li a').hover(
       function(){            
           displayImage($(this),2);},
       function(){}
   );
.....

the I put a counter in category.php and create those view_block[index]... and it works!

http://v2.muertosdearte.com/category.php?id_category=6

just in case someone is interested in this ...

cheers!
Jose