Turns out this:
Code:
<body>
<div id="slideshowHolder">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
</div>
<script type="text/javascript" src="jquery.js"></script>
Is not a link to jQuery. It's to this script:
Code:
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain' });
$('#effCurtainAlternate').click( function(){
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain', direction: 'alternate' });
$('#positionDyn').html('curtain');
$('#directionDyn').html('alternate');
});
$('#effFountainTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'fountain' });
$('#positionDyn').html('top');
$('#directionDyn').html('fountain');
});
$('#effRandomTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'random' });
$('#positionDyn').html('random');
$('#directionDyn').html('top');
});
$('#effLeftTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'left' });
$('#positionDyn').html('left');
$('#directionDyn').html('top');
});
$('#effRightBottom').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'bottom', direction: 'right' });
$('#positionDyn').html('right');
$('#directionDyn').html('bottom');
});
$('.eComb').click( function(){
$('#eComb').show();
$('#eEff').hide();
$('.eComb').removeClass('slideshowHolderActive');
$('.eEff').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});
$('.eEff').click( function(){
$('#eComb').hide();
$('#eEff').show();
$('.eEff').removeClass('slideshowHolderActive');
$('.eComb').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});
$('#effWave').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'wave' });
$('#effDyn').html('wave');
});
$('#effZipper').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'zipper' });
$('#effDyn').html('zipper');
});
$('#effCurtain').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'curtain' });
$('#effDyn').html('curtain');
});
Looking at everything else, this (the above script) appears to be the only place where the $ is exposed in such a way that, if another library like mootools is on the page, it won't be able to use the jQuery meaning for $. This can be fixed by adding to the above code (wrapping it in an anonymous function that defines jQuery for it locally), so that it looks like so (additions highlighted, one top, one bottom):
Code:
(function($){
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain' });
$('#effCurtainAlternate').click( function(){
$('#slideshowHolder').jqFancyTransitions({ position: 'curtain', direction: 'alternate' });
$('#positionDyn').html('curtain');
$('#directionDyn').html('alternate');
});
$('#effFountainTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'fountain' });
$('#positionDyn').html('top');
$('#directionDyn').html('fountain');
});
$('#effRandomTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'random' });
$('#positionDyn').html('random');
$('#directionDyn').html('top');
});
$('#effLeftTop').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'top', direction: 'left' });
$('#positionDyn').html('left');
$('#directionDyn').html('top');
});
$('#effRightBottom').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ position: 'bottom', direction: 'right' });
$('#positionDyn').html('right');
$('#directionDyn').html('bottom');
});
$('.eComb').click( function(){
$('#eComb').show();
$('#eEff').hide();
$('.eComb').removeClass('slideshowHolderActive');
$('.eEff').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});
$('.eEff').click( function(){
$('#eComb').hide();
$('#eEff').show();
$('.eEff').removeClass('slideshowHolderActive');
$('.eComb').removeClass('slideshowHolderActive');
$(this).addClass('slideshowHolderActive');
});
$('#effWave').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'wave' });
$('#effDyn').html('wave');
});
$('#effZipper').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'zipper' });
$('#effDyn').html('zipper');
});
$('#effCurtain').click( function(){
$('#ft-title-slideshowHolder, .ft-slideshowHolder').remove();
$('#slideshowHolder').jqFancyTransitions({ effect: 'curtain' });
$('#effDyn').html('curtain');
});
})(jQuery);
But the page (shmtestforums.uphero.com/rotating_billboard/rotate.html) isn't using most of that. So you could use simply:
Code:
jQuery('#slideshowHolder').jqFancyTransitions({ position: 'curtain' });
Once you change the code in the file referred to by:
Code:
<script type="text/javascript" src="jquery.js"></script>
to either of the two scripts blocks above suggested for it, the instructions from my previous post as to how to arrange things in the head should work. I couldn't easily test it though because you've apparently moved/removed the resource files from the previous demo.
If you want more help getting the three working together, put up a demo like the one that was at shmtestforums.uphero.com/Testing/test/test.html that attempts to use all three scrpts.
Two JavaScript clash ???
Reply With Quote
thank you very much. 
Bookmarks