PDA

View Full Version : Fade-In Slideshow problem


teresamar2
11-15-2010, 05:40 AM
I use Dreamweaver cs4 and can't get my slideshow to work. There's just a blank space where it should be. Here's the code for the complete page, it's not online yet. All help is appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org (http://www.w3.org)"><!-- <hs:metatags> -->
<title>Timeless Treasures Gift Shop, unique gifts for all occasions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="At Timeless Treasures Gift Shop, you will find unique gifts for all occasions. Shop with us for that special gift and we guarantee you a pleasurable online shopping experience.">
<meta name="Keywords" content="gifts for baby, Elements Angels, figurines, Perfectly Paisley Angels, Chamilia jewelry, cloud B, home decor, shan mu wooden baskets, Comfort Candles, Isabella's Journey, handbags, totes, Marc Chantal, Women Of The Way Sculptures, ornaments, Jellycats">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com (http://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 type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [750, 450], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.ttcollectiblegifts.com/shanmu_bowls_cover.jpg", "", "http://www.ttcollectiblegifts.com/shanmu.html", ""],
["http://www.ttcollectiblegifts.com/cottage_garden_cover.jpg", "", "http://www.ttcollectiblegifts.com/cottagegarden.html", ""],
["http://www.ttcollectiblegifts.com/baby_gifts_cover.jpg"],
["", "http://www.ttcollectiblegifts.com/baby.html", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script><!--

<script type="text/javascript">
<!==
function reDo() {
top.location.reload();
}
if (navigator.appName == 'Netscape' && parseInt(navigator.appVersion) < 5) {
top.onresize = reDo;
}
dom=document.getElementById
//-->
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #BDD1D0; /*overall menu background color*/
font: helvetica, times roman, georgia;
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 100px; /*Width of top level menu link items*/
padding: 5px 0px;
border: 1px solid white;
text-align: center;
text-decoration: none;
color: #676767;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 100%; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
vertical-align: bottom;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
top: 0;
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 149px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 170px; /*width of sub menu levels*/
color: #676767;
text-decoration: none;
padding: 2px 5px;
border: 1px solid white;
}
.suckertreemenu ul li a:hover{
white space: nowrap;
overflow-x: hidden;
background-color: #BDD1D0;
color: #676767;
}
.suckertreemenu {
width:818px;
margin: 0px auto;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #BDD1D0 url() no-repeat center right;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #BDD1D0 url(arrow_right_black.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */
</style>
<style type="text/css">
body {
background-color: #FFFFFF;
}
:link { color: #696969 }
:visited { color: #696969 }
:active { color: #696969 }


div.c30 {
position: absolute;
top: 975px;
width: 700px;
height: 68px;
z-index: 20
height: 68px;
text-align: center;
color: #000;
left: 150px;
font-size: 12px;
}
div.c29 {position: absolute; top: 761px; left: 645px; width: 235px; height: 130px; z-index: 19;}
div.c28 {position: absolute; top: 761px; left: 385px; width: 235px; height: 130px; z-index: 18;}
div.c27 {position: absolute; top: 761px; left: 125px; width: 233px; height: 129px; z-index: 17;}
div.c26 {position: absolute; top: 608px; left: 645px; width: 235px; height: 130px; z-index: 16;}
div.c25 {position: absolute; top: 608px; left: 385px; width: 235px; height: 130px; z-index: 15;}
div.c24 {position: absolute; top: 608px; left: 125px; width: 235px; height: 131px; z-index: 14;}
div.c23 {
position: absolute;
top: 1059px;
left: 344px;
width: 316px;
height: 106px;
z-index: 13;
}
div.c22 {position: absolute; top: 981px; left: 100px; width: 800px; height: 48px; z-index: 12;}
span.c21 {color: #000000; font-family: Helvetica, Arial, sans-serif}
div.c20 {color: #000000; font-family: Helvetica, Arial, sans-serif; text-align: center}
div.c19 {text-align: center}
span.c18 {color: #999999; font-family: Helvetica, Arial, sans-serif}
div.c17 {position: absolute; top: 132px; left: 50px; width: 801px; height: 29px; z-index: 11;}
br.c16 {clear: left;}
div.c15 {position: absolute; top: 561px; left: 125px; width: 750px; height: 9px; z-index: 10;}
td.c14 {background-color: #4F6A98}
div.c13 {position: absolute; top: 87px; left: 661px; width: 129px; height: 40px; z-index: 9;}
div.c12 {position: absolute; top: 0px; left: 0px; width: 1000px; height: 117px; z-index: 8;}
div.c11 {position: absolute; top: 401px; left: 584px; width: 87px; height: 89px; z-index: 7;}
div.c10 {position: absolute; top: 307px; left: 757px; width: 118px; height: 45px; z-index: 6;}
div.c9 {color: #472300; font-size: 14px; text-align: center}
div.c8 {color: #9E0704; font-family: Helvetica, Arial, sans-serif; text-align: center}
div.c7 {position: absolute; top: 295px; left: 573px; width: 231px; height: 72px; z-index: 5;}
div.c6 {
color: #696969;
font-size: 12px;
height: 48px;
left: 718px;
position: absolute;
top: 223px;
width: 157px;
z-index: 4
}
div.c5 {position: absolute; top: 209px; left: 566px; width: 150px; height: 57px; z-index: 3;}
div.c4 {position: absolute; top: 510px; left: 125px; width: 484px; height: 32px; color: #666; z-index: 2;}
div.c3 {color: #555555; font-family: Helvetica, Arial, sans-serif}
div.c2 {color: #527C89; font-size: 14px; height: 48px; left: 678px; position: absolute; text-align: left; top: 422px; width: 197px; z-index: 1}
div.c1 {position: absolute; top: 204px; left: 128px; width: 436px; height: 300px; z-index: 0;}
</style>
</head>
<body onUnload="" onLoad="" id="element1">
<div class="c1" id="element198">
<div id="fadeshow1"></div>
</div>
<!-- </hs:element198> -->
<!-- <hs:element508> -->
<div class="size11 Helvetica11 c2" id="element508"><strong>discounts on Marc Chantal Handbags, Comfort To Go Candles, and much more!</strong><br></div>
<!-- </hs:element508> -->
<!-- <hs:element564> -->
<div class="c4" id="element564"><strong>Shop Timeless Treasures for new and unique gifts for all occasions. We promise you a pleasant shopping experience in our online gift shop.</strong><br></div>
<!-- </hs:element564> -->
<!-- <hs:element565> -->
<div class="c5" id="element565"><a target="_self" href="http://www.ttcollectiblegifts.com/elements.html">we (http://www.ttcollectiblegifts.com/elements.html) have the complete line of figurines and home decor</a></strong><br></div>
<!-- </hs:element567> -->
<!-- <hs:element570> -->
<div class="c7" id="element570"><a target="_self" href="http://ww6.aitsafe.com/cf/review.cfm?userid=88207224&amp;return=www.ttcollectibl egifts.com/index.html"><img (http://www.ttcollectiblegifts.com/marieosmond.html) alt="" src="../images/shopping_bag_icon_small.gif" height="40" width="129" border="0"></a></div>
<!-- </hs:element598> -->
<!-- <hs:element369> -->
<div class="c15" id="element369">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="c14" height="9" width="750"><img alt="" src="../images/blue%20divider%20750x9.gif" height="9" width="750"></td>
</tr>
</table>
</div>
<!-- </hs:element369> -->
<!-- <hs:element608> -->
<div class="c17" id="element608"><script type="text/javascript">
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="http://www.ttcollectiblegifts.com/babybeds.html">Cribs (http://www.ttcollectiblegifts.com/baby.html) 'n Cradles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babybags.html">Diaper (http://www.ttcollectiblegifts.com/cgchildren.html) Bags</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babykeepsakes.html">Keepsakes</a></li (http://www.ttcollectiblegifts.com/formom.html)>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">Plush</a (http://www.ttcollectiblegifts.com/babyornaments.html)>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/jellycat.html">Jellycat</a></li (http://www.ttcollectiblegifts.com/cloudb.html)>
<li><a href="http://www.ttcollectiblegifts.com/babybedding.html">Quilts/Blankets</a></li (http://www.ttcollectiblegifts.com/babyplush.html)>
<li><a href="http://www.ttcollectiblegifts.com/othergifts.html">Special (http://www.ttcollectiblegifts.com/silver.html) Gifts</a></li>
<li><a href="http://www.ttcollectiblegifts.com/candles.html">Candles</a (http://www.ttcollectiblegifts.com/wallart.html)>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/comforttogo.html">Comfort (http://www.ttcollectiblegifts.com/comfortcandles.html) To Go</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ccscripture.html">Scripture (http://www.ttcollectiblegifts.com/ccinspiration.html) Series</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/birchhearts.html">BirchHearts (http://www.ttcollectiblegifts.com/figurines.html) Snowmen</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements1.html">Angels</a></li (http://www.ttcollectiblegifts.com/elements.html)>
<li><a href="http://www.ttcollectiblegifts.com/elements5.html">Home (http://www.ttcollectiblegifts.com/elements4.html) Decor</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements7.html">Gift (http://www.ttcollectiblegifts.com/elements6.html) Sets</a></li>
<li><a href="http://www.ttcollectiblegifts.com/greatexpectations.html">Great (http://www.ttcollectiblegifts.com/elements10.html) Expectations</a></li>
<li><a href="http://www.ttcollectiblegifts.com/perfectlypaisley.html">Perfectly (http://www.ttcollectiblegifts.com/isabelbloom.html) Paisley</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/ppholiday.html">Holiday</a></li (http://www.ttcollectiblegifts.com/perfectlypaisley.html)>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Sculptures</a></li (http://www.ttcollectiblegifts.com/womenoftheway.html)>
<li><a href="http://www.ttcollectiblegifts.com/wotwornaments.html">Ornaments</a></li (http://www.ttcollectiblegifts.com/wotwmin.html)>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/marcchantal.html">Marc (http://www.ttcollectiblegifts.com/handbags.html) Chantal</a></li>
<li><a href="http://www.ttcollectiblegifts.com/homedecor.html">Home (http://www.ttcollectiblegifts.com/marieosmond.html) Decor</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a></li (http://www.ttcollectiblegifts.com/corinthian.html)>
<li><a href="http://www.ttcollectiblegifts.com/birchhearts.html">BirchHearts (http://www.ttcollectiblegifts.com/pavilion.html) Snowmen</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements1.html">Elements (http://www.ttcollectiblegifts.com/comfortcandles) Figurines/Accessories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/fragments.html">Fragments (http://www.ttcollectiblegifts.com/elements6.html) Mosaic Accessories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ppholiday.html">Perfectly (http://www.ttcollectiblegifts.com/perfectlypaisley.html) Paisley Holiday</a></li>
<li><a href="http://www.ttcollectiblegifts.com/welove.html">We (http://www.ttcollectiblegifts.com/simplystated) Love Birds/Accessories</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/inspirationalgifts.html">Inspirational</a (http://www.ttcollectiblegifts.com/shanmu.html)>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/cottagegarden.html">Cottage (http://www.ttcollectiblegifts.com/comfortcandles.html) Garden Music &amp; Jewelry Boxes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/isabelbloom.html">Isabel (http://www.ttcollectiblegifts.com/greatexpectations.html) Bloom Sculptures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Women (http://www.ttcollectiblegifts.com/pavilion.html) of the Way Sculptures</a></li>
</ul>
</li>
<li><a href="http://www.chamiliajewels.com">Chamilia</a></li (http://www.chamiliajewels.com)>
<li><a href="http://www.ttcollectiblegifts.com/corinthian.html">Windchimes</a (http://www.ttcollectiblegifts.com/cottagegarden.html)>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html"><img (http://www.ttcollectiblegifts.com/corinthian.html) alt="" src="../images/angels%20and%20figurines%20pic.jpg" height="131" width="235" border="0"></a></div>
<!-- </hs:element624> -->
<!-- <hs:element625> -->
<div class="c25" id="element625"><a target="_self" href="http://www.treasured-jewelry.com"><img (http://www.ttcollectiblegifts.com/homedecor.html) alt="" src="../images/jewelry_pic.jpg" height="130" width="235" border="0"></a></div>
<!-- </hs:element626> -->
<!-- <hs:element627> -->
<div class="c27" id="element627"><a target="_self" href="http://www.ttcollectiblegifts.com/handbags.html"><img (http://www.ttcollectiblegifts.com/candles.html) alt="" src="../images/handbags_pic.jpg" height="130" width="235" border="0"></a></div>
<!-- </hs:element628> -->
<!-- <hs:element629> -->
<div class="c29" id="element629"><a target="_self" href="http://www.ttcollectiblegifts.com/">Home&nbsp;&nbsp (http://www.ttcollectiblegifts.com/baby.html); |&nbsp; </a><a target="_self" href="http://www.ttcollectiblegifts.com/customerservice.html">Customer (http://www.ttcollectiblegifts.com/contact.html) Service&nbsp; |&nbsp; </a><a target="_self" href="http://www.ttcollectiblegifts.com/privacypolicy.html">Privacy (http://www.ttcollectiblegifts.com/newsletter.html) Policy&nbsp; |&nbsp; </a> <a target="_self" href="

Ricky55
11-15-2010, 02:38 PM
Wow!

That's an hell of a lot of messy code. Did you write that or did Dreamweaver spit it out? Terrible, thats tables in Div form. Why don't use something much cleaner like a simple jQuery slide show?

http://malsup.com/jquery/cycle/begin.html

What are all those divs for div.c22 for instance?

teresamar2
11-15-2010, 03:16 PM
As you can see, I'm new at this and have a lot to learn. I did validate the code though, and it passed, so I thought it was good, lol. I will try the jquery slide show. Thank you for your input. Any help or suggestions is greatly appreciated.

Ricky55
11-15-2010, 08:15 PM
Let me know if you need any help setting it up.

Validation is only a guide. Just because your code validates doesn't mean its semantic and well constructed.

The first thing you need to learn as a web designer is how to write good HTML. Look at your design and break it down into logical elements.

Also try to avoid using classes and ID's unless you really need them. Often times you can hook your CSS on to things because they are childs of other elements.

when writing your css think, can I target this element in a way without needing a class or ID.

teresamar2
11-15-2010, 11:23 PM
What else is there other than classes and apdiv's?

teresamar2
11-16-2010, 05:49 AM
Ok, I need some help with this slideshow. The 3 pics I want to use in the slideshow are all on the page. No fading in and out, just there. Any idea why? Here's the code.


<!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>
<title>slideshow</title>
<style type="text/css">
.slideshow {
width: 436px;
height: 300px;
margin: 0 auto;
}
</style>
<!-- include jQuery library -->

<script type="text/javascript" src="

domedia
11-16-2010, 02:20 PM
Link please

teresamar2
11-16-2010, 03:06 PM
<!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">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org (http://www.w3.org/)">
<title>slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.slideshow {
width: 436px;
height: 300px;
margin: 0 auto;
}
.slideshow img {
border: 1px solid #000;
width: 438px;
height: 302px;
top: 0;
left: 0
}
.slideshow img { display: none } //these lines hide all the rest of the pictures on startup
.slideshow img.first { display: block } //except the first image

</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script><!-- include Cycle plugin -->
<script type="text/javascript" src="../jquery.cycle.min.js">
</script><!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
<\/style>

</script>
</head>
<body>
<p> </p>
<div id="”slideshow”">i<img src="../images/cottage_garden_cover.jpg" width="434" height="298" alt="** PLEASE DESCRIBE THIS IMAGE **"> <img src="../images/shanmu_bowls_cover.jpg" width="436" height="300" alt="** PLEASE DESCRIBE THIS IMAGE **"> <img src="../images/baby_gifts_cover.jpg" width="436" height="300" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
</body>
</html>

domedia
11-16-2010, 07:01 PM
Look at the [div id="slideshow"] you got some extra quotation marks in there.

Ricky55
11-16-2010, 10:03 PM
Are you okay with this now mate?

teresamar2
11-17-2010, 01:00 AM
No Ricky, it's still not working. I removed the extra quotation marks. The 3 pics I want in the slideshow are just 3 pics on a page. Here's the code again. I hope you can help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.slideshow {
width: 436px;
height: 300px;
margin: 0 auto;
}
.slideshow img {
border: 1px solid #000;
width: 438px;
height: 302px;
top: 0;
left: 0
}
.slideshow img { display: none } //these lines hide all the rest of the pictures on startup
.slideshow img.first { display: block } //except the first image

</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js">
</script><!-- include Cycle plugin -->
<script type="text/javascript" src="../jquery.cycle.min.js">
</script><!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
<\/style>

</script>
</head>
<body>
<p> </p>
<div id="slideshow">i<img src="images/cottage_garden_cover.jpg" width="434" height="298" alt="
"> <img src="images/shanmu_bowls_cover.jpg" width="436" height="300"><img src="images/baby_gifts_cover.jpg" width="436" height="300"></div>
</body>
</html>

gentleone
11-17-2010, 06:02 AM
In you jQuery function you say .slideshow but it should be #slideshow. Your slideshow div has an ID (#) not a class (.).

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
<\/style>

Ricky55
11-17-2010, 01:13 PM
Sorry mate only just seen this, is it working for you now? I'll check back later been a bit busy this morning.

Just watch when you're typing in your code.

gentleone
11-17-2010, 01:55 PM
Indeed... Ricky55 is right... watch when you type or paste... I see another error. There is a closing style type (or what it should be... even that is wrong) in your javascript script call.

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
<\/style>

</script>
Okay... here is the modified version how it should be working:

<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

Ricky55
11-17-2010, 10:48 PM
teresamar2 if this still isn't working let me know, I have to do one of this slide shows for a client tomorrow morning.

I'll check back here before I do it, if you still can't get this working I'll do a video tutorial for you while I do it and post it to vimeo for everyone to see.

Cheers

teresamar2
11-18-2010, 01:36 AM
I finally got it to work. I scratched the code I sent here and went by the slideshow example page. Works perfect!! A video tutorial would be nice if you have time for anyone else having problems. I've viewed and played with several jquery slideshows, and couldn't get any of them to work. I found errors myself, and I think some were missing some of the code. Thank you for all your help.

What do you think about a jquery horizontal menu? That may be my next project. What menu do you recommend?

Ricky55
11-18-2010, 10:15 PM
Nice one!

Not sure what you mean by a jQuery Horizontal menu. Start a new post mate if you want to know more.