Estro Slider (Ken Burns Effect) [V5]

Up to date as of 09/02/2012

This is a paid for product - click here to purchase at Envato (around $12 USD)

This slider is a great alternative to the built in squarespace slider, but does require some more effort in set up! The code below will replicate the looks of the slider above (if using example 3 in the download).

  • Firstly, create a directory in file storage e.g. /estro-slider/ and a sub-directory called img e.g. /estro-slider/img
  • Next, open up the CSS file from the example you wish to replicate (file will be called skin.min.css). Use find+replace to find all ‘url(“img/’ and replace with the img directory you just created e.g. ‘url(“/storage/estro-slider/img/’. (Note: on Squarespace you always need to prepend the relative path with ‘/storage/’).
  • Upload the CSS file you just edited and the jquery.pixelentity.kenburnsSlider.min.js file to the directory you created in step one.
  • Upload all the images from the themes img folder to the img directory you just made.

You can now paste this into Extra Header Code in code injection - omit the jQuery line if you already load it. Note: The jQuery script tag must be above the sliders script tag

<!--Slider stylesheet-->
<link href="/storage/estro-slider/skin.min.css" rel="stylesheet" />
<!--Load jQuery-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--Load slider plugin-->
<script type="text/javascript" src="/storage/estro-slider/jquery.pixelentity.kenburnsSlider.min.js"></script>

Paste this into Custom CSS

  • You can change the width and height of the slider at the top of this code - simply change the XYZpx values.
  • If you are using the panning/KenBurns effect, you need the source images to be larger than the size of the slider, so it has space to pan around.
  • A problem with the Slider/Squarespace is that the text used is h1, i.e. the same as the heading at the top of the page. I have added some code in the Custom CSS which only targets the pictures caption and won’t affect the rest of your site. Edit the CSS below /* style h1 tag */ in the Custom CSS below.
.peKenBurns {
width: 700px;
height: 400px;
}

/* set border size to 0px */
.peKenBurns .peKb_slides {
padding: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

/* set controls margins to 0px */
.peKenBurns .peKb_controlsInner .peKb_holder{
margin: 0px;
}

/* style h1 tag */
div .peKenBurns h1 a {

}

Paste this code wherever you want the slider

  • The div with class=”peKenBurns” is the container for the slider, options can be set here. e.g. data-mode=”slide” will give a slide effect (and not panning).
  • The divs inside this are for the images you wish to load, the one with class=”peKb_active” will be the first to load.
  • Repeat the div in-between Start and End to add more pictures
  • By using a blank image as the source, we can “lazy load” the pictures to improve load time. The browser will initially pull a small image, and just before it needs it, the script will load the real thing. Change the data-src value to the real image, and leave the src pointing to the blank.png. The alt tag is here for accessibility reasons.
  • In the h1 tag you can change the caption, I use links in mine so there is an anchor tag.
  • After the last slider on your page, call the script at the bottom to activate them!
<div class="peKenBurns" data-controls="inner" data-shadow="disabled"> 
<div class="peKb_active" data-delay="5">
<img src="/storage/estro-slider/img/blank.png" data-src="/storage/blog/creattica/hotrod.jpg" alt="HotroDR">
<h1><a href="http://creattica.com/photos/hotrodr/60640">HotroDR by CWD Graphics</a></h1>
</div>
<!-- Start -->
<div data-delay="5">
<img src="/storage/estro-slider/img/blank.png" data-src="/storage/blog/creattica/monaco.jpg" alt="Streets of Monaco">
<h1><a href="http://creattica.com/photos/streets-of-monaco/61218">Streets of Monaco by Tyson Junkers</a></h1>
</div>
<!-- End -->
<div data-delay="5">
<img src="/storage/estro-slider/img/blank.png" data-src="/storage/blog/creattica/plane.jpg" alt="Orlando International Sunrise">
<h1><a href="http://creattica.com/photos/orlando-international-sunrise/61330">Orlando International Sunrise by AtomicLemon</a></h1>
</div>
</div>

<script type="text/javascript">
jQuery(function($){
$(".peKenBurns").peKenburnsSlider()
})
</script>

Use the documentation! There are in depth explanations and examples on how to use the more advanced features of this slider, including thumbnail previews, logos, timings and pausing.

Leave a comment if you need any help!

I am not affiliated with CodeCanyon or the creator of this item!