Slide show tutorials

Report · Jun 11, 2017

hi

does anyone know if there are any tutorials on having a slide show/rotating images on a home page? Mine used to work but has stopped and I can't figure out, looking at my index.html in dreamweaver, what has gone missing ..

thanks!

Report · Jun 11, 2017

Without knowing how you created your slideshow or in which version of DW, it's impossible to say much.

If you use Bootstrap responsive layouts, you can drop a Carousel component into your home page very easily.

See code below for a working example.

!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7 Starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.center-block {float:none}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-10 center-block text-center">
<h1>My Awesome Website</h1>
<h2>Some pithy slogan...</h2>
</div>
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1180/400/technics/4" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1180/400/technics/3" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1180/400/technics/2" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1180/400/technics/1" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<!--end active-->
</div>
<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span> </a> 
<!--end carousel-->
</div>
</div>
</div>
<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 12, 2017

Thank you Nancy, unfortunately I do not know what carousel is.

This is the relevant part of what I have where it has the slide 1, slide 2 etc .. these 6 images used to rotate but no longer do.

Thanks !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Photography | Home</title>

<!--

.center {

text-align: center;

}

.body-aligned-center {

text-align: center;

}

body {

margin-left: 0px;

margin-top: 0px;

text-align: left;

margin-right: 0px;

margin-bottom: 0px;

}

.centeredbody {

text-align: center;

}

-->

</style>

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<!--

<!-- Begin

var timeDelay = 6; // change delay time, change to higher number for slower slide show

var Pix = new Array

("index/slide1.jpg"

,"index/slide2.jpg"

,"index/slide3.jpg"

,"index/slide4.jpg"

,"index/slide5.jpg"

,"index/slide6.jpg"

);

var howMany = Pix.length;

timeDelay *= 500;

var PicCurrentNum = 0;

var PicCurrent = new Image();

PicCurrent.src = Pix[PicCurrentNum];

function startPix() {

setInterval("slideshow()", timeDelay);

}

function slideshow() {

PicCurrentNum++;

if (PicCurrentNum == howMany) {

PicCurrentNum = 0;

}

PicCurrent.src = Pix[PicCurrentNum];

document["ChangingPix"].src = PicCurrent.src;

}

// End --></script>

</head>

Report · Jun 12, 2017

I dont do vanilla javascript but if you want a simple no fuss image slider I use the jQuery solution below. Its simple to include on your webpage - could you do that?

<html>

<head>

<title>Image Slideshow</title>

<style>

/* css to hide image slides on page load */

.slide-show img {

position: absolute;

display: none;

}

</style>

$(document).ready(function() {

$(".active").show();

setInterval(function(){ Next($('.slide:visible'))}, 2400);

});

