Guest Posted July 8, 2013 Share Posted July 8, 2013 Hi - I need to create a website with panel sliders, such as those seen on bbc.co.uk or jamieoliver.com, whereby the user can use the left and right buttons to scroll to a new set of panels or page. Before I start using squarespace I want to find out if it is possible with with this package. Link to comment
mordamax Posted October 7, 2013 Share Posted October 7, 2013 The slider HTML Template (within collection in my case) <div class="collection-type-gallery"> <div id="galleryWrapper"> <div id="slideshowWrapper" style="height: 500px;" class="slideshow-ready"> <div id="slideshow" class="sqs-gallery-design-stacked"> {.repeated section items} <div class="slide content-fit sqs-gallery-design-stacked-slide loaded" data-slide-id="{id}" data-type="image"> {.video?}{@|video-meta}{.end} {.image?}<img {@|image-meta} />{.end} </div> {.end} </div> <div id="imageInfoToggle"><i></i><span>info</span></div> </div> <div id="simpleControls"> <span class="control prev-slide">prev</span> / <span class="control next-slide">next</span> </div> <div id="numberControls" class="gallery-controls"> {.repeated section items} <span class="number" >{@index}</span> {.end} </div> <div id="dotControls" class="gallery-controls"> {.repeated section items} <span class="dot" >·</span> {.end} </div> <div id="tinyThumbControls" class="gallery-controls"> {.repeated section items} <span class="tiny-thumb" > <img src="{assetUrl}?format=100w" height="40"/> </span> {.end} </div> </div> </div> Then simply JS insertion <script type="text/javascript"> Y.use( 'squarespace-gallery-stacked', function( Y ) { // full slideshow if (Y.one('#slideshow .slide')) { slideshow = new Y.Squarespace.Gallery2({ container: Y.one('#slideshow'), elements: { next: '.next-slide', previous: '.prev-slide', controls: '#dotControls, #numberControls, #tinyThumbControls' }, lazyLoad: true, loop: true, design: 'stacked', designOptions: { autoHeight: false, preloadCount: 1 }, loaderOptions: { mode: 'fit' } }); } }); </script> Link to comment
ZoeMarie Posted March 4, 2014 Share Posted March 4, 2014 Hi. Can you tell us WHERE we put that top HTML code or how to implement, and where specifically we insert the javascript, or how to implement? Thanks! Link to comment
heatherilumi Posted May 12, 2014 Share Posted May 12, 2014 I'd like to know this as well! Thanks :) Link to comment
e2astudio Posted May 13, 2014 Share Posted May 13, 2014 Yes. Any template on Squarespace will support a gallery block on any page or blog post. http://help.squarespace.com/guides/about-the-gallery-block Some templates also support Gallery Collections that may have similar presentation options.http://help.squarespace.com/guides/using-the-gallery-page Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.