hi! i am using squarespace. unfortunately i am not able to customize the gallery as i'd like through the user control panel, unless i use the advanced options to create additional code.
here is the existing javascript
:
Code:
Y.use('squarespace-gallery-stacked', function(Y) {
Y.on('domready', function() {
// Mobile Nav ///////////////////////////////////
Y.one('#mobileMenuLink a').on('click', function(e){
var mobileMenuHeight = parseInt(Y.one('#mobileNav .wrapper').get('offsetHeight'),10);
if (Y.one('#mobileNav').hasClass('menu-open')) {
new Y.Anim({ node: Y.one('#mobileNav'), to: { height: 0 }, duration: 0.5, easing: 'easeBoth' }).run();
new Y.Anim({ node: Y.one('#headerWrapper'), to: { top: 0 }, duration: 0.5, easing: 'easeBoth' }).run();
} else {
new Y.Anim({ node: Y.one('#mobileNav'), to: { height: mobileMenuHeight }, duration: 0.5, easing: 'easeBoth' }).run();
new Y.Anim({ node: Y.one('#headerWrapper'), to: { top: mobileMenuHeight }, duration: 0.5, easing: 'easeBoth' }).run();
}
Y.one('#mobileNav').toggleClass('menu-open');
});
// NAV DROPDOWNS //////////////////////////////////////////
/* on click*/
Y.all('nav.dropdown-click > ul').each( function(n) {
n.delegate('click', function(e){
folderToggle(e.currentTarget.next('.subnav'));
}, 'li.folder a');
});
/* on hover */
Y.all('nav.dropdown-hover > ul').each( function(n) {
var timer;
n.delegate(['mouseover','mousemove'], function(e){
folderOpen(e.currentTarget.one('.subnav'));
if (timer) { timer.cancel(); }
timer = Y.later(700, this, function() {
folderClose(e.currentTarget.one('.subnav'));
});
}, 'li.folder');
});
// GALLERY PAGES ///////////////////////////////////////////////////
if (Y.one('body').hasClass('collection-type-gallery')) {
if(Y.all('#slideshow .slide').size() > 1) {
gallerySlideshow();
}
if (Y.Squarespace.Management) {
Y.Squarespace.Management.on('tweak', function(f){
if (f.getName() == 'gallery-auto-play') {
Y.Squarespace.GalleryManager._galleries[0].set('autoplay', Static.SQUARESPACE_CONTEXT.tweakJSON['gallery-auto-play']);
}
});
}
Y.Global.on('tweak:reset', function(){
slideshow.fire('refresh');
});
Y.Global.on('tweak:close', function(){
Y.all('.slide img[data-image]' ).each(function(img) {
img.fire('refresh');
});
});
Y.one('window').on('resize', function(e){
Y.all('.slide img[data-image]' ).each(function(img) {
img.fire('refresh');
});
});
}
// BLOG PAGES ///////////////////////////////////////////////////
if (Y.one('body').hasClass('collection-type-blog')) {
var sidebarEl = Y.one('#sidebarWrapper');
Y.one('#page').setStyle('min-height', sidebarEl.get('offsetHeight'));
}
// VERTICAL ALIGN PAGES ////////////////
if (Y.one('img[data-image]')) {
if (Y.one('body').hasClass('collection-type-gallery')) {
vertAlignCanvas();
} else {
Y.Squarespace.ImageLoadManager.on('batch-complete', function() { vertAlignCanvas(); });
// if we haven't heard back from ImageLoadManager yet, go ahead and fire alignment
Y.later(1000, this, function(){
vertAlignCanvas();
});
}
} else {
vertAlignCanvas();
}
Y.on('resize', function(){
vertAlignCanvas();
});
});
// FUNCTIONS
var bodyWidth = parseInt(Y.one('body').getComputedStyle('width'),10);
var slideshow;
function gallerySlideshow() {
if (bodyWidth < 800) {
new Y.Squarespace.Loader({
img:Y.all('img[data-image]')
});
Y.one('#slideshowWrapper').addClass('mobile-gallery');
} else {
slideshow = new Y.Squarespace.Gallery2({
container: Y.one('#slideshow'),
elements: {
// next: '.nav .next',
// previous: '.nav .previous',
// currentIndex: '.nav .currentIndex',
// totalSlides: '.nav .totalSlides'
},
loop: true,
autoplay: Static.SQUARESPACE_CONTEXT.tweakJSON['gallery-auto-play'],
design: 'strip',
designOptions: {
autoHeight: false,
speed: 0.8
}
});
}
}
// center page if able to
function vertAlignCanvas() {
windowHeight = Y.one('body').get('winHeight');
canvasHeight = Y.one('#canvas').get('offsetHeight');
if (windowHeight > canvasHeight) {
Y.one('#canvasWrapper').setStyles({
height: '100%',
position: 'relative',
visibility: 'visible'
});
Y.one('#canvas').setStyles({
marginTop: -(canvasHeight / 2),
top: '50%',
position: 'relative'
});
} else {
Y.one('#canvasWrapper').setStyles({
height: 'auto',
position: 'relative',
visibility: 'visible'
});
Y.one('#canvas').setStyles({
marginTop: 0,
top: 0,
position: 'relative'
});
}
}
//////////// NAVIGATION DROPDOWNS /////////////
var OCV = 105; // OCV = open/close velocity (smaller is slower)
function folderOpen (ddSubnav) {
if (ddSubnav.ancestor('li.folder').hasClass('dropdown-open')) {
} else {
Y.all('.dropdown-open .subnav').each(function(n){
folderClose(n);
});
new Y.Anim({
node: ddSubnav,
to: {
opacity: 1,
height: ddSubnav.one('ul').get('offsetHeight')
},
duration: (parseInt(ddSubnav.one('ul').get('offsetHeight'),10) / OCV) / 10,
easing: 'easeOutStrong'
}).run().on('end', function() {
ddSubnav.ancestor('li.folder').addClass('dropdown-open');
});
}
}
function folderClose (ddSubnav) {
if (ddSubnav.ancestor('li.folder').hasClass('dropdown-open')) {
new Y.Anim({
node: ddSubnav,
to: {
opacity: 1,
height: 0
},
duration: (parseInt(ddSubnav.one('ul').get('offsetHeight'),10) / OCV) / 10,
easing: 'easeOutStrong'
}).run().on('end', function() {
ddSubnav.ancestor('li.folder').removeClass('dropdown-open');
});
}
}
function folderToggle (ddSubnav) {
if (ddSubnav.ancestor('li.folder').hasClass('dropdown-open')) {
folderClose(ddSubnav);
} else {
folderOpen(ddSubnav);
}
}
});
I'd like to be able to have the gallery scroll automatically with an arrow at both ends.
Can someone point me to a tutorial or give any advice on how to go about this? I'd really like to learn how to do this. thanks!
Before you post, read our: 