function Next(slide) {

slide.fadeOut();

if(typeof slide.next().attr('src') !== 'undefined') {

slide.next().fadeIn();

} else {

$('.active').fadeIn();

}

</script>

</head>

<body>

</div>

</body>

</html>

Report · Jun 12, 2017

Thank you. To be honest someone else built my site for me I only know how to add new pages and link them in.

Are you saying I can just copy paste this section into my index page (replacing the blue with my own links to the images I want in the slideshow)? I'll certainly give it a go if it's that simple thanks!

Report · Jun 12, 2017

Paste the code below (down to the ending </script> tag) in your page, directly before the closing </head> tag.

<style>

/* css to hide image slides on page load */

.slide-show img {

position: absolute;

display: none;

}

</style>

$(document).ready(function() {

$(".active").show();

setInterval(function(){ Next($('.slide:visible'))}, 2400);

});

function Next(slide) {

slide.fadeOut();

if(typeof slide.next().attr('src') !== 'undefined') {

slide.next().fadeIn();

} else {

$('.active').fadeIn();

}

</script>

You must have a container in your page where your current images get written to by the script you posted?

Find that container and give it a class of slide-show:

</div>

Then add the images to the slide-show <div> giving them a the class 'slide' and 'active' as below: (I assume your slideshow images are in a folder named 'index')

So you end up with:

</div>

Report · Jun 12, 2017

Thank you thank you. Will do!

another question .. I see it says fade in fade out.. if I just want the images to change without fading can I just remove this part or will it then not work?

Thankyou!

Report · Jun 12, 2017

maity1 wrote
Thank you thank you. Will do!
another question .. I see it says fade in fade out.. if I just want the images to change without fading can I just remove this part or will it then not work?
Thankyou!

Yes you can change the jQuery to just 'show' and 'hide': (see in red below)

$(document).ready(function() {

$(".active").show();

setInterval(function(){ Next($('.slide:visible'))}, 2400);

});

function Next(slide) {

slide.hide();

if(typeof slide.next().attr('src') !== 'undefined') {

slide.next().show();

} else {

$('.active').show();

}

</script>

Report · Jun 14, 2017

Thank you osgood.

It's the bit where you say to find the 'container' that has thrown me. I don't know where to put the part with the image information so I am just with this now, having done the other things :

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<style>

/* css to hide image slides on page load */

.slide-show img {

position: absolute;

display: none;

}

</style>

$(document).ready(function() {

$(".active").show();

setInterval(function(){ Next($('.slide:visible'))}, 2400);

});

function Next(slide) {

slide.hide();

if(typeof slide.next().attr('src') !== 'undefined') {

slide.next().show();

} else {

$('.active').show();

}

</script>

</head>

WHERE IS THIS PART MEANT TO GO ?

</div>

or, as on my old version, the first part of this, which states the time each image will show before moving on which Im also not sure how to include in this new version, so dont know how much of the below to keep in and where exactly?

<!-- Begin

var timeDelay = 6; // change delay time, change to higher number for slower slide show

var Pix = new Array

("index/slide1.jpg"

,"index/slide2.jpg"

,"index/slide3.jpg"

,"index/slide4.jpg"

,"index/slide5.jpg"

,"index/slide6.jpg"

);

var howMany = Pix.length;

timeDelay *= 500;

var PicCurrentNum = 0;

var PicCurrent = new Image();

PicCurrent.src = Pix[PicCurrentNum];

function startPix() {

setInterval("slideshow()", timeDelay);

}

function slideshow() {

PicCurrentNum++;

if (PicCurrentNum == howMany) {

PicCurrentNum = 0;

}

PicCurrent.src = Pix[PicCurrentNum];

document["ChangingPix"].src = PicCurrent.src;

}

// End --></script>

</head>

THANK YOU !!

Report · Jun 14, 2017

maity1 wrote
WHERE IS THIS PART MEANT TO GO ?
<div class="slide-show">
<img class="slide active" src="index/slide1.jpg"/>
<img class="slide" src="index/slide2.jpg"/>
<img class="slide" src="index/slide3.jpg"/>
<img class="slide" src="index/slide4.jpg"/>
<img class="slide" src="index/slide5.jpg"/>
<img class="slide" src="index/slide6.jpg"/>
</div>

Insert it where you want the slideshow to appear in your page.

maity1 wrote
</script>
</head>

You can then delete the above code script, as it is then redundant.

Report · Jun 14, 2017

Sorry but what do you mean "where it is meant to go" .. this whole section of script is relating to the index page image section where it is meant to go.

Report · Jun 14, 2017

I have tried it at the beginning and at the end. It may be something to do with "finding the container" that you mentioned that I know not what to look for. I fear I have to give up at this point as this new text is sadly not working. Thanks so much for trying though!

Report · Jun 14, 2017

maity1 wrote
Sorry but what do you mean "where it is meant to go" .. this whole section of script is relating to the index page image section where it is meant to go.

Take this code below and insert it into your page where you want the slideshow to appear.

</div>

Take this code below and insert it into the page directly before the closing </head> tag.

<style>

/* css to hide image slides on page load */

.slide-show img {

position: absolute;

display: none;

}

</style>

$(document).ready(function() {

$(".active").show();

setInterval(function(){ Next($('.slide:visible'))}, 2400);

});

function Next(slide) {

slide.fadeOut();

if(typeof slide.next().attr('src') !== 'undefined') {

slide.next().fadeIn();

} else {

$('.active').fadeIn();

}

</script>

Thats it.

You dont need the below code as it is the old script which doesnt work, according to you - so delete it.

<!-- Begin

var timeDelay = 6; // change delay time, change to higher number for slower slide show

var Pix = new Array

("index/slide1.jpg"

,"index/slide2.jpg"

,"index/slide3.jpg"

,"index/slide4.jpg"

,"index/slide5.jpg"

,"index/slide6.jpg"

);

var howMany = Pix.length;

timeDelay *= 500;

var PicCurrentNum = 0;

var PicCurrent = new Image();

PicCurrent.src = Pix[PicCurrentNum];

function startPix() {

setInterval("slideshow()", timeDelay);

}

function slideshow() {

PicCurrentNum++;

if (PicCurrentNum == howMany) {

PicCurrentNum = 0;

}

PicCurrent.src = Pix[PicCurrentNum];

document["ChangingPix"].src = PicCurrent.src;

}

// End --></script>

Report · Jun 14, 2017

What is pap I dont understand where to put that ?!

Report · Jun 14, 2017

maity1 wrote
What is pap I dont understand where to put that ?!

I corrected the spelling to 'page'

Report · Jun 14, 2017

You are being very patient! Im afraid I have pasted it into where the image is meant to be but it just appears in the wrong place on the screen .. although .. it si rotating!!!! so I'll maybe not give up quite yet ! Thanks so much

Report · Jun 14, 2017

It's so close to working but when I put it IN the image space ( <td><img src="index/slide1.jpg" width="816" height="572"/> ) it appears to the left, when I put it one below the image space it just does the rotating images below the space it is meant to be in !

</tr>

</table></td>

</tr>

<tr>

</div>

</td>

Report · Jun 14, 2017

maity1 wrote
It's so close to working but when I put it IN the image space ( <td><img src="index/slide1.jpg" width="816" height="572"/> ) it appears to the left, when I put it one below the image space it just does the rotating images below the space it is meant to be in !
</tr>
    </table></td>
</tr>
<tr>
    <td><img src="navig-main/left.gif" width="105" height="572" /></td>
    <td><img src="index/slide1.jpg" width="816" height="572"/>
<div class="slide-show">
<img class="slide active" src="index/slide1.jpg"/>
<img class="slide" src="index/slide2.jpg"/>
<img class="slide" src="index/slide3.jpg"/>
<img class="slide" src="index/slide4.jpg"/>
<img class="slide" src="index/slide5.jpg"/>
<img class="slide" src="index/slide6.jpg"/>
</div>
</td>
    <td><img src="navig-main/fbn-spacertop.gif" width="33" height="476" /></td>
    <td><img src="navig-main/right.gif" width="66" height="572" /></td>

You should not be using tables to layout a page.

Remove the image below from the code:

So you end up with just the slide-show <div> inside the <td></td> cell. (see if that helps)

<td>

</div>

</td>

Report · Jun 14, 2017

Yes Im afraid that is what I am saying.. when I dont have that line it ends up not in the right place at all .. everything shifts so all the border lines etc end up in a mess. ARGH!! With that line, it looks neat and rotates but just exactly below the space it is meant to be rotating in instead of in it ! Thanks!

Report · Jun 14, 2017

Can you upload the page and provide a link to it so I can see what is happening?

Report · Jun 14, 2017

osgood_ wrote
Can you upload the page and provide a link to it so I can see what is happening?

I guess not.

Report · Jun 15, 2017

Im afraid I can't work out how to attach a picture of it here. (I dont want to upload the page to my website as it looks a mess if that's what you meant to do?)

It works perfectly .. the slide show .. it is just in the wrong place, wherever I put it in the script, it gives me a slideshow to the right and below where it is meant to appear so one can only see the top left corner of the images rotating. Anyway thank you for all your help. Been much appreciated!

Report · Jun 15, 2017

I cant really help much if I can't see what is going on and I can only see that by looking at the code.

Try giving the slide-show <div> a height and width by adding a css selector for it as below:

<style>

.slide-show {

width: 100%;

height: 500px;

}

/* css to hide image slides on page load */

.slide-show img {

position: absolute;

display: none;

}

</style>

Report · Jun 15, 2017

THIS IS WHAT I HAVE NOW :

<style>

/* css to hide image slides on page load */

.slide-show img {

width="816" height="572" }

position: absolute;

display: none;

}

</style>

$(document).ready(function() {

$(".active").show();

setInterval(function(){ Next($('.slide:visible'))}, 2400);

});

function Next(slide) {

slide.hide();

if(typeof slide.next().attr('src') !== 'undefined') {

slide.next().show();

} else {

$('.active').show();

}

</script>

</head>

AND FURTHER DOWN I HAVE THIS :

</table></td>

</tr>

<tr>

<td><img src="navig-main/left.gif" width="105" height="572" /></ THIS LINE THE NUMBER ON THE LEFT IS IN RED INDICATING A PROBLEM I ASSUME?

<td>

</div>

</td>

BUT ALTHOUGH THEY ROTATE THEY ARE NOT IN THE RIGHT PLACE 😞 THEY ROTATE ONCE THROUGH UNDERNEATH AND THEN JUMP TO A DIFFERENT PLACE TO THE RIGHT AND CONTINUE ROTATING THERE .. ARGHGH!

Report · Jun 15, 2017

PS not sure if it helps but on the dreamweaver page itself before I preview online the images just show up one underneath each other in a long column if I scroll down..

Slide show tutorials

1 Correct answer