Recommendation slider

Developer
Size
17,000 Kb
Views
24,288

How do I make an recommendation slider?

Built on Squarespace's existing gallery functions, this pen uses custom modifications to inject textual content from pages listed in the auto-generated sitemap.xml. What is a recommendation slider? How do you make a recommendation slider? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Recommendation slider Previews

Recommendation slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recommendation slider</title> <script type="text/javascript">SQUARESPACE_ROLLUPS = {};</script> <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].js = ["//static.squarespace.com/universal/scripts-compressed/common-fa3584b69f636687ede1d7d7b538ca51-min.js"]; })(SQUARESPACE_ROLLUPS, 'squarespace-common');</script>
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].js = ["//static.squarespace.com/universal/scripts-compressed/commerce-cda8b4c5fef603a24014d6da363b4245-min.js"]; })(SQUARESPACE_ROLLUPS, 'squarespace-commerce');</script> -->
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].css = ["//static.squarespace.com/universal/styles-compressed/commerce-8877ae84b6e344382db98c4ba13bacc3-min.css"]; })(SQUARESPACE_ROLLUPS, 'squarespace-commerce');</script> -->
<script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].js = ["//static.squarespace.com/universal/scripts-compressed/dialog-3c259f4f5628e11db2c9a9748c103c29-min.js"]; })(SQUARESPACE_ROLLUPS, 'squarespace-dialog');</script>
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].css = ["//static.squarespace.com/universal/styles-compressed/dialog-5c3e5d2326dbae6f45bafd1434c4523a-min.css"]; })(SQUARESPACE_ROLLUPS, 'squarespace-dialog');</script> -->
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].js = ["//static.squarespace.com/universal/scripts-compressed/management-21116f539e477a7f53575ee9d4181f5f-min.js"]; })(SQUARESPACE_ROLLUPS, 'squarespace-management');</script> -->
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].css = ["//static.squarespace.com/universal/styles-compressed/management-6bb640e5a2785f347449a52d4761b90a-min.css"]; })(SQUARESPACE_ROLLUPS, 'squarespace-management');</script> -->
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].js = ["//static.squarespace.com/universal/scripts-compressed/ckeditor-bd77671ed4a025a96cdb8e0bf8c18d2e-min.js"]; })(SQUARESPACE_ROLLUPS, 'squarespace-ckeditor');</script> -->
<!-- <script>(function(rollups, name) { if (!rollups[name]) { rollups[name] = {}; } rollups[name].css = ["//static.squarespace.com/universal/styles-compressed/ckeditor-d41d8cd98f00b204e9800998ecf8427e-min.css"]; })(SQUARESPACE_ROLLUPS, 'squarespace-ckeditor');</script> -->
<script type="text/javascript" data-sqs-type="dynamic-assets-loader">(function() {(function(a){try{if(window.top!=window&&window.top.Squarespace&&window.top.Squarespace.frameAvailable){window.top.Squarespace.frameAvailable(window,SQUARESPACE_ROLLUPS);return}}catch(d){}for(var c in a){if(a[c].js)for(var b=0;b<a[c].js.length;b++)document.write('<script type="text/javascript" src="'+a[c].js[b]+'">\x3c/script>');if(a[c].css)for(b=0;b<a[c].css.length;b++)document.write('<link rel="stylesheet" type="text/css" href="'+a[c].css[b]+'" />')}})(SQUARESPACE_ROLLUPS);})();</script>
<script> Static.SQUARESPACE_CONTEXT = {"templateTweakable":true,"website":{"id":"5361d375e4b00f49de2ab983","identifier":"dave-mcclain-dj97","contentModifiedOn":1402635435102,"cloneable":false,"siteStatus":{"value":8},"language":"en-US","timeZone":"America/Los_Angeles","machineTimeZoneOffset":-25200000,"timeZoneOffset":-25200000,"timeZoneAbbr":"PDT","siteTitle":"DAVE McCLAIN","siteTagLine":"Creative Executive","siteDescription":{"html":"<h3><span>Vision, Leadership, Management.</span></h3>","raw":false},"location":{"mapZoom":11.0,"mapLat":40.67572544872388,"mapLng":-73.96986225214845},"shareButtonOptions":{"2":true,"4":true,"6":true,"1":true,"3":true,"5":true,"7":true,"8":true},"authenticUrl":"http://dave-mcclain-dj97.squarespace.com","baseUrl":"http://dave-mcclain-dj97.squarespace.com","socialAccounts":[{"serviceId":14,"userId":"EVbTk_dAgP","userName":"davemcclain","screenname":"Dave McClain","addedOn":1399329867467,"profileUrl":"https://www.linkedin.com/in/davemcclain","iconUrl":"http://m.c.lnkd.licdn.com/mpr/mprx/0_dtjoYmcYLt2k-o_3I1avYDGK51Rwt2P3IrdvYDX3s9fsSekT5ND6rSKfwgUvAItDHl0qlEntp-HK","id":"5368144be4b03a1661ad6b89","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":false,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"linkedin"},{"serviceId":4,"userId":"46324649","userName":"dave_mcclain","screenname":"Dave McClain","addedOn":1399329836185,"profileUrl":"https://twitter.com/dave_mcclain","iconUrl":"https://pbs.twimg.com/profile_images/440020255545368576/Ndo-K7Sn_normal.jpeg","collectionId":"5368142ce4b03a1661ad6b54","id":"5368142ce4b03a1661ad6b53","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":true,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"twitter"},{"serviceId":2,"userId":"706386386","userName":"davemcclain","screenname":"Dave McClain","addedOn":1399329826967,"profileUrl":"https://www.facebook.com/706386386","iconUrl":"https://graph.facebook.com/706386386/picture?type=square","metaData":{"service":"facebook","managedPages":[],"isPageAccount":false,"impersonatePage":true},"id":"53681422e4b03a1661ad6b45","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":false,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%u","accountState":1,"serviceName":"facebook"},{"serviceId":10,"userId":"1042888","userName":"dave_mcclain","screenname":"DMc","addedOn":1399329845934,"profileUrl":"http://instagram.com/dave_mcclain","iconUrl":"http://images.ak.instagram.com/profiles/profile_1042888_75sq_1387940693.jpg","collectionId":"53681435e4b03a1661ad6b63","id":"53681435e4b03a1661ad6b62","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":true,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"instagram"},{"serviceId":20,"userId":"[email protected]","screenname":"[email protected]","addedOn":1399329897045,"profileUrl":"mailto:[email protected]","id":"53681469e4b0b3f114a946a8","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":false,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"email"}],"createdOn":1398920053497,"templateId":"51e6b9e4e4b062dafa7099b9","installationId":"5363f671e4b07ba113fe943a","templateWebsiteId":"51e6b9c9e4b050adffbe392c","marketingId":"06ad568b-d44e-4322-8f01-dbccbff7e04dhunkvpiz","pageLimit":2147483647,"canConnectFacebookPage":true,"storageLimit":-1,"contributorLimit":2147483647,"productLimit":20,"canUseDeveloperSDK":true,"mobilePortfolioEnabled":true,"canUseCommerce":true,"canUseAdvancedCommerce":false,"statsMigrated":false,"imageMetadataProcessingEnabled":false},"authenticatedAccount":{"id":"53730569e4b065b57c0c6635","tutorialsCompleted":{"le2-welcome":true,"frontend-welcome":true,"welcome":true},"lastLoginOn":1402262676154,"lastActiveOn":1402262676154,"deleted":false,"personalAccount":true,"isGlobalAdmin":false,"displayName":"Alyssa Davis","firstName":"Alyssa","lastName":"Davis","eligibleForMarketingDiscount":false,"enabled":true,"confirmed":true,"emailVerified":false,"websiteUrl":"","bio":"","location":{"mapLat":40.7207559,"mapLng":-74.00076130000002,"mapZoom":12},"revalidateTimestamp":1402632983666,"roles":{},"googlePlusProfile":"","invitesGiven":0,"systemGenerated":false,"email":"[email protected]","createdOn":1400046953440,"marketingId":"bab07611-f7e4-433c-8074-ef57635fdac3hv666p14","editingSiteIds":["5373056be4b003ad4652e740"],"siteSubscriptions":[{"websiteId":"5361d375e4b00f49de2ab983","websiteName":"dave-mcclain-dj97","subscribed":false},{"websiteId":"5373056be4b003ad4652e740","websiteName":"alyssa-davis-d6el","subscribed":true}],"storeSubscriptions":[{"websiteId":"5361d375e4b00f49de2ab983","websiteName":"dave-mcclain-dj97","subscribed":true},{"websiteId":"5373056be4b003ad4652e740","websiteName":"alyssa-davis-d6el","subscribed":true}],"emailAccount":true,"activatedAccount":true,"marketingUnsubscribes":{},"developerAccount":true,"developerAccountMarketingDetails":{"businessName":"Alyda","businessEmailAddress":"[email protected]","phoneNumber":"(912)7043959","streetAddress":"2820 e 2nd st, apt 6","cityStateZip":"long beach ca 90803","countryCode":"US","businessWebsiteUrl":"http://alyda.me","mailingList":true},"pseudonymAccount":false},"accessPermissions":[1512,15,1225,1412,1610,11,1223,1110,1224,1221,1510,1219,1513,1417,1410,1213,1111,12,1516,1515,1415,1,1311,1210,1413,1411,1310,1226,13,1218,1222,1517,1511,1514,1416,1217,1214,1212,14,1215,1216,1418,1414,1220,1211,0],"tzData":{"zones":[[-480,"US","P%sT",null]],"rules":{"US":[[1967,2006,null,"Oct","lastSun","2:00","0","S"],[1987,2006,null,"Apr","Sun>=1","2:00","1:00","D"],[2007,"max",null,"Mar","Sun>=8","2:00","1:00","D"],[2007,"max",null,"Nov","Sun>=1","2:00","0","S"]]}},"websiteCloneable":false,"memberAccountNames":{"5302e6d3e4b0b0825b1bae5b":{"displayName":"Dave McClain"},"53730569e4b065b57c0c6635":{"displayName":"Alyssa Davis"}},"isSystemPage":false,"collection":{"title":"Resume bkup","id":"5384409de4b03eaa293c8953","fullUrl":"/resume-1/"},"demoCollections":[{"collectionId":"523cc921e4b0284d43198b58","deleted":false},{"collectionId":"51e6b9c9e4b050adffbe392f","deleted":true},{"collectionId":"5241dc3fe4b070e45581b35c","deleted":false},{"collectionId":"521cbf8ce4b065a262ebc985","deleted":false},{"collectionId":"5241dbfee4b099cb9e149e48","deleted":false},{"collectionId":"5241dcd0e4b0e5fb5806e365","deleted":false},{"collectionId":"5241de45e4b06dc6c6c0c7c3","deleted":false},{"collectionId":"52432b4ee4b059434738969e","deleted":true},{"collectionId":"52377937e4b05227e957c754","deleted":true}],"subscribed":false,"appDomain":"squarespace.com","templateId":"51e6b9e4e4b062dafa7099b9","rollups":{"squarespace-audio-player":{"css":"//static.squarespace.com/universal/styles-compressed/audio-player-63b580506e464538b6fe64025c4400bc-min.css","js":"//static.squarespace.com/universal/scripts-compressed/audio-player-cb6583e804eb48a615f287ee8a12258b-min.js"},"squarespace-calendar-block-renderer":{"css":"//static.squarespace.com/universal/styles-compressed/calendar-block-renderer-d41d8cd98f00b204e9800998ecf8427e-min.css","js":"//static.squarespace.com/universal/scripts-compressed/calendar-block-renderer-02366df46e22ee9d864818f6cf52a354-min.js"},"squarespace-comments":{"css":"//static.squarespace.com/universal/styles-compressed/comments-cbd605a69bdca1b7a25edef90b487ed2-min.css","js":"//static.squarespace.com/universal/scripts-compressed/comments-f99bb564fd9ec8fdde59de86588a4162-min.js"},"squarespace-dialog":{"css":"//static.squarespace.com/universal/styles-compressed/dialog-5c3e5d2326dbae6f45bafd1434c4523a-min.css","js":"//static.squarespace.com/universal/scripts-compressed/dialog-3c259f4f5628e11db2c9a9748c103c29-min.js"},"squarespace-pinterest":{"css":"//static.squarespace.com/universal/styles-compressed/pinterest-d41d8cd98f00b204e9800998ecf8427e-min.css","js":"//static.squarespace.com/universal/scripts-compressed/pinterest-e2d1ba37ad07db5eeada67621609a0d0-min.js"}},"authenticatedAccountWebsiteSettings":{"id":"53744fa1e4b0acdd68dda469"},"tweakJSON":{"auto-play":"true","galleryAutoPlayDelay":"4","index-transition":"Fade","lightbox-transition":"Slide","product-gallery-auto-crop":"true","product-image-auto-crop":"true","slides-click-through":"true"},"websiteSettings":{"id":"5361d375e4b00f49de2ab984","websiteId":"5361d375e4b00f49de2ab983","ownerId":"5302e6d3e4b0b0825b1bae5b","tutorialsCompleted":{"commerce-welcome":true},"socialAccountDisplayOrder":["5368144be4b03a1661ad6b89","5368142ce4b03a1661ad6b53","53681422e4b03a1661ad6b45","53681435e4b03a1661ad6b62","53681469e4b0b3f114a946a8"],"subjects":[],"country":"US","state":"CA","markdownMode":false,"simpleLikingEnabled":true,"mobileInfoBarSettings":{"style":1,"isContactEmailEnabled":true,"isContactPhoneNumberEnabled":true,"isLocationEnabled":true,"isBusinessHoursEnabled":true},"announcementBarSettings":{"style":1,"text":{"html":"","raw":false}},"lastAgreedTermsOfService":2,"defaultPostFormat":"%y/%m/%d/%t","commentLikesAllowed":true,"commentAnonAllowed":true,"commentThreaded":true,"commentApprovalRequired":false,"commentAvatarsOn":true,"commentSortType":2,"commentFlagThreshold":0,"commentFlagsAllowed":true,"commentEnableByDefault":true,"commentDisableAfterDaysDefault":0,"disqusShortname":"","homepageTitleFormat":"","collectionTitleFormat":"%c \u2014 %s","itemTitleFormat":"%i \u2014 %s","commentsEnabled":true,"allowSquarespacePromotion":false,"storeSettings":{"returnPolicy":{"raw":false},"termsOfService":{"raw":false},"privacyPolicy":{"raw":false},"storeMailingList":{"connected":false,"list":""},"stockLevelAlertLimit":5,"orderConfirmedSubjectFormat":"%s: New Order Confirmed #%o","orderShippedSubjectFormat":"%s: Order Shipped #%o","orderHeader":"","testSecretKey":"","expressCheckout":false,"testModeOn":true,"useLightCart":false,"showNoteField":false,"currenciesSupported":["USD"],"defaultCurrency":"USD","selectedCurrency":"USD","shipStationConnectionSettings":{"passwordConfigured":false},"measurementStandard":1,"orderConfirmationInjectCode":"","xeroSetupComplete":false,"showCustomCheckoutForm":false,"isLive":false,"stripeConnected":false,"storeState":3,"customerSupportEmail":"[email protected]"},"useEscapeKeyToLogin":true,"newslettersEnabled":false,"ssBadgeType":1,"ssBadgePosition":4,"ssBadgeVisibility":1,"ssBadgeDevices":1},"secureDomain":"https://dave-mcclain-dj97.squarespace.com","permissions":{"id":"53744fa0e4b0acdd68dda468","websiteId":"5361d375e4b00f49de2ab983","memberAccountId":"53730569e4b065b57c0c6635","createdOn":1400131488933,"lastLoginOn":1402262676154,"lastActiveOn":1402262676154,"permissions":{"1":true},"subscribed":false},"connectedAccounts":[{"serviceId":10,"userId":"1042888","userName":"dave_mcclain","screenname":"DMc","addedOn":1399329845934,"profileUrl":"http://instagram.com/dave_mcclain","iconUrl":"http://images.ak.instagram.com/profiles/profile_1042888_75sq_1387940693.jpg","collectionId":"53681435e4b03a1661ad6b63","id":"53681435e4b03a1661ad6b62","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":true,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"instagram"},{"serviceId":20,"userId":"[email protected]","screenname":"[email protected]","addedOn":1399329897045,"profileUrl":"mailto:[email protected]","id":"53681469e4b0b3f114a946a8","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":false,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"email"},{"serviceId":2,"userId":"706386386","userName":"davemcclain","screenname":"Dave McClain","addedOn":1399329826967,"profileUrl":"https://www.facebook.com/706386386","iconUrl":"https://graph.facebook.com/706386386/picture?type=square","metaData":{"service":"facebook","managedPages":[],"isPageAccount":false,"impersonatePage":true},"id":"53681422e4b03a1661ad6b45","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":false,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%u","accountState":1,"serviceName":"facebook"},{"serviceId":4,"userId":"46324649","userName":"dave_mcclain","screenname":"Dave McClain","addedOn":1399329836185,"profileUrl":"https://twitter.com/dave_mcclain","iconUrl":"https://pbs.twimg.com/profile_images/440020255545368576/Ndo-K7Sn_normal.jpeg","collectionId":"5368142ce4b03a1661ad6b54","id":"5368142ce4b03a1661ad6b53","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":true,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"twitter"},{"serviceId":14,"userId":"EVbTk_dAgP","userName":"davemcclain","screenname":"Dave McClain","addedOn":1399329867467,"profileUrl":"https://www.linkedin.com/in/davemcclain","iconUrl":"http://m.c.lnkd.licdn.com/mpr/mprx/0_dtjoYmcYLt2k-o_3I1avYDGK51Rwt2P3IrdvYDX3s9fsSekT5ND6rSKfwgUvAItDHl0qlEntp-HK","id":"5368144be4b03a1661ad6b89","websiteId":"5361d375e4b00f49de2ab983","pullEnabled":false,"pushEnabled":true,"autoPushEnabled":false,"iconEnabled":true,"defaultPushMessage":"%t %u","accountState":1,"serviceName":"linkedin"}]}; SquarespaceFonts.loadViaContext(); Squarespace.load(window); </script> <link rel='stylesheet prefetch' href='http://static.squarespace.com/static/sitecss/5361d375e4b00f49de2ab983/82/51e6b9e4e4b062dafa7099b9/5363f671e4b07ba113fe943a/1128/1402635506581/site.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <style> body { font-family: Helvetica, Arial, sans-serif }
</style>
<body id="collection-5384409de4b03eaa293c8953" class="collection-type-page view-list mobile-style-available collection-5384409de4b03eaa293c8953 collection-layout-default index-transition-fade hide-arrows auto-play slides-click-through lightbox-transition-slide content-alignment-center underline-body-links sidebar-position-right show-social-icons social-icon-style-round product-list-titles-under product-list-alignment-left product-item-size-11-square product-image-auto-crop product-gallery-size-11-square product-gallery-auto-crop show-product-price show-product-item-nav product-social-sharing event-thumbnails event-thumbnail-size-32-standard event-date-label event-date-label-time event-excerpts event-list-date event-list-time event-list-address event-icalgcal-links opentable-style-light newsletter-style-dark small-button-style-raised small-button-shape-rounded medium-button-style-solid medium-button-shape-square large-button-style-solid large-button-shape-square button-style-default button-corner-style-square native-currency-code-usd page-resume"> <div class="sqs-layout sqs-grid-12 columns-12" data-type="page" data-updated-on="1401267235869" id="page-5384409de4b03eaa293c8953"> <div class="row sqs-row"> <div class="col sqs-col-4 span-4"> <div class="sqs-block gallery-block sqs-block-gallery" data-block-json="&#123;&quot;hSize&quot;:null,&quot;floatDir&quot;:null,&quot;methodOption&quot;:&quot;transient&quot;,&quot;existingGallery&quot;:null,&quot;design&quot;:&quot;slideshow&quot;,&quot;aspectRatio&quot;:null,&quot;autoplay&quot;:true,&quot;autoplay-duration&quot;:5,&quot;controls&quot;:true,&quot;auto-crop&quot;:false,&quot;thumbnails&quot;:false,&quot;thumbnail-strip-height&quot;:80,&quot;thumbnail-strip-margin&quot;:20,&quot;show-meta&quot;:false,&quot;active-alignment&quot;:&quot;center&quot;,&quot;collectionId&quot;:&quot;5384409de4b03eaa293c894c&quot;,&quot;vSize&quot;:null,&quot;transientGalleryId&quot;:&quot;5384409de4b03eaa293c894c&quot;&#125;" data-block-type="8" id="block-e66138e3b7665a18e39b"> <div class="sqs-block-content"> <div class="sqs-gallery-container sqs-gallery-block-slideshow sqs-gallery-has-controls clear"> <div class="sqs-block gallery-block sqs-block-gallery" data-block-json="&#123;&quot;hSize&quot;:null,&quot;floatDir&quot;:null,&quot;methodOption&quot;:&quot;transient&quot;,&quot;existingGallery&quot;:null,&quot;design&quot;:&quot;slideshow&quot;,&quot;aspectRatio&quot;:null,&quot;autoplay&quot;:true,&quot;autoplay-duration&quot;:5,&quot;controls&quot;:true,&quot;auto-crop&quot;:false,&quot;thumbnails&quot;:false,&quot;thumbnail-strip-height&quot;:80,&quot;thumbnail-strip-margin&quot;:20,&quot;show-meta&quot;:false,&quot;active-alignment&quot;:&quot;center&quot;,&quot;collectionId&quot;:&quot;5384409de4b03eaa293c894c&quot;,&quot;vSize&quot;:null,&quot;transientGalleryId&quot;:&quot;5384409de4b03eaa293c894c&quot;&#125;" data-block-type="8" id="block-e66138e3b7665a18e39b"> <div class="sqs-block-content"> <div class="sqs-gallery-container sqs-gallery-block-slideshow sqs-gallery-has-controls clear"> <div class="sqs-gallery"> <div class="slide content-fit" data-type="image" data-click-through-url=""> <noscript> <img src="http://static.squarespace.com/static/5361d375e4b00f49de2ab983/5384409de4b03eaa293c894c/53859cb3e4b0e389a2870dd3/1401265332576/loading.gif" alt="loading.gif" /></noscript> <img class="thumb-image" alt="loading.gif" data-src="http://static.squarespace.com/static/5361d375e4b00f49de2ab983/5384409de4b03eaa293c894c/53859cb3e4b0e389a2870dd3/1401265332576/loading.gif" data-image="http://static.squarespace.com/static/5361d375e4b00f49de2ab983/5384409de4b03eaa293c894c/53859cb3e4b0e389a2870dd3/1401265332576/loading.gif" data-image-dimensions="300x280" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="53859cb3e4b0e389a2870dd3" data-type="image" /> <div class="color-overlay"></div> </div> <!--END .slide.content-fit--> </div> <!--END .sqs-gallery--> <div class="sqs-gallery-meta-container"> <div class="sqs-gallery-controls"> <a href="#" class="previous"></a> <a href="#" class="next"></a> </div> </div> <!-- END .sqs-gallery-meta-container --> </div> <!--END sqs-gallery-container.sqs-gallery-block-slideshow.sqs-gallery-has-controls.clear--> </div> <!--END .sqs-block-content--> </div> <!--END .sqs-block.gallery-block.sqs-block-gallery--> </div> </div> </div> </div> </div> </div>
<script type="text/javascript" src="https://static.squarespace.com/static/ta/51e6b9c9e4b050adffbe392c/1128/scripts/site.js"></script>
<script>
//$('.sqs-gallery-controls').append('<ul class="dots"></ul>')
//$('.previous').remove()
//$('.sqs-gallery-controls .next').remove()
</script><script type="text/javascript" data-sqs-type="imageloader">(function() {var SQUARESPACE_SIZES=[1500,1E3,750,500,300,100],IMAGE_LOADING_CLASS="loading",ImageLoader=new function(){this.load=function(a,b){function c(a,b,c){var d=new Image;d.onload=b;d.onerror=c;d.src=a}a.getDOMNode&&(a=a.getDOMNode());var d=this._getDataFromNode(a,b),e=!(!d.dimensions||!d.dimensions.width||!d.dimensions.height),l=d.load+"";if("false"===l)return!1;var g=d.mode;if(e&&("fit"==g||"fill"==g)){g=a.parentNode;if(!g)return console.error("Not doing anything, parentNode not found."),!1;if(!this.refresh(a,
b,g))return!1}var n=this._intendToLoad(a,d);if("string"==typeof n&&"viewport"!==l){var m=this.getUrl(n,d),d=a.getAttribute("data-image-resolution");a.getAttribute("src")!==m&&this.isValidResolution(n,d)&&(a.onload=function(){a.className=a.className.replace(IMAGE_LOADING_CLASS," ").trim();a.setAttribute("data-image-resolution",n)},!a.getAttribute("src")&&-1===a.className.indexOf(IMAGE_LOADING_CLASS)&&(a.className+=(a.className?" ":"")+IMAGE_LOADING_CLASS),!a.getAttribute("src")&&e?a.setAttribute("src",
m):c(m,function(){e?a.setAttribute("src",m):(a.setAttribute("data-image-dimensions",this.width+"x"+this.height),ImageLoader.load(a,b))},function(){a.className=a.className.replace(IMAGE_LOADING_CLASS," ").trim();a.setAttribute("src",m)}));return!0}return n};this.refresh=function(a,b,c){a.getDOMNode&&(a=a.getDOMNode());c&&c.getDOMNode&&(c=c.getDOMNode());c=c||a.parentNode;if(!c)return console.error("Not doing anything, parentNode not found."),!1;var d=this._getDataFromNode(a,b),e=c.offsetWidth,l=c.offsetHeight;
b=d.mode;if("none"!=b){var g=d.dimensions.width,n=d.dimensions.height,m=g/n,q=e/l;if(d.fixedRatio)"fill"==b&&q>m||"fit"==b&&q<m?(h=100,k=100*(q/m),r=(100-k)*d.focalPoint.y,p=0):(h=100*(m/q),k=100,r=0,p=(100-h)*d.focalPoint.x),a.style.top=r+"%",a.style.left=p+"%",a.style.width=h+"%",a.style.height=k+"%";else{var f;"fill"===b?f=m>q?l/n:e/g:"fit"===b&&(f=m<q?l/n:e/g);!d.stretch&&("fit"==b&&1<f)&&(f=1);var h=Math.ceil(g*f),k=Math.ceil(n*f);if(0===h||0===k)return!1;var p,r;"fill"===b?(p=Math.min(Math.max(e/
2-h*d.focalPoint.x,e-h),0),r=Math.min(Math.max(l/2-k*d.focalPoint.y,l-k),0)):"fit"===b&&(f=d.fitAlignment,p=f.left?0:f.right?e-h:h<e?(e-h)/2:0,r=f.top?0:f.bottom?l-k:k<l?(l-k)/2:0,"inline"==this._getStyle(a,"display")&&(a.style.fontSize="0px"),this._resetAlt(a,function(){h-=a.offsetHeight-a.clientHeight;k-=a.offsetWidth-a.clientWidth}));a.style.top=Math.ceil(r)+"px";a.style.left=Math.ceil(p)+"px";a.style.width=Math.ceil(h)+"px";a.style.height=Math.ceil(k)+"px"}p=this._getStyle(c,"position");a.style.position=
"relative"==p?"absolute":"relative";if("fill"==b&&(b=this._getStyle(c,"overflow"),!b||"hidden"!=b))c.style.overflow="hidden";return!0}};this._intendToLoad=function(a,b){function c(c,d){"none"===b.mode&&(a.style.width=null,a.style.height=null);var e=parseFloat(a.getAttribute(c)),f=parseFloat(e);if(!f||isNaN(f))e=g._getStyle(a,c),f=parseFloat(e);if(!f||isNaN(f))e=g._getStyle(a,"max-"+c,"max"+(c.substr(0,1).toUpperCase()+c.substr(1))),f=parseFloat(e);if(0===d||e)switch(g._stringType(e)){case "percentage":d=
parseInt(e,10)/100*l["offset"+c.substr(0,1).toUpperCase()+c.substr(1)];break;case "number":d=parseInt(e,10)}!f&&(0!==d&&!a.getAttribute("src"))&&(d=0);return d}b=b||this._getDataFromNode(a);if(!b.source)return!1;var d=a.offsetWidth,e=a.offsetHeight,l=a.parentNode,g=this;this._resetAlt(a,function(){d=c("width",d);e=c("height",e)});0===d&&0===e?(d=b.dimensions.width,e=b.dimensions.height):0===d?d=this.getDimensionForValue("width",e,b):0===e&&(e=this.getDimensionForValue("height",d,b));"viewport"===
b.load&&(a.style.width=Math.floor(d)+"px",a.style.height=Math.floor(e)+"px");return this.getSquarespaceSize(d,e,b)};this._getDataFromNode=function(a,b){b=b||{};var c={focalPoint:{x:0.5,y:0.5},dimensions:{width:null,height:null},mode:"none",fitAlignment:{center:!0},load:"true",stretch:!0,fixedRatio:!1};if(b.focalPoint)c.focalPoint=b.focalPoint;else{var d=a.getAttribute("data-image-focal-point");if(d&&(d=d.split(","))&&2==d.length)c.focalPoint={x:parseFloat(d[0]),y:parseFloat(d[1])}}if(b.dimensions)c.dimensions=
b.dimensions;else if((d=a.getAttribute("data-image-dimensions"))&&(d=d.split("x"))&&2==d.length)c.dimensions={width:parseInt(d[0],10),height:parseInt(d[1],10)};b.mode?c.mode=b.mode:a.parentNode&&(d=a.parentNode.className,-1!==d.indexOf("content-fill")?c.mode="fill":-1!==d.indexOf("content-fit")&&(c.mode="fit"));if("fit"===c.mode&&a.parentNode&&(d=b.fitAlignment||a.getAttribute("data-alignment")||a.parentNode.getAttribute("data-alignment")))c.fitAlignment={top:-1!==d.indexOf("top"),left:-1!==d.indexOf("left"),
center:-1!==d.indexOf("center"),right:-1!==d.indexOf("right"),bottom:-1!==d.indexOf("bottom")};if(b.load)c.load=b.load;else if(d=a.getAttribute("data-load"))c.load=d;if("undefined"!==typeof b.stretch)c.stretch=b.stretch;else if(d=a.getAttribute("data-image-stretch"))c.stretch="true"===d?!0:!1;c.source=b.source?b.source:a.getAttribute("data-src");if(c.source&&(-1!==c.source.indexOf("squarespace.com")||-1!==c.source.indexOf("squarespace.net"))&&"http:"===c.source.substr(0,5)&&"https"===window.location.protocol.substr(0,
5))c.source=c.source.replace("http://","https://");if(b.fixedRatio)c.fixedRatio=b.fixedRatio;else if(d=a.getAttribute("data-fixed-ratio"))c.fixedRatio="true"==d;return c};this._stringType=function(a){return"string"===typeof a&&-1!==a.indexOf("%")?"percentage":isNaN(parseInt(a,10))?NaN:"number"};this._getStyle=function(a,b,c){var d;a.currentStyle?d=a.currentStyle[c||b]:window.getComputedStyle&&(d=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return d};this._isVisible=function(a){a=
a.getBoundingClientRect();return 0<=a.left&&0<=a.top||0<=a.bottom&&0<=a.right||0<=a.left&&0<=a.bottom||0<=a.right&&0<=a.top};this.getSquarespaceSize=function(a,b,c){a=Math.max(b/(c.dimensions.height/c.dimensions.width),a);"number"==typeof window.devicePixelRatio&&(a*=window.devicePixelRatio);for(b=1;b<SQUARESPACE_SIZES.length&&!(a>SQUARESPACE_SIZES[b]);b++);return SQUARESPACE_SIZES[b-1]+"w"};this.getDimensionForValue=function(a,b,c){var d=c.dimensions.width;c=c.dimensions.height;return"width"==a?
d/c*b:"height"==a?c/d*b:NaN};this.getUrl=function(a,b){var c=b.source;return a&&("/"==c[0]||-1!=c.indexOf("squarespace.com")||-1!=c.indexOf("squarespace.net"))?(-1===c.indexOf("format="+a)&&(c=c+(-1!==c.indexOf("?")?"&":"?")+"format="+a),window.Static&&(window.Static.IN_BACKEND&&-1===c.indexOf("storage=local"))&&(c+="&storage=local"),c):b.source};this.isValidResolution=function(a,b){a=parseInt(a,10);b=parseInt(b,10);return isNaN(a)||isNaN(b)?!0:a>b};this._resetAlt=function(a,b){var c=a.getAttribute("alt"),
d=c&&0<c.length&&!a.getAttribute("src");if(d){var e=a.style.display;a.removeAttribute("alt");a.style.display="none";a.offsetHeight+0;a.style.display=e}b.call(this);d&&a.setAttribute("alt",c)}};window.ImageLoader=ImageLoader;var siteCSSHandle,loopHandle,imagesTimer=50;function ancestorHasClass(a,b){return"undefined"!==typeof a.className&&-1!==a.className.indexOf(b)?!0:a.parentNode?ancestorHasClass(a.parentNode,b):!1}
var hasAttr=function(a,b){return a.hasAttribute?a.hasAttribute(b):!!a.attributes[b]},getAttr=function(a,b){return a.getAttribute?a.getAttribute(b):a.attributes[b]};function init(){var a=document.images;if(0<a.length)for(var b=0,c=a.length;b<c;b++)(hasAttr(a[b],"data-image")||hasAttr(a[b],"data-src"))&&"false"!==getAttr(a[b],"data-load")+""&&ImageLoader.load(a[b])}init();window.YUI&&YUI.add("squarespace-imageloader",function(a){});
})();</script>
<script>Squarespace.afterBodyLoad(Y);</script>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/129745/attrchange.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recommendation slider - Script Codes CSS Codes

.gradient { background: #fff; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000',GradientType=0 ); /* IE6-9 */
}
.cyan-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+1), .sqs-lightbox-open .modal.recco1 { background: #008ec0; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(0, 142, 192, 0.9) 0%, rgba(0, 71, 123, 0.9) 100%); background: linear-gradient(to bottom, rgba(0, 142, 192, 0.9) 0%, rgba(0, 71, 123, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ec0', endColorstr='#00477b',GradientType=0 ); /* IE6-9 */
}
.red-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+2), .sqs-lightbox-open .modal.recco2 { background: #961917; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(150, 25, 23, 0.9) 0%, rgba(116, 13, 6, 0.9) 100%); background: linear-gradient(to bottom, rgba(150, 25, 23, 0.9) 0%, rgba(116, 13, 6, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#961917', endColorstr='#740d06',GradientType=0 ); /* IE6-9 */
}
.silver-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+3), .sqs-lightbox-open .modal.recco3 { background: #9da8b0; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(157, 168, 176, 0.9) 0%, rgba(100, 107, 112, 0.9) 100%); background: linear-gradient(to bottom, rgba(157, 168, 176, 0.9) 0%, rgba(100, 107, 112, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9da8b0', endColorstr='#646b70',GradientType=0 ); /* IE6-9 */
}
.tan-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+4), .sqs-lightbox-open .modal.recco4 { background: #c69d5f; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(198, 157, 95, 0.9) 0%, rgba(116, 76, 25, 0.9) 100%); background: linear-gradient(to bottom, rgba(198, 157, 95, 0.9) 0%, rgba(116, 76, 25, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c69d5f', endColorstr='#744c19',GradientType=0 ); /* IE6-9 */
}
.orange-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+5), .sqs-lightbox-open .modal.recco5 { background: #fc9200; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(252, 146, 0, 0.9) 0%, rgba(150, 84, 0, 0.9) 100%); background: linear-gradient(to bottom, rgba(252, 146, 0, 0.9) 0%, rgba(150, 84, 0, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc9200', endColorstr='#965400',GradientType=0 ); /* IE6-9 */
}
.blue-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+6), .sqs-lightbox-open .modal.recco6 { background: #fc9200; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(252, 146, 0, 0.9) 0%, rgba(150, 84, 0, 0.9) 100%); background: linear-gradient(to bottom, rgba(252, 146, 0, 0.9) 0%, rgba(150, 84, 0, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc9200', endColorstr='#965400',GradientType=0 ); /* IE6-9 */
}
.steel-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+7), .sqs-lightbox-open .modal.recco7 { background: #6a7d9c; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(106, 125, 156, 0.9) 0%, rgba(80, 94, 117, 0.9) 100%); background: linear-gradient(to bottom, rgba(106, 125, 156, 0.9) 0%, rgba(80, 94, 117, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a7d9c', endColorstr='#505e75',GradientType=0 ); /* IE6-9 */
}
.brown-gradient, .page-resume .sqs-gallery .slide:nth-child(8n+0), .sqs-lightbox-open .modal.recco8 { background: #964204; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(150, 66, 4, 0.9) 0%, rgba(116, 40, 6, 0.9) 100%); background: linear-gradient(to bottom, rgba(150, 66, 4, 0.9) 0%, rgba(116, 40, 6, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#964204', endColorstr='#742806',GradientType=0 ); /* IE6-9 */
}
body:before { /* Top Graphic */ position: fixed; top: -36px; /* LEAVE OFF http: OR https: */ content: url(//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5375a761e4b0cb63d6f8fdab/1400219490377/Stars_top.png?format=1500w);
}
body:after { /* Bottom Graphic */ position: fixed; bottom: -36px; /* LEAVE OFF http: OR https: */ content: url(//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5375a761e4b0d4555964c0c1/1400622804934/Stars_bottom.png?format=1500w);
}
#headerWrapper header { padding-bottom: 40px;
}
body.homepage { /* Homepage bg */ /* LEAVE OFF http: OR https: */ background-image: url("//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5388a674e4b040c8980d13a3/1401467084059/bkgd_HomeNew.jpg?format=1500w") !important; /*must override :not selector*/
}
body[class*="casestudies"] { /* Casestudies bg */ /* LEAVE OFF http: OR https: */ background-image: url("//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5375a75fe4b0d4555964c0b8/1402341154271/bkgd_casestudies.jpg?format=1500w") !important; /*must override :not selector*/
}
body[class*="casestudies"] a[href="/casestudies/"] span { border-bottom-color: #fff !important;
}
body.page-resume { /* Resume bg */ /* LEAVE OFF http: OR https: */ background-image: url("//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5375a761e4b0cb63d6f8fda9/1400219490093/bkgd_Resume.jpg?format=1500w") !important; /*must override :not selector*/
}
body.page-about { /* About bg */ /* LEAVE OFF http: OR https: */ background-image: url("//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5375a75fe4b0cb63d6f8fda3/1400219490895/bkgd_About.jpg?format=1500w") !important; /*must override :not selector*/
}
body.page-contact { /* Contact bg */ /* LEAVE OFF http: OR https: */ background-image: url("//static.squarespace.com/static/5361d375e4b00f49de2ab983/53752e34e4b08ebb6e283221/5388a6a2e4b06f2290e6bc0a/1401464490867/bkgd_ContactNew.jpg?format=1500w") !important; /*must override :not selector*/
}
.page-about [class*=sqs-col] .sqs-block,
.page-casestudies [class*=sqs-col] .sqs-block { padding: 13px 7px 0px 6px !important;
}
.page-about [class*=sqs-col] .sqs-block .intrinsic,
.page-casestudies [class*=sqs-col] .sqs-block .intrinsic { max-width: 100% !important;
}
.page-resume { /*sqs-gallery-meta-container*/
}
.page-resume .sqs-block-gallery, .page-resume.xmlFail .sqs-block-gallery { visibility: hidden;
}
.page-resume.xmlSuccess .sqs-block-gallery { visibility: visible; /*padding: 0;*/
}
.page-resume .sqs-gallery { max-height: 240px !important;
}
@media (min-width: 768px) { .page-resume .sqs-gallery { min-height: 280px; }
}
.page-resume .sqs-gallery .slide { color: #fff; border-radius: 10px; overflow: hidden;
}
.page-resume .sqs-gallery .slide > div { padding: 20px; pointer-events: none; /*https://css-tricks.com/almanac/properties/p/pointer-events/*/
}
.page-resume .sqs-gallery .slide:hover { cursor: pointer;
}
.page-resume .sqs-gallery .slide .sqs-block-content p:first-child { font-weight: bold;
}
.page-resume .sqs-gallery .slide .sqs-block-content p:first-child:before { display: block; content: "Reccommendation from:"; font-size: .8em; font-weight: normal;
}
.page-resume .sqs-gallery .slide .sqs-block-content p:nth-child(2) { display: block; /* Fallback for non-webkit */ height: 6em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.page-resume .sqs-gallery .slide .sqs-block-content p:nth-child(2) + p, .page-resume .sqs-gallery .slide .sqs-block-content p:nth-child(2) ~ p { display: none;
}
.page-resume .sqs-gallery-meta-container { position: absolute; bottom: 0; z-index: 1000; width: 100%; /*.sqs-gallery-controls*/
}
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls { margin: 0 auto; /*.dots*/
}
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .previous,
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .next { display: none;
}
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .dots { /*https://css.maxdesign.com.au/listutorial/horizontal_master.htm*/ padding: 0; list-style-type: none; text-align: center;
}
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .dots li { display: inline; margin-right: 10px;
}
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .dots li span { display: inline-block; width: 13px; height: 13px; /* padding: .2em 1em; */ background-color: none; /*white*/ border-radius: 13px; border: 2px solid white;
}
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .dots li span:hover,
.page-resume .sqs-gallery-meta-container .sqs-gallery-controls .dots li.active span { color: #fff; background-color: white; cursor: pointer;
}
.modal { display: none;
}
@media only screen and (min-width: 600px) { .sqs-lightbox-open { overflow: hidden !important; }
}
.sqs-lightbox-open .modal { background: #fff; /* Old browsers */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000',GradientType=0 ); /* IE6-9 */ z-index: 1000;
}
@media only screen and (max-width: 599px) { .sqs-lightbox-open .modal { display: none; }
}
@media only screen and (min-width: 600px) { .sqs-lightbox-open .modal { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
}
.sqs-lightbox-open .modal .close { position: absolute; top: .5em; right: .5em; width: 50px; height: 50px; background: #000; color: #fff; font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; font-size: 40px; line-height: 1; text-align: center; border: 5px solid; border-radius: 30px; cursor: pointer; z-index: 12000;
}
.sqs-lightbox-open .modal .modal-content { position: relative; padding: 5em; color: #fff; line-height: 1.2;
}
.sqs-lightbox-open .modal .modal-content p { font-size: 2em;
}
.sqs-lightbox-open .modal .modal-content a { font-weight: bold;
}
.sqs-lightbox-open .modal .modal-content a:hover { color: #fff; text-decoration: underline;
}
.sqs-lightbox-open .modal .modal-content p:last-of-type { padding-bottom: 2em;
}
.sqs-lightbox-open .modal .modal-content p:first-child { position: absolute; bottom: 2em; font-weight: bold;
}

Recommendation slider - Script Codes JS Codes

var sitemap = "//dl.dropboxusercontent.com/u/17091106/sitemap.xml", //dave-mcclain-dj97.squarespace.com/sitemap.xml context = 'document.body', itemCount = 0, $body = $('body') //cache $gallery = $('.sqs-gallery'), $slide = $('.sqs-gallery .slide'), //only has one right now $dots = ''; //not ready yet
//console.log('init: '+itemCount)
var urlFilter = function(){ //console.log('filter') // http://stackoverflow.com/a/16131764 return $('loc', this).text().indexOf('recco') > -1; //reccommend
}
// -----------------------------------------------------------
var xmlSuccess = function(xml){ //console.log('XML loaded successfully') $body.addClass( "xmlSuccess" ); //console.log( xml ) // $(xml) // remove dummy slide used to get squarespace to instantiate a gallery $slide.remove() //$gallery.css('height', '300px') $('.sqs-gallery-controls').append('<ul class="dots"></ul>') // FILTER URLS, get content, create slides //console.log( $(xml).find('url').filter(urlFilter) ) $(xml).find('url').filter(urlFilter).each(getContent);
} // xmlSuccess() --------------------------------------------
var xmlFail = function(){ //XML could not be loaded console.log('XML failed to load') $body.addClass( "xmlFail" );
} // xmlFail() -----------------------------------------------
// -----------------------------------------------------------
var getContent = function(){ var url = $(this).find('loc').text(); //+'?format=json' itemCount++; //console.log(itemCount) url = url.replace('http://','//') //fix no-acces control origin //console.log(url) $.ajax({ url: url, context: document.body, dataType: "json" }).success(addSlide).complete(ajaxComplete)
} // getContent() --------------------------------------------
// -----------------------------------------------------------
var j = 1;
var ajaxComplete = function(){ //console.log(j++) j++ if( j == itemCount) { //console.log('fin') //console.log(itemCount) $slide = $gallery.find('.slide'), //update cache $dots = $('.dots') $slide.eq(0).removeAttr('style') $dots.find('li').eq(0).addClass('active') //sqs-gallery-meta-container $dots.on("click", "li", jumpTo); $slide.attrchange({ // https://github.com/meetselva/attrchange trackValues: true, /* Default to false, if set to true the event object is updated with old and new value.*/ callback: function (event) { var index = $(this).index(); //event - event object //event.attributeName - Name of the attribute modified //event.oldValue - Previous value of the modified attribute //event.newValue - New value of the modified attribute //Triggered when the selected elements attribute is added/updated/removed if(event.attributeName == 'class' && event.newValue.indexOf('active') > -1 ){ //console.log( index ) $dots.find('li.active').removeClass('active'); $dots.find('li').eq(index).addClass('active'); } } }) }
} // ajaxComplete() ------------------------------------------
// -----------------------------------------------------------
var addSlide = function(json){ //console.log(json) //console.log('add item') $gallery.append('<div class="slide sqs-gallery-design-stacked-slide loaded" style="opacity: 0; visibility: hidden;">'+json.mainContent+'</div>'); // would be nice if these faded in... $('.dots').append('<li><span></span></li>')
} // addSlide() ----------------------------------------------
// -----------------------------------------------------------
// user interaction
var jumpTo = function(){ var index = $(this).index(), active = 'sqs-active-slide', $activeSlide = $slide.hasClass('.'+active); //not find... console.log('jump to '+index ) //console.log( $activeSlide ) //$('.sqs-gallery .slide.sqs-active-slide').attr("style", "opacity: 0; visibility: hidden") //$activeSlide //$('.sqs-gallery .slide.sqs-active-slide').removeClass('.sqs-active-slide') //$activeSlide //$slide.eq(index).addClass(active) //$('.sqs-gallery .slide.sqs-active-slide').attr("style", "opacity: 1") //z-index: 899; //$activeSlide
} // jumpTo() ------------------------------------------------
var slideClick = function(){ var index = $(this).index() + 1, html = $(this).find('.sqs-block-content').html(), modal = '<div class="modal recco'+index+'">' modal += '<span class="close">x</span>' //<div class="modal-header"></div> modal += '<div class="modal-content">' modal += html modal += '<a href="https://linkedin.com/in/davemcclain" target="_blank">See all recommendations on LinkedIn</a>' modal += '</div>' //end .modal-content modal += '</div>' //end .modal //console.log(html); //console.log('open modal') // add .sqs-lightbox-open to body $body.addClass('sqs-lightbox-open') // pause slider? $body.append(modal) $('.modal').on('click', '.close', closeModal)
}
var closeModal = function(){ //console.log('close modal') $('.modal').remove() $('body').removeClass('sqs-lightbox-open')
}
$gallery.on('click', '.slide', slideClick)
// -----------------------------------------------------------
//if( window.location.pathname.indexOf("resume") > -1 ) {
//if( $body.hasClass('page-resume') ) { $.ajax({ // Get this party started url: sitemap, context: context, dataType: "xml" }).success(xmlSuccess).error(xmlFail);
//}
//If someone naviagtes to recoo page, use JS to redirect back to home or resume...
//console.log(window.location.origin)
//if( window.location.pathname.indexOf("reco") > -1 ) { // codepen probably doens't like this... //window.location.replace(window.location.origin)
//}
Recommendation slider - Script Codes
Recommendation slider - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 17,000 Kb
Views 24,288
Do you need developer help for Recommendation slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alyssa (alyda) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!