logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-25-2011, 06:11 PM   #1
Golden Child
 
Join Date: May 2011
Posts: 45
Default Problem loading navigation buttons in jquery slideshow

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.
Golden Child is offline   Reply With Quote
Old 05-25-2011, 06:40 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

didn't you download the light-demo version? In that the next and previous buttons are set to 'false' thus not showing.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-25-2011, 06:48 PM   #3
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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?
Golden Child is offline   Reply With Quote
Old 05-25-2011, 06:56 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Do you still see this on your page?
HTML Code:
<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.
__________________
www.gentlemedia.nl

Last edited by gentleone; 05-25-2011 at 06:59 PM.. Reason: notice for moving
gentleone is offline   Reply With Quote
Old 05-25-2011, 07:06 PM   #5
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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?
Golden Child is offline   Reply With Quote
Old 05-25-2011, 07:10 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Can you post your HTML too? I'm curious what you have more in between the <head>
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-25-2011, 07:13 PM   #7
Golden Child
 
Join Date: May 2011
Posts: 45
Default

Okay. Here's the html:

Quote:
<!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>
Golden Child is offline   Reply With Quote
Old 05-25-2011, 07:24 PM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
Code:
#slideshowWrapper{position:relative;width:646px;margin: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;background:url(images/arrows.png) no-repeat;width:67px;height:143px;text-indent:-999999px;}
#fssPlayPause{position:absolute;top:435px;right:20px;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;}
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-25-2011, 07:35 PM   #9
Golden Child
 
Join Date: May 2011
Posts: 45
Default

Now that I have applied the CSS to the <div id="slideshow">, the slideshow stopped working. What could be the problem now?
Golden Child is offline   Reply With Quote
Old 05-25-2011, 07:53 PM   #10
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by Golden Child View Post
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
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:57 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com