[jQuery] codes between head section.
I was asked to add gallery plugin to an existing website. I followed
every instruction in gallery plugin's website but I am confused at one
point. There are some codes, I need to add between <head> </head>.
There problem is, there are some codes there for other plugins
already. Can you please tell me where to add new codes in here.
Existing codes:
<script type="text/javascript">
var query = new Object();
window.location.search.replace(
new RegExp( "([^?=&]+)(=([^&]*))?", 'g' ),
function( $0, $1, $2, $3 ){
query[ $1 ] = $3;
}
);
easing = query['e'] || 'Expo';
function loadEasing(e) {
location.href = location.pathname+'?e='+e;
}
function setEasing(e) {
loadLamps(e);
}
// for dynamic easing changes
function loadLamps(easing) {
$('#lavaLampBorderOnly').lavaLamp({
fx: 'easeInOutExpo'+easing,
speed: 1000,
autoReturn: false
});
}
$(function() {
<!--
// jquery initialize:
$(function() {
$('#menu').lavaLamp({fx: 'swing', speed: 1000});
loadLamps(easing);
$('select#easing option[value='+easing+']').attr
('selected','selected');
$('.easingLabel').text(easing);
});
//console.log();
-->
//OVERLAY IMAGES
// setup triggers
$("a[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
closeOnClick: true,
expose: '#000000',
finish: {top: 'center'},
});
});
});
</script>
New codes that I need to add:
///GALLERY
// We only want these styles applied when javascript is enabled
// $('div.navigation').css({'width' : '300px', 'float' : 'left'});
// $('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').css('opacity', onMouseOutOpacity)
.hover(
function () {
$(this).not('.selected').fadeTo('fast', 1.0);
},
function () {
$(this).not('.selected').fadeTo('fast', onMouseOutOpacity);
}
);
$(document).ready(function() {
// Initialize Advanced Galleriffic Gallery
var galleryAdv = $('#gallery').galleriffic('#thumbs', {
delay: 2000,
numThumbs: 3,
preloadAhead: -1,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '',
nextLinkText: '',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
onChange: function(prevIndex, nextIndex) {
$('#thumbs ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(callback) {
$('#caption').fadeOut('fast');
$('#slideshow').fadeOut('fast', callback);
},
onTransitionIn: function() {
$('#slideshow, #caption').fadeIn('fast');
},
onPageTransitionOut: function(callback) {
$('#thumbs ul.thumbs').fadeOut('fast', callback);
},
onPageTransitionIn: function() {
$('#thumbs ul.thumbs').fadeIn('fast');
}
});
});