Need to play Slideshow in Galleria and jCarousel script

JavaScript
1

I need to play slideshow in this script.

I am tired but unable to find any solution.

Please help me.

My html code with main big is

<div id="main_image"></div>

My thumnails:


            <div class="scrollable">
                <ul id="mycarousel" class="jcarousel-skin-tango">
                    <li class="active"><img src="images/1.jpg" /></li>    
                    <li><img src="images/2.jpg" alt=""  /></li>
                        <li><img src="images/3.jpg" alt=""  /></li>
                    <li><img src="images/4.jpg" alt=""  /></li>
                    <li><img src="images/5.jpg" alt=""  /></li>
                    <li><img src="images/6.jpg" alt=""  /></li>
                    <li><img src="images/7.jpg" alt=""  /></li>
                    <li><img src="images/8.jpg" alt=""  /></li>
                    <li><img src="images/9.jpg" alt=""  /></li>
                    <li><img src="images/10.jpg" alt=""  /></li>
                    <li><img src="images/11.jpg" alt=""  /></li>
                    <li><img src="images/12.jpg" alt=""  /></li>
                    <li><img src="images/13.jpg" alt=""  /></li>
                    <li><img src="images/14.jpg" alt=""  /></li>
                    <li><img src="images/15.jpg" alt=""  /></li>
                    <li><img src="images/16.jpg" alt=""  /></li>
                    <li><img src="images/17.jpg" alt=""  /></li>
                    <li><img src="images/18.jpg" alt=""  /></li>
                </ul>
            </div>

I need to play slideshow in main_image div with mycarousel ul thumbnail/

2

This will work, but you need to have a large and a small image in your images folder for each of your links.

<html>

<head>

<script type=“text/JavaScript”>
<!–
// list of large image attributes
var P=new Array();
P[“a1”]={wide:200, high:200 }
P[“a2”]={wide:200, high:200 }
//
// expand images function
function expand(obj)
{ var obj.name=indx;
var newSrc=obj.src.replace(“_sml”,“_lg”);
var build=‘<img src="’+newSrc+‘" width="’+P[indx].wide+‘" height="’+P[indx].high+‘">’;
document.getElementById(“mainImage”).innerHTML=build;
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial; font-weight:normal; color:#000; background-color:#FFF; }
#mainImage { position:absolute; top:100px; left:50px; width:400px; height:400px; text-align:center; border:1px solid #C0C0C0; }
#imgList { position:absolute; top:100px; left:550px; width:150px; text-align:center; border:1px solid #C0C0C0; cursor: pointer; }
#imgList p { margin-top:0px; margin-bottom:10px; }
–>
</style>
</head>

<body>

<div id=“mainImage”>
</div>
<!-- end mainImage div –>
<div id=“imgList”>
<!-- need small (1_sml.jpg) and large (1_lg.jpg) images for this to work –>
<p>
<img name=“a1” src=“images/1_sml.jpg” alt=“red image” onclick=“expand(this)” width=“100” height=“100”></p>
<p>
<img name=“a2” src=“images/2_sml.jpg” alt=“blue image” onclick=“expand(this)” width=“100” height=“100”></div>
<!-- end imgList div –>

</body>

</html>