Known Participant

Answered

Slide show tutorials

Forum|Forum|8 years ago
June 11, 2017
2 replies
5375 views

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!

Create Slideshows in Dreamweaver

This topic has been closed for replies.

Correct answer osgood_

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!

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>

cordeliag33413048

Known Participant

Hello i am trying to add an image to a slide that has two images.

</div>

</div>

THIS IS THE SLIDE SHOW THAT I AM TRYING TO INCLUDE ONE MORE PICTURE TO.

CAN SOMEONE HELP ME SO MY EMPLOYER CAN BE HAPPY BEFORE I LEAVE THE OFFICE.

HE IS THREATENING TO TERMINATE ME AND I AM SCARED.

Nancy OShea

Braniac

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

maity1Author

Known Participant

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>

<SCRIPT LANGUAGE="JavaScript">

<!--

<!-- 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>

maity1Author

Known Participant
Forum|Forum|8 years ago
June 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 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>

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>

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>

$(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.
<script>
</script>

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

Powered by Gainsight
Terms & Conditions Accessibility statement

Sign up

Already have an account? Login

To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign in

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign in

Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.

Enter your e-mail address

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OK

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.
OK

Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information AdChoices