homepage Welcome to WebmasterWorld Guest from
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

5+ Year Member

Msg#: 3947887 posted 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">
<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]



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

Msg#: 3947887 posted 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 :)


5+ Year Member

Msg#: 3947887 posted 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