jQuery Scrollable problem

[authorandrew]

Hello,
I have a dilemma that I need to solve quickly as possible. On my website, Mosaic Web, there is a portfolio page:

http://www.mosaic-web.com/p/portfolio.php

Now, I am not very good with jQuery, but I have managed to use a plugin to create this content slider as I liked. But my question occurs when I reach more than five items. I would like to implement a scrollable jquery such as this version:

http://flowplayer.org/tools/demos/sc...e/gallery.html

But this only seems capable of displaying images in the main area, and as you can see my main area contains an image, a header, some text, and button.

I would like to somehow merge these two plugins into one so that I can have HTML content in the main display area yet still use the scrollable (with multiple pages and arrows) of the other plugin.

You can see on my page that the thumbnails do not extend all the way to the left, by the logo; this is because I've reserved 40px for the slider arrows.

Is there a way to merge these two? If not, is there some other plugin that does what I need?

aa

[authorandrew]

Note: This webpage isn't yet finished, and is still in production; apologies if it doesn't display correctly in some browsers, particularly IE. But you all are web people; doubtless your browsers will show it fine (I'm using FF4)

[authorandrew]

I am holding the thumbnails within a UL. There should be a way with jquery to dynamically switch out the UL for another one (with thumbnails 5-10)

Here is my HTML code:

<div id="portfolio-top">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="../img/portfolio/itb-thumb.jpg" alt="Into the Book" title="Into the Book	"/>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/portfolio/ff-thumb.jpg" alt="FaceFinder" title="FaceFinder"/>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="../img/portfolio/chinese-thumb.jpg" alt="Chinese Takeaway" title="Chinese Takeaway"/>
					</a>
				</li>
			</ul>
			<br class='both'/>
		</div><!--portfolio-top-->
		
		<div id='content-wrap'>
		<ul id="output">
				<li>
					<img class="thumbnail" alt="Into the Book" src="../img/portfolio/into-the-book.jpg" />
					<span class="description-container">
					<h3>Into the Book</h3>
					<p><strong>Time:</strong> January 2011
					<br/>
					Into the Book is a Christian book reviews website. They wanted a redesign for their second birthday--something open and clean. I wanted to base the design off of the original I made for them a year ago, while still giving it a fresh new look.</p>
					<a class='button' href='http://www.intothebook.net'>View Live Site</a>
					</span>
				</li>
				<li>
					<img class="thumbnail" alt="FaceFinder" src="../img/portfolio/face-finder.jpg" />
					<span class="description-container">
					<h3>FaceFinder</h3>
					<p><strong>Time:</strong> December 2010
					<br/>
					FaceFinder is a budding new website that will help authors find faces for their characters in their fiction novels. They wanted a functional website that would still look stylish.</p>
					<a class='button' href='http://www.face-finder.net'>View Live Site</a>
					</span>
				</li>
				<li>
					<img class="thumbnail" alt="ChineseTakeaway" src="../img/portfolio/chinese-takeaway.jpg" />
					<span class="description-container">
					<h3>Chinese Takeaway</h3>
					<p><strong>Time:</strong> June 2010
					<br/>
					Chinese Takeaway is an elegant, stylish blogger template, suitable for almost any genre of blogging. This template includes customizable, flexible features that will make it easy for anyone to use. </p>
					<a class='button' href='http://themeforest.net/item/chinese-takeaway/137725&amp;ref=authorandrew'>Buy Template</a>
					</span>
				</li>
			</ul>

I should be able to get this to work, but I am still stuck. Any way to figure this out?

aa

[SB65]

Don't have time to look at this in detail, but it seems like all you need to do is apply that scrollable plugin to your ul#tabs, so that you can scroll if there's more than five. You don't need any more than this because you'ev already got the code to fade in the main div with the large image and text.

Not sure if that's helpful....

[authorandrew]

That's what I'm thinking as well - I think I will return tonight to beat my head against this for a little longer.

aa