Help with install in Squarespace « Support Forum | Kriesi.at

Support Forum » Other Themes

Help with install in Squarespace

2 posts from 2 voices

Started 2 years ago by csteward1
Latest reply from Dude
This topic is not a support question

Tags:

csteward1
Member

I purchased the avia slider and have not been able to use it in squarespace. I am experience in code at all and could use a little help. My url is http://www.kawarisound.com. Another slidr I purchased they helped my breakdown the code like the following, can anyone help my set this up....

Web Settings > Code Injection
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
function slideSwitch() {
var $active = jQuery('#slideshow span.active');

if ( $active.length == 0 ) $active = jQuery('#slideshow span:last');

var $next = $active.next().length ? $active.next()
: jQuery('#slideshow span:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
</script>
<script type="text/javascript">

jQuery(document).ready(function(){

setInterval( "slideSwitch()", 4000 );

});

</script>

RAW HTML Editor
<div id="slideshow">
<span id="slideshow1" class="slideshowImg active">

</span>
<span id="slideshow2" class="slideshowImg">

</span>
<span id="slideshow3" class="slideshowImg">

</span>
<span id="slideshow4" class="slideshowImg">

<span id="slideshow5" class="slideshowImg">

</span>
</div>

Appearance >> Custom CCS
#slideshow {
position:relative;
height:448px; /* modify this to suit teh height of your pics */
text-align:center;
}

#slideshow span.slideshowImg {
position:absolute;
top:0;
left:0px;
z-index:8;
}
#slideshow span.slideshowImg img {
display:none;
}
#slideshow span.slideshowImg.active {
z-index:10;
}
#slideshow span.slideshowImg.active img {
display:block;
}
#slideshow span.slideshowImg.last-active {
z-index:9;

Posted 2 years ago #
Dude
Dude
Hey,
do you have a test server where I can investigate the code. It looks like you're missing some essential files. Include following files in header.php:
```
<script type='text/javascript' src='js/jquery.js'></script>
<script src="js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.aviaSlider.js'></script>
<script type='text/javascript' src='js/custom.js'></script>
```
The include your images like:

You can include as many slideshows ys you like (per page). You can use the multiswitch function to replace one slideshow by another.
Posted 2 years ago #