Creating a simple photo slideshow in Dreamweaver CC

[WayneSmalley]

Hey there,

I have recently took on the project of creating a website in Dreamweaver.  I took classes around 5 years ago but that was on an old version...plus I hadn't messed with it since then.

I'm scared I've bit off more than I can chew.  But in any event, here is my current issue I have come across. 

I need to create a photo slideshow on my site.  I have attempted watching the youtube videos and trying the "create your slideshow" websites.. I am just not having any luck. 

I need a way to make a photo slideshow in the most simple way possible.  Any help would be greatly appreciated. 

[Jon Fritz]

The simplest one I know of is Cycle 2 available here: http://jquery.malsup.com/cycle2/

As long as you can follow some relatively simple copy/paste style instructions while in code view, you should be good to go.

[WayneSmalley]

What is the difference between production and development? Which should I download...or both?

[Jon Fritz]

One is minimized to reduce download time. Personally I almost never use the minified versions of scripts if they're under about 100-150 Kb.

The larger of the two will be easier to read/modify if you're new to javascript/jQuery too.

[WayneSmalley]

I'm afraid I need more basic than this... It states on the site of how simple it is.  I'm getting so frustrated with myself.

I'm confused with the download... it just brings up a code I can copy.  Where do I paste this?  I thought I need an unzipped file where I am storing my website information. I have seen before two separate codes to paste within two different areas.  I just see this one besides the extras on the site you have the option of adding on. 

Also,  I am not even sure where to insert the images I want presented.   I don't see it within the code.

[Jon Fritz]

I'm not sure delving into Bootstrap is going to be the answer here.

You're going to need to take some time to understand some basic principles of CSS, HTML (especially Bootstrap if you go that route) and Javascript before you can work in DW without ripping out your hair and destroying your blood pressure. The program really assumes you already know those things.

You may want to try Adobe Muse instead of DW. It was created for designers who don't know how to, or don't want to learn how to, manipulate code.

[Nancy OShea]

See if this helps you:

Alt-Web Design & Publishing: Primer for Using jQuery Plug-Ins

Nancy O.

[Mary_8]

I need to create a page with details of a property for sale with a selection of photographs of the property.

There will be say 6 images. At the top of the page there will be a large version of the image selected from the thumbnails displayed below.

I need the facility to scroll through the thumbnail images and when one is selected I want that one to display at the top of the page as the large image.

Here is an example of what I am trying to achieve:  http://www.rightmove.co.uk/property-for-sale/property-63551177.html

How can I do that in Dreamweaver CC 2015?

I don't think the carousel function is going to help me.

[Nancy OShea]

Use a plugin.  Wow Slider has many layout and fx options to choose from.

Slider jQuery

Nancy

[Guest]

WowSlider looks like it might be what I need, except that I need to use five rotating images, rather than four. Can I do that with WowSlider?

[Nancy OShea]

Sure.  But keep in mind that the more images you use adds to the overall page size and loading speed.  Be sure to optimize your images in Photoshop before you insert them into your slider.

Nancy

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

Sure.  But keep in mind that the more images you use adds to the overall page size and loading speed.  Be sure to optimize your images in Photoshop before you insert them into your slider.

Nancy

I'd probably use background images for main 'hero' images - a set for desktop, tablet and smartphone. More work but if youre that concerned with download time on mobile devices almost certaimly the correct way to go, depends whether one can be bothered or not managing 3 sets of images.

I don't know about srcset yet as I've never really attempted to introduce it into a real project thus far.

[Mary_8]

I have used five or six and it works fine except that the area in which the thumbnails are shows white space unless you use 8 images. Is there a way to make the thumbnails display as a single row rather than stacking?

[osgood_]

Mary+8  wrote

I have used five or six and it works fine except that the area in which the thumbnails are shows white space unless you use 8 images. Is there a way to make the thumbnails display as a single row rather than stacking?

The thumbnail images should just repeat themselves, not leave a white space:

FlexSlider 2

It concerns me that you say your thumbnails are stacking they shuold be like the example in the url above.

[Mary_8]

Here is a link to a page where I have used it with 13 images. No white space between the thumbnails and all stacking in sets of four.

http://www.warfieldpark.co.uk/pages/lissett_redwood_details.html

[osgood_]

Mary+8  wrote

Here is a link to a page where I have used it with 13 images. No white space between the thumbnails and all stacking in sets of four.

http://www.warfieldpark.co.uk/pages/lissett_redwood_details.html

Looks like you need to use a different option.

Replace the current html code with the code below:

<section class="slider">

<div id="slider" class="flexslider">

<ul class="slides">

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_exterior.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_01_lounge.jpg" /></li>

<li><img src="../mages_main/slideshows/lissett_redwood/lissett_redwood_02_kitchen.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_03_master_bedroom.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_04_second_bedroom.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_05_view_through.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_06_lounge.jpg" /></li>

