PDA

View Full Version : Problem loading navigation buttons in jquery slideshow


Golden Child
05-25-2011, 06:11 PM
Hello,

I successfully implemented a new simple jquery fade slideshow into a site I'm currently building for a client today. The link to the specific version of the slideshow I implemented is here:

http://www.simplefadeslideshow.com/

The functionality of the jquery slideshow works fine in all browsers. However, the navigation buttons on either side of the slides and the "play" button in the right hand corner of the slide that are seen in the demo do not show up on my slideshow. All of the arrow navigation buttons do exist in the downloaded slideshow application folder. I looked at the original javascript file and I was unable to find an image path in that file. What do I need to do to get the navigation buttons to appear on my slideshow? I can upload the original slideshow javascript file in necessary.

Thanks.

gentleone
05-25-2011, 06:40 PM
didn't you download the light-demo version? In that the next and previous buttons are set to 'false' thus not showing.

Golden Child
05-25-2011, 06:48 PM
Point taken. Now that I have downloaded the full version and put the javascript into my HTML, the slideshow still works, but the buttons are still not showing. What could be the problem?

gentleone
05-25-2011, 06:56 PM
Do you still see this on your page?

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow({
PlayPauseElement: false,
NextElement: false,
PrevElement: false,
ListElement: false
});
});
</script>

By the way I'm going to move this thread to the JavaScript board.

Golden Child
05-25-2011, 07:06 PM
When the slideshow plays, it has a simplified text navigation underneath the slide images instead of the graphic buttons seen on the demo version on the site. The demo version implemented on my computer only shows the functionality of the slideshow without any type of scroll thru navigation whatsoever. This is what is says on my version of the downloaded fadeSlideShow.js:


jQuery.fn.fadeSlideShow = function(options) {
return this.each(function(){
settings = jQuery.extend({
width: 640, // default width of the slideshow
height: 480, // default height of the slideshow
speed: 'slow', // default animation transition speed
interval: 3000, // default interval between image change
PlayPauseElement: 'fssPlayPause', // default css id for the play / pause element
PlayText: 'Play', // default play text
PauseText: 'Pause', // default pause text
NextElement: 'fssNext', // default id for next button
NextElementText: 'Next >', // default text for next button
PrevElement: 'fssPrev', // default id for prev button
PrevElementText: '< Prev', // default text for prev button
ListElement: 'fssList', // default id for image / content controll list
ListLi: 'fssLi', // default class for li's in the image / content controll
ListLiActive: 'fssActive', // default class for active state in the controll list
addListToId: false, // add the controll list to special id in your code - default false
allowKeyboardCtrl: true, // allow keyboard controlls left / right / space
autoplay: true // autoplay the slideshow
}, options);

How do I fix this?

gentleone
05-25-2011, 07:10 PM
Can you post your HTML too? I'm curious what you have more in between the <head>

Golden Child
05-25-2011, 07:13 PM
Okay. Here's the html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../Downloads/simpleFadeSlideShow_200/jquery.js"></script>
<script type="text/javascript" src="../Downloads/simpleFadeSlideShow_200/fadeSlideShow.js"></script>
</head>

<body>
<div id="slideshow">
<img src="../Downloads/Harvest Conference.jpg" width="500" height="400"/>
<img src="../Downloads/Manifest Glory Service.jpg" width="500" height="400"/>
<img src="../Downloads/Miracle Wave Service.jpg" width="500" height="400"/>
</div>
<script>
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow({
width: 500,
height: 400
});
});
</script>

</body>
</html>

gentleone
05-25-2011, 07:24 PM
Okay I see... where's the CSS file? There is some CSS to style the slideshow.
This I took out of the stylesheet from the demo which you need too.

#slideshowWrapper{position:relative;width:646px;ma rgin:auto;}
#fssPrev{position:absolute;top:169px;left:-67px;background:url(images/arrows.png) -67px 0px;width:67px;height:143px;text-indent:-999999px;}
#fssNext{position:absolute;top:169px;left:646px;ba ckground:url(images/arrows.png) no-repeat;width:67px;height:143px;text-indent:-999999px;}
#fssPlayPause{position:absolute;top:435px;right:20 px;background:url(images/white.png) repeat;padding:4px 0 5px 0;-moz-border-radius:5px;border-radius:5px;width:60px;text-align:center;display:block;color:#333;text-decoration:none;}

ul#slideshow{list-style:none;border:1px solid #999;padding:2px;margin:auto;margin-top:5%;width:640px;height:480px;overflow:hidden;}

#fssList{list-style:none;width:646px;margin:auto;padding:5px 0 0 45%;}
#fssList li{display:inline;padding-right:10px;}
#fssList li a{color:#999;text-decoration:none;}
#fssList li.fssActive a{font-weight:bold;color:#333;}

Golden Child
05-25-2011, 07:35 PM
Now that I have applied the CSS to the <div id="slideshow">, the slideshow stopped working. What could be the problem now?

domedia
05-25-2011, 07:53 PM
Now that I have applied the CSS to the <div id="slideshow">, the slideshow stopped working. What could be the problem now?

You broke it.
Give us a link, or post your code for us to have an idea of why 8)

Golden Child
05-25-2011, 08:10 PM
Okay. I fixed the slideshow so the functionality part is working again. However, even with the implemented CSS file working, the graphic image arrows are still not showing up on the slideshow. Do I need to define a path from the location of the "arrows.png" image file in the original downloaded folder on my computer to my page? I noticed that there is no specific url destination for the arrows in the CSS file. Look here on the CSS. I bolded and outlined the arrow.png image files in the color red:

#slideshowWrapper{position:relative;width:646px;ma rgin:auto;}
#fssPrev{position:absolute;top:169px;left:-67px;background:url(images/arrows.png) -67px 0px;width:67px;height:143px;text-indent:-999999px;}
#fssNext{position:absolute;top:169px;left:646px;ba ckground:url(images/arrows.png) no-repeat;width:67px;height:143px;text-indent:-999999px;}
#fssPlayPause{position:absolute;top:435px;right:20 px;background:url(images/white.png) repeat;padding:4px 0 5px 0;-moz-border-radius:5px;border-radius:5px;width:60px;text-align:center;display:block;color:#333;text-decoration:none;}

ul#slideshow{list-style:none;border:1px solid #999;padding:2px;margin:auto;margin-top:5%;width:640px;height:480px;overflow:hidden;}

#fssList{list-style:none;width:646px;margin:auto;padding:5px 0 0 45%;}
#fssList li{display:inline;padding-right:10px;}
#fssList li a{color:#999;text-decoration:none;}
#fssList li.fssActive a{font-weight:bold;color:#333;}

domedia
05-25-2011, 08:26 PM
The path to the images needs to be relative to the location of your CSS file.

Golden Child
05-25-2011, 08:32 PM
Okay. Now everything is working. Thanks!

mangofreak
05-25-2011, 09:20 PM
I couldn't avoid a laugh when Domedia said to GoldenChild:

You broke it.

That was priceless. Too bad this is not a comic. :D