Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Jquery Galleria

7:41 pm on Jul 7, 2009 (gmt 0)

New User

10+ Year Member

joined:Apr 15, 2009
posts: 14
votes: 0

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">
<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>

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 language="javascript" type="text/javascript">
var J = jQuery.noConflict();
var JJ = jQuery.noConflict();

<script src="js/jquery-easing.1.2.pack.js" type="text/javascript">
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript">
<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">
J(window).bind("load", function() {
// 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('.gallary_demo_unstyled').addClass('gallary_demo'); // adds new class name to maintain degradability

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

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

// fade out inactive thumbnail

// fade in active thumbnail

// 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

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

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


.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;}

<!--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 type="text/javascript" src="js/byslidemenu.js">
<script type="text/javascript">

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]

10:01 pm on July 7, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
votes: 0

What exactly is the problem you are experiencing? That's quite a bit of code, without the slightest hint of where help is needed :)
1:16 pm on July 8, 2009 (gmt 0)

New User

10+ Year Member

joined:Apr 15, 2009
posts: 14
votes: 0

The Galleria slide show will not work inside of the Coda-slider that has created the multiple tabs on the page. I believe there is something in the coda slider code that is telling the UL in the galleria how to appear. I have looked at the CSS and I have tried changing some of the values for the UL in the coda slider to see changes but I was unsuccessful.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members