Log in

View Full Version : Help on slideshow activation in css5


sonkify
10-28-2014, 03:47 PM
1) Script Title: Full Page Image slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fullpageslideshow/index.htm

3) Describe problem:

Hi professional designers, Please, I need your help. I came across a slideshow on DD that suits my purpose. I followed instructions on how to install but can't get it to work. I am trying to put toggether my very first website.

The content area of the website is split into two sides: the left content area's width is 190px and the right side, 1166px where the slideshow will be displayed. What exactly do I have to do to make it work?

Thanks very much.

Sonkify.
Beverleyh
10-28-2014, 04:44 PM
The short answer - to make it work, you follow the instructions on the demo page.

I you can't get it to work, we need to see what you're doing, or not doing, and the best way to do that is for you to provide a link to the problematic page. We can't offer help without it.
sonkify
10-31-2014, 11:11 AM
Hi Beverleyh,

I am sending this update just in-case you didn't see my last reply where I posted my link. I have been able to make the image to appear but not been able to make slideshow to work. What do you think I have missed out? My link is ...REMOVED FOR SAFETY

Thank you in advance.

Sony.
Beverleyh
10-31-2014, 03:23 PM
Looking at the code in the <head> of the web page, there are a few rogue </script> tags that need to be removed.

You also have your ftp details showing where "url" should be in the playlist - please remove them from your page ASAP or you could get your server hijacked. You are also mixing the syntax for an external playlist file and an internally embedded playlist;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<link rel="stylesheet" type="text/css" href="smooth_slider.css">

<style>

.slideshowwrapper{ /* dimensions of outermost slideshow container */
width: 1140px;
height: 600px;
position: relative;
overflow: hidden;
float: right;
margin-left: 10px;
}

</style>

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

/***********************************************
* Full Page Slideshow- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

</script>
<script>
$(function() {
$('#resume').on('click', function(){ // set up resume button behavior
$("#pan_area").smoothslider("resume") // resume playing of this slideshow. Pass in "pause" to pause it instead
$(this).hide() // hide resume button
})
$("#pan_area").smoothslider("install", {
"xxxxx remove FTP details/playlist.json":

{ "playlist": [

{
"url":
"img/img0.jpg",
"caption": "A bird perching on a twig"
},
{
"url": "img/img1.jpg",
"caption": "A cheetah"
},
{
"url": "img/img2.jpg",
"caption": "A sand cat kitten"
},
{
"url": "img/img3.jpg",
"caption": "Now some tigers"
}
],

"hold_time":5,
"loops":2,
"transition_time":1
}", // get the playlist and some config from the server

// this function gets called whenever there's an image change
"on_image_change":function(caption, image_url) {
var area= $("#img_msg_area").find("span");
area.animate({"opacity": 0}, 500, "swing", function() {
area.text(caption);
area.animate({"opacity": 1}, 500); // fade in & out take 500ms each
});
},
"loops": 2, // number of loops before stopping. Remove thisoption to run continuously
"throbber":$("#throbber"), // an image to show when waiting for images to load
on_pause:function(){
$('#resume').show()
}

});
});

</script>

</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sony Akpotor Fine Art, Original Oil Figurative Paintings, Abstract, Portraits, Prints &amp; Commissions</title>

<link href="-css/sony-akpotor-fine-art-css.css" rel="stylesheet" type="text/css" />


</head>For clarification, please refer to the source code of demo3 http://www.dynamicdrive.com/dynamicindex14/fullpageslideshow/demo3.htm which makes use of the playlist[] option to define the images, instead of the playlist_url option.
sonkify
11-01-2014, 10:10 AM
Thanks so much Beverleyh. I didn't know what I was doing and the implication of it. I have taken out the ftp details with the hope that it is not already too late.

You talked about rogue </script> tags that need to be removed. Are they the ones in RED in the code you sent me above?

Thanks once again. I am very grateful for your support. I am going to check demo 3 out now and try again.

Kind Regards,

Sony
Beverleyh
11-01-2014, 06:34 PM
That's right - remove the </script> tags in red and address the other indicated parts. It may not be the ultimate solution but it's a start. The demo 3 page should be your main guide for now.