homepage Welcome to WebmasterWorld Guest from 54.211.212.174
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Jquery Galleria
nugg79




msg:3947889
 7:41 pm on Jul 7, 2009 (gmt 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">
</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]

 

DrDoc




msg:3947959
 10:01 pm on Jul 7, 2009 (gmt 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 :)

nugg79




msg:3948393
 1:16 pm on Jul 8, 2009 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved