Ok so that worked... AWESOMELY thank you!
but...
something strange is happening (i'm 99% sure that the change didn't mess this up) if you go back and check out the page I've cut it down to make it simpler:
gallery here is the code for the page in question:
Code:
<div class="demo"><div id="main_image"></div><p class="nav" align="center"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p><ul class="gallery_demo_unstyled"><li class="active"><img src="http://www.shopchantal.com/v/vspfiles/templates/1/images/galleria/demo/img/flowing-rock.jpg" alt="Flowing Rock" title="test <a href=#>test link</a>"></li><li><img src="http://www.shopchantal.com/v/vspfiles/templates/1/images/galleria/demo/img/stones.jpg" alt="Stones" title="test <a href=#>test link two</a>"></li></ul></p></div>
as you can see from the code, the links are two DIFFERENT names... but when viewing the page the links for BOTH pictures are showing the same title??
I've gone through the original code and I can't see anything different (in the .js page or the original page) but here is the other segments of code that might be effecting it:
Code:
<script type="text/javascript" src="http://www.shopchantal.com/v/vspfiles/templates/1/images/galleria/demo/jquery.min.js"></script>
<script type="text/javascript" src="http://www.shopchantal.com/v/vspfiles/templates/1/images/galleria/trunk/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // 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 */
*{margin:0;padding:0}
/*body{padding:0px;background:white;text-align:center;color:#bba;font:80%/140% georgia,serif;}*/
/*h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
/*a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}*/
.demo{position:relative;margin-top:0em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:50px;height:50px;}
.gallery_demo li div{left:240px}
/*.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}*/
#main_image{margin:0 auto 3px auto;height:438px;width:700px;background:black;}
/*#main_image img{margin-bottom:0px;}*/
.nav{
padding-top:2px;
clear:both;
letter-spacing:3px;
text-transform:uppercase;
font-family: 'helvetica neue', sans-serif;
font-size: 10px;
padding-bottom: 3px;
}
</style>
I think this just needs a fresh set of eyes.
Need some help with js...
Linear Mode
