jQuery Gallery View

jQuery Gallery View

Hello, I am using the following script for my shop:

http://spaceforaname.com/galleryview

Prestashop has a lack of good free modules (with back end admin) and so I start meddling with that module to make it look like this:
http://prestoquartz.hostingpower.nl/media.php (The pictures slide show)

My JavaScript knowledge is minimal-medium, I mainly used logic, combined with manyyy hours and hardcore attention to make it look and behave like that.

As you can see, apparently all the pictures are doubled. This is actualy the issue. And the other one, that only the first is lightbox enabled, altough the class="thickbox" is everywhere.

My logic:
After studying alot http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js
I found out that the js makes a list of all the pictures that come from the backend and shows them in a overflow hidden div, to restrict the number shown at one time. The script loops everything so that it is continuously when scrolled through. I wanted it to output on two rows, so what I did was to divide by 2 the total length of calculated width of the list and multiplied by two the height of the calculated list, in the hope that I will
show like this:
1    2   3   4  5   6   7   8   9   10
11 12 13 14 15 16 17 18 19 20
But because of the loop part it shows like this:
20 1 2 3 4 5 6 7 8 9 10 ..20
1  2 3 4 5 6 7 8 9 10 ..20

I am really confused, it's been three days since I'm sitting on this and can't solve the problem.

This is the function that builds the strip:
  1. function buildFilmstrip() {
                //Add wrapper to filmstrip to hide extra frames
                j_filmstrip.wrap('<div class="strip_wrapper"></div>');
                if(slide_method=='strip') {
                    j_frames.clone().appendTo(j_filmstrip);
                   
                    j_frames = $('li',j_filmstrip);
                }
                //If captions are enabled, add caption divs and fill with the image titles
                if(opts.show_captions) {
                    j_frames.append('<div class="caption"></div>').each(function(i){
                        $(this).find('.caption').html($(this).find('img').attr('title'));              
                    });
                }













However I modify it, nothing good comes out it.

This is the part that takes care of the width and height:
  1.         j_filmstrip.css({
                    'listStyle':'none',
                    'margin':'0',
                    'padding':'0',
                    'width':strip_width/2+'px',
                    'position':'absolute',
                    'zIndex':'900',
                    'top':'20px',
                    'left':'0',
                    'height':(opts.frame_height+opts.frame_height+20)+'px',
                    'background':opts.background_color
                });
                j_frames.css({
                    'float':'left',
                    'position':'relative',
                    'height':opts.frame_height+'px',
                    'width': '120px',
                    'zIndex':'901',
                    'marginTop':'0'+'px',
                    'marginBottom':'20px',
                    'marginRight':'20'+'px',
                    'padding-left':'20'+'px',
                    'padding-right':'20'+'px',
                    'padding-top':'20'+'px',
                    'padding-bottom':'30'+'px',
                    'cursor':'pointer'
                });


























When I take down the overflow hidden that upper div (the looking glass) has, it looks like the script multiplies my images 3 times, HOW can I destroy that loop, only to show the images from the backed as a list, that breaks in half because of the width like this:

1    2   3   4  5   6   7   8   9   10
11 12 13 14 15 16 17 18 19 20



Hope i didn't miss anything, I am really spaced after so many days of trying and not succeding.

I have attached the original js, and the modified js, I should re- mention that the original script would also loop the images, and also that I have set the class="thickbox" on all the links, but the first 20 pictures are lightbox-able, the rest just open the original picture.

thanks a lot for any advice or hint!



Live Long and Prosper!