<li><img src="..images_main/slideshows/lissett_redwood/lissett_redwood_07_view_through.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_09_kitchen_detail.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_10_view_through.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_11_bathroom.jpg" /></li>

</ul>

</div>

<div id="carousel" class="flexslider">

<ul class="slides">

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_exterior.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_01_lounge.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_02_kitchen.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_03_master_bedroom.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_04_second_bedroom.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_05_view_through.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_06_lounge.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_07_view_through.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_09_kitchen_detail.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_10_view_through.jpg" /></li>

<li><img src="../images_main/slideshows/lissett_redwood/lissett_redwood_11_bathroom.jpg" /></li>

</ul>

</div>

</section>

<!-- end slider -->

Then replace the flexslider script at the foot of your page with:

<script type="text/javascript">

$(window).load(function(){

$('#carousel').flexslider({

animation: "slide",

controlNav: false,

animationLoop: false,

slideshow: false,

itemWidth: 210,

itemMargin: 5,

asNavFor: '#slider'

});

$('#slider').flexslider({

animation: "slide",

controlNav: false,

animationLoop: false,

slideshow: false,

sync: "#carousel",

});

});

</script>

You dont want to be linking to  jquery 1.6 either, thats far too old.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

You need a more current version:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

[osgood_]

FlexSlider maybe be an option:

FlexSlider 2

[Mary_8]

FlexSlider seems to have what I am looking for.

I know I am being dense but how exactly do I install it and make it work on a page in my web site?

Do I have to put all of the files they give with the download onto the host server so that it interacts with other stuff?

What do I put into the page where the slideshow is situated and where does it go?

[osgood_]

Mary+8  wrote

Do I have to put all of the files they give with the download onto the host server so that it interacts with other stuff?

What do I put into the page where the slideshow is situated and where does it go?

You only need the files that are associated with the example that you intend to use.

Below would be all you need for the html code (thumbnail example) plus the flexslider.css file which is in the css folder and jquery.flexslider.js file which is in the js folder and the images which are in the images folder but you will replace the images with your own images. As long as you keep to that file/folder structure you can transport the files and folders to your own site folder or create new folders in your site folder and just copy and paste the css/js files needed.

<!DOCTYPE html>

<html>

<head>

<meta content="charset=utf-8">

<title>FlexSlider 2</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

</head>

<body>

<section class="slider">

<div class="flexslider">

<ul class="slides">

<li data-thumb="images/kitchen_adventurer_cheesecake_brownie.jpg">

<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />

</li>

<li data-thumb="images/kitchen_adventurer_lemon.jpg">

<img src="images/kitchen_adventurer_lemon.jpg" />

</li>

<li data-thumb="images/kitchen_adventurer_donut.jpg">

<img src="images/kitchen_adventurer_donut.jpg" />

</li>

<li data-thumb="images/kitchen_adventurer_caramel.jpg">

<img src="images/kitchen_adventurer_caramel.jpg" />

</li>

</ul>

</div>

</section>

<!-- jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- FlexSlider --><script defer src="js/jquery.flexslider.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('.flexslider').flexslider({

animation: "slide",

controlNav: "thumbnails"

});

});

</script>

</body>

</html>

[Nancy OShea]

Bootstrap comes with a responsive component called Carousel.

To get a glimpse of it, copy & paste the following code into a new, blank document, SAVE & preview in browser at various viewport widths. 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap with Carousel</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>

.navbar {margin-bottom:0}

footer {background: #222; color: #FFF; padding: 1%}

</style>

</head>

<body>

<!--begin top navbar-->

<nav class="navbar navbar-inverse navbar-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#"> BRAND or LOGO </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">MENU 1</a></li>

<li><a href="#">MENU 2</a></li>

<li><a href="#">MENU 3</a> </li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- 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/1500/400/nature/4/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1500/400/nature/3/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1500/400/nature/2/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1500/400/nature/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>

</div>

<!--end carousel-->

<!--being page content-->

<div class="container">

<div class="row">

<div class="col-sm-6">

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</div>

<div class="col-sm-6">

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</div>

<!--end row--></div>

<!--end container--></div>

<div class="container-fluid text-center">

<footer class="row">

<div class="col-sm-6">

Your Footer content

</div>

<div class="col-sm-6 text-center">

Your Footer content

</div>

</footer>

<!--end container-fluig--></div>

<!--Latest jQuery Core Library-->

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

</script>

<!--Bootstrap JS Library-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>

</html>

For more on Bootstrap, visit links below.

Alt-Web Design & Publishing: Customizing Bootstrap's Carousel

Bootstrap in Adobe Dreamweaver CC 2015 - Overview

https://helpx.adobe.com/dreamweaver/using/bootstrap.html

Bootstrap CC tutorials

https://helpx.adobe.com/dreamweaver/how-to/make-style-web-

Bootstrap Tutorials

http://www.w3schools.com/bootstrap/

Grid Overview

http://getbootstrap.com/examples/grid/

CSS Overview

http://getbootstrap.com/css/

Nancy O.