I am trying to implement the galleria plugin into my webpage. I am a javascript newbie so my knowledge is limited. I have included the no conflict plugin and have also changed some of the css for the galleria to not conflict with other css elements(intentionally misspelled names). There is code somewhere, either in the JS or HTML, I am not sure where at this point.
I have searched for related topics but couldnt find any that fit this issue.
I wasnt sure if I could use the link so the code can be found below this message.
I didnt see any rule saying I couldnt post a link but if that is not allowed I will be glad to post the code.

Thanks for any help.

HTML Code:
<div class="dimo">
<div id="main_imige">
</div>
<ul class="gallary_dimo">
<li class="active"><img src="images/wbxray.jpg" alt="Flowing Rock" title="An X-Ray of a feline."></li>
<li><img src="images/wbcloseup.jpg" alt="Flowing Rock" title="Showing soft tissue."></li>
<li><img src="images/wblatpaw.jpg" alt="Flowing Rock" title="Lateral view of a canine paw."></li>
<li><img src="images/wborgans.jpg" alt="Flowing Rock" title="Soft tissue."></li>
<li><img src="images/wbpaw.jpg" alt="Flowing Rock" title="The details are in the paw."></li>
</ul>
</div>

The JavaScript in the Head:
<link rel="stylesheet" href="style.css" type="text/css" /><!-- style and js for tabs -->
<link rel="stylesheet" href="tabslider.css" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
//<![CDATA[
var J = jQuery.noConflict();
//]]>
//<![CDATA[
var JJ = jQuery.noConflict();
//]]>

</script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript">
</script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript">
</script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript">
</script><!-- Initialize each slider on the page. Each slider must have a unique id -->

<script type="text/javascript">
//<![CDATA[
J(window).bind("load", function() {
J("div#slider1").codaSlider()
// J("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
});
//]]>
</script><!-- style for jquery tabs-->
<!-- styling and js for galleria-->

<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript">

JJJ(document).ready(function(){

JJJ('.gallary_demo_unstyled').addClass('gallary_demo'); // adds new class name to maintain degradability

JJJ('ul.gallary_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_imige', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);

// fetch the thumbnail container
var _li = thumb.parents('li');

// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);

// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');

// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents('li');

// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';

// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});

</script>
<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */

.caption{font-style:italic;color:#887;}
.dimo{position:relative;margin-top:2em;}
.gallary_dimo{width:550px;margin:0 auto;}
.gallary_dimo ul{width:550px;margin:0 auto;list-style: none;}
.gallary_dimo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000; }
.gallary_dimo li div{left:240px}
.gallary_dimo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

#main_imige{margin:0 auto 60px auto;height:300px;width:550px;background:black;}
#main_imige img{margin-bottom:10px;}

.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

</style>
<!--end of js for galleria -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js">
</script>
<script type="text/javascript" src="js/byslidemenu.js">
</script>
<script type="text/javascript">
//<![CDATA[

var verticaltextmenu;
window.addEvent('load', function(){

var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true, autosize: true});
});
//]]>
</script><!-- End of Vertical Menu -->

[edited by: DrDoc at 10:00 pm (utc) on July 7, 2009]
[edit reason] No URIs, please. See TOS and Forum Charter. [/edit]