Hi all,
I have two features I want to implement on a website, and they both work OK when only one is applied to the site, but when both are applied one fails.
I wanted nice smooth scrolling to various anchors I have on the page, and found a post by Walter explaining how it works with Protaculous, and it worked like a dream.
I also wanted to implement an image zoom and slideshow featured, and I have used Colorbox successfully in the past. However, when both are used together the smooth scrolling fails.
I think I need to join the two lots of code together, but I am struggling (surprise, surprise). Any pointers?
The Smooth scrolling code:
var anchors = $$('a');
anchors.each(function(elm){
var ref = elm.href.split(/#/)[1];
var t = (!!$(ref)) ? $(ref) : anchors.find(function(em){ return em.name == ref; });
if(t){
elm.observe('click',function(evt){
evt.stop();
Effect.ScrollTo(t);
});
}
});And the colorbox code goes in before :
<link rel="stylesheet" href="colorbox/colorbox.css" type="text/css" media="screen" />
<script src="colorbox/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="colorbox/jquery.colorbox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this
window again and this message will still be here.");
return false;
});
});
</script>freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options