Image Scroller – to use on Melb PC site

Image Scroller to use on the Melb PC website

Special thanks go to Mohan Gupta, without he’s input we would still be working on the scroller!

You may be wondering how to create an image scroller on your SIG’s webpage, if so follow this tutorial to create an image scroller on your site.

First an foremost, you need your images, I uploaded my images onto the umbrako website by selecting the image icon on the left hand side menu bar, then opening the website design SIG folder and selecting the Upload file icon.

Next I return to the webpage (Page Content) I’m working on. The images I have uploaded can be found using the image icon (Media Picker) on the wyswig editor. I use the Media Picker to added the image (and url) to my page.

To find the url I hit the <> (Source code) button and can copy and paste the url.

The url in this case is <img style=”width: 252px; height:448px;” src=”/media/226044/dsc_0512.jpg?width=252;height=448″ alt=”” rel=”12557″ />

When I have all of my urls, I will create my code for the html side of the slider, please see the code below,

<div class=”content display-container”>
<img style=”width: 100%;” class=”mySlides” src=”/media/226044/dsc_0512.jpg” alt=”” />
<img style=”width: 100%;” class=”mySlides” src=”/media/226039/dsc_0452.jpg” alt=”” />
<img style=”width: 100%;” class=”mySlides” src=”/media/226040/dsc_0459.jpg” alt=”” />
<img style=”width: 100%;” class=”mySlides” src=”/media/226043/dsc_0509.jpg” alt=”” />

<button class=”button arrow-left display-left”></button>
<button class=”button arrow-right display-right”></button>

<span>Title tag </span>
</div>

Next to I need to add my css and javascript. It can be added using the Javascript Tab at the top of the page.

Add the following code to the startup scripts field,

<style>
.display-container:hover .display-hover{display:block}
.display-container:hover span.display-hover{display:inline-block}
.display-hover{display:none}
.display-container{position:relative;
width: 252px;
margin: 0 auto; /*center aligns the scroller */}
.arrow-right{
width: 0;height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid;
border-left-color: rgba(0,136,204,0.6);  /*creates a blue color with transparency level 0.6*/
border-right: none;
}
.arrow-left{
width: 0;height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid #0088cc; /*no transparency */
border-left: none;
}
.display-left{
position:absolute;
top:50%;left:3%;width:5%;
transform:translate(0%,-50%);
-ms-transform:translate(-0%,-50%);
background-color: transparent;
}
.display-right{
position:absolute;
top:50%;right:3%;width:5%;
transform:translate(0%,-50%);
-ms-transform:translate(0%,-50%);
background-color: transparent;
}
</style>
<script>
var slideIndex = 0;
document.addEventListener(‘DOMContentLoaded’, function() {
showDivs(slideIndex);
jQuery(‘.display-right’ ).click(function() {
slideIndex = slideIndex + 1;
showDivs(slideIndex);
});
jQuery(‘.display-left’ ).click(function() {
slideIndex = slideIndex – 1;
showDivs(slideIndex);
});
}, false);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName(“mySlides”);
if (n >= x.length) {slideIndex = 0}
if (n < 0) {slideIndex = x.length – 1}
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
x[slideIndex].style.display = “block”;
}
</script>

To add the Text to the images, replace the html with the following,