Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

clayyount

Circle Member
  • Posts

    263
  • Joined

  • Last visited

  • Days Won

    3

Community Answers

  1. clayyount's post in Wexley: Is there a clickthrough workaround? was marked as the answer   
    There is a way to do it using the default gallery. It requires doing an ajax load on the gallery json to get the clickthrough urls and then some DOM manipulation to change the thumb click event. Put the code below in your page header code injection for the page with your gallery:
    <script> var currentPageBaseURL=window.location.href.split("?")[0]; Y.on("domready",function(e){ Y.io(currentPageBaseURL+"?page=1&format=json-pretty", { on:{success: jsonLoaded} }); function jsonLoaded(err,data){ try{ var jsonResponse = Y.JSON.parse(data.responseText); var items=jsonResponse.items Y.all("#thumbList .thumb, #galleryWrapper .slide").each(function(e){ var thumbId=this.getAttribute("data-slide-id"); for(var i=0;i<items.length;i++){ if(thumbId==items[i].id && items[i].clickthroughUrl){ this.setAttribute("data-clickthrough-url",items[i].clickthroughUrl).on("click",function(e){ e.preventDefault(); e.stopPropagation(); window.open(this.getAttribute("data-clickthrough-url"),'_blank'); }) } } }) }catch(e){} } }); </script>
    EDIT: updated it to work on mobile too.
  2. clayyount's post in Summary Block: How can I set the Carousel to "autoplay"? was marked as the answer   
    You can use this header inject code to get the summary block carousel on your page to autoplay:
    <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i<galleries.length; i++){ galleries[i].setAttrs({"autoplay":true}) } }); </script>
    Getting it to loop is trickier though because the "loop" gallery attribute doesn't work correctly. Since Squarespace's carousel loop option doesn't work the way it's supposed to, I had to basically override Squarespace's gallery controls and set my own interval. Because there is only one carousel on your page, I changed it to only target the first summary carousel.
    <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 2000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.totalGroups; var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script>
  3. clayyount's post in Summary Block: How can I set the Carousel to "autoplay"? was marked as the answer   
    You can use this header inject code to get the summary block carousel on your page to autoplay:
    <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); for( i = 0; i<galleries.length; i++){ galleries[i].setAttrs({"autoplay":true}) } }); </script>
    Getting it to loop is trickier though because the "loop" gallery attribute doesn't work correctly. Since Squarespace's carousel loop option doesn't work the way it's supposed to, I had to basically override Squarespace's gallery controls and set my own interval. Because there is only one carousel on your page, I changed it to only target the first summary carousel.
    <script> Y.on('domready', function () { var galleries = Y.Squarespace.GalleryManager.getGalleries(); var duration = 2000; var gallery=galleries[0]; var carousel=gallery["gallery-design"]; var totalGroups=carousel.totalGroups; var currentGroup=0 var container=gallery.get("container"); var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); advanceCarousel() }) var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){ e.preventDefault(); e.stopPropagation(); backupCarousel() }) Y.one(container._node).get('parentNode').on("mouseover",function(){ clearInterval(myInterval) }) Y.one(container._node).get('parentNode').on("mouseout",function(){ clearInterval(myInterval) setMyInterval() }) var myInterval; function setMyInterval(){ myInterval = setInterval(function(){ advanceCarousel() },duration) } setMyInterval(); function advanceCarousel(){ if(currentGroup==(totalGroups-1)){ currentGroup=0; }else{ currentGroup++; } carousel.goToGroup(currentGroup); } function backupCarousel(){ if(currentGroup==0){ currentGroup=totalGroups-1 }else{ currentGroup--; } carousel.goToGroup(currentGroup); } }); </script>
  4. clayyount's post in How can I change page padding and content width for one page only? was marked as the answer   
    1) the padding you want to affect is for the #site element which is inside the #collection-550c1227e4b01f5b2b709f0e element, not the #collection-550c1227e4b01f5b2b709f0e element itself. Change your code to:
    #collection-550c1227e4b01f5b2b709f0e #site { margin: 0 auto; padding: 0px 0px; }
    to target the #site element withing the #collection-550c1227e4b01f5b2b709f0e element
    2) Same thing for content width. Target it directly and add an !important if you want to make sure it isn't overridden, but you shouldn't need to because your custom css is loaded after the style editor tweaks:
    #collection-550c1227e4b01f5b2b709f0e #page{ max-width:800px !important; }
  5. clayyount's post in Bedford/Hayden: How would I create a “scroll down” indicator? was marked as the answer   
    If you just want a non-interactive down arrow, you can use a pseudo-element to do it with pure css:
    #intro .banner-thumbnail-wrapper:after { content: "\e02d"; display: inline-block; position: absolute; z-index: 100; color: #fff; width: 100%; text-align: center; font-family: 'squarespace-ui-font'; transform: rotate(90deg); cursor: pointer; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin-top: 100px; }
    if you want the rollover effect, or for it to be clickable, you'll have to use JS to append an element to .banner-thumbnail-wrapper that can take a :hover state and a click event.
    EDIT:Get rid of the #intro and use this code:
    .banner-thumbnail-wrapper:after { content: "\e02d"; display: inline-block; position: absolute; z-index: 100; color: #fff; width: 100%; text-align: center; font-family: 'squarespace-ui-font'; transform: rotate(90deg); cursor: pointer; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 32px; margin-top: 100px; }
×
×
  • Create New...