horizontal scrollpane

[papaver]

I need a image content (cms) horizontal jscrollpane.
The example http://tmcdomains.com/jScrollPane/themes/lozenge/
with images works good, but the images are first placed on the whole wide (max-width: 2400px, in reality endless) and then only in the second row – that is not what I want/need.

That is what I need:
The first 50 images should first placed on the actually/visible site (width: 1200px) – row by row.
And when the 51 imagae should placed after the last from the top row.

simple example:
--------------------------------------------------------------------
1-image 2-image 3-image || 7-image 8-image 9-image ||.................
4-image 5-image 6-image || 10-image …................... ||................
-------------------------------------------------------------------
.........1200px.................|..............1200px...............|......1200px...
-> scroll -> scroll -> scroll -> -> scroll -> scroll -> scroll -> -> scroll ->


I don't now, how many images are loaded, because this is a CMS-site.
I think this could realize with javaScript/jQuery – but I don't know how (because I am a newbie)

Thanks much!

[bernie1227]

Try here:
http://www.htmldrive.net/items/show/653/jQuery-Large-Thumb-Photo-Gallery
I know it's not 50 images, but I'm sure there's a way to customise it.

this (http://codecanyon.net/item/jquery-thumbnail-gallery-with-lightbox/2711906) appears more to your liking

[papaver]

Thanks Bernie - the first link (jQuery Large Thumb Gallery) could be the right way.
But it is a CMS-Wordpress-Site, and so the customer loads the images up.
How can I realize it, to generate a new 6-Images-group-Class automatically?
I am a javascript-Newbie and have no Idea how to realize this.
Thanks

[bernie1227]

What do you mean by automatically generating the images-group-class automatically? Do you mean to automatically generate the image paths? If so, where are these paths coming from?

[papaver]

The customer loads the images over the wordpress-dashboard. I display it with


<?php $image = rwmb_meta( 'metabox_screenshot2' );
if ( $image != '' ) {?>
<a href="<?php the_permalink(); ?>"><?php echo wp_get_attachment_image($image); ?></a>
<?php } ?>
<?php endwhile; endif; ?>

The <ul class="group"> from the (jQuery Large Thumb Gallery-)index.html includes 6 images.
My customer will load more then 6 images, probably more than 70 images and so I need a solution for this.
The solution could be javaScript, that generates every 6 Images a new <ul class="group"> - but I don't know how I realize this, because I don't know enough of javaScript

[bernie1227]

You could use php to generate the code by creating it in a loop and then echoing it into the overall div?