HTML5 Image Transitions (by PixelEntity) Squarespace Guide [V5]

A spectacular free file of the month (March ‘12) from CodeCanyon by one of my favourite plugin authors! A very simple, but well executed image transition plugin.

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

So, firstly Install jQuery.

Then upload the jquery.pixelentity.hilight.min.js file to your file storage. You’ll need to call the script after jQuery, check this out to make sure you link it correctly.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/storage/hilight.min.js"></script>

Add the init script below the plugin, you can edit the parameters according to the help file.

<script>
    jQuery(function($){
        // create the slideshow
        $(".hilight").peTransitionHilight({
            // enable slideshow mode
            slideshow: true,
            // delay between slides in ms
            delay: 3000,
            // transition duration in ms
            duration: 1000,
            // random transition
            transition: "random"
        });
    }); 
</script>

Go add this code to Custom CSS, change the width and height to that of your images:

.hiWrap {
    width:840px !important;
    height:370px !important;
}
.hilight {
    width:100%;
}

Last part! Add this code where you want the slider to go:

<div class="hiWrap">
    <img class="hilight" src="/storage/img1.jpg" data-destination="
            /storage/img1.jpg | 
            /storage/img2.jpg | 
            /storage/img3.jpg" 
            />
</div>

Change the src attribute to link to the first image. In data-destination you enter an array of all your images (incuding the first) in the format [LINK|LINK|LINK…]

That’s all! Make sure you checkout the alternate modes and play around with the parameters in the help file e.g. change

transition: "random" to transition: "vertbars"

You can add links to the image, just wrap the img in anchor tags.

Good luck, if you need any help post a comment!

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