PDA

View Full Version : Jquery slide show


cocoonfx
05-28-2009, 08:18 PM
Hello

I have tried to get the Jquery scripts to work but with no luck. I am not too good with Java so any assistance would be appreciated.


<!-- SlideShow -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<style type="text/css">
<!--

.pics {
height: 150px;
width: 220px;
padding: 0;
margin: 0;
}

.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 220px;
height: 150px;
top: 0;
left: 0
}

a:link {
color: #E8E8E8;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
$('#s1').cycle('fade');
</script>
</head>

<body>
<div id="wrapper">
<div id="logo">

</div>
<div id="top"></div>
<div id="text">
<div id="inner">
<div id="image">
<div id="img1"><img src="images/image14.png" title="CTI" width="220" height="150"></div>
<div id="img2"><img src="images/image15.png" title="CTI" width="220" height="150"></div>
<div id="img3"><img src="images/image2.png" title="Structured Cabling" width="220" height="150"></div>
</div>
<div class="pics">
<img src="images/image1.png" width="220" height="150" />
<img src="images/image2.png" width="220" height="150" />
<img src="images/image3.png" width="220" height="150" />

</div>
</div>

cocoonfx
06-01-2009, 02:49 PM
Anyone?:confused:

domedia
06-01-2009, 10:22 PM
You have to read the instructions very carefully.
$('#s1').cycle('fade'); <- this refers to a div id s1 which you don't have.

cocoonfx
06-02-2009, 12:11 AM
ok i have changed the s4 to #pics and it still does not work. The actual site does not give any clues on how to get this to work. I am not sure why i can not work this out..... :confused:

cocoonfx
06-08-2009, 11:12 AM
anyone? still stucK

domedia
06-08-2009, 02:33 PM
Hiya Cocoon, can you post the code again?

cocoonfx
06-08-2009, 02:48 PM
<script type="text/javascript">
$('#pics').cycle('fade');
</script>

</head>

<body>
<div id="wrapper">
<div id="logo">

</div>
<div id="top"></div>
<div id="text">
<div id="inner">
<div id="pics">
<img src="images/image1.png" width="220" height="150" />
<img src="images/image2.png" width="220" height="150" />
<img src="images/image3.png" width="220" height="150" />

</div>
</div>
<div id="left">
<a href="index.html" class="nav1">
<div class="nav1"></div>
</a>
<a href="telephone.html" class="nav2"><div class="nav2"></div>
</a>
<a href="call.html" class="nav3"><div class="nav3"></div>
</a>
<a href="cti.html" class="nav4"><div class="nav4"></div>
</a>
<a href="training.html" class="nav5"><div class="nav5"></div>
</a>
<a href="service.html" class="nav6"><div class="nav6"></div>
</a>
<a href="structured.html" class="nav7"><div class="nav7"></div>
</a>
<a href="contracting.html" class="nav8"><div class="nav8"></div>
</a>
<a href="link.html" class="nav9"><div class="nav9"></div></a>
<a href="contact.html" class="nav10"><div class="nav10"></div>
</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>


<p>Also called computer-telephone integration or <strong>CTI</strong>, is technology that allows interactions on a telephone and a computer to be integrated or co-ordinated. As contact channels have expanded from voice to include email, web, and fax, the definition of CTI has expanded to include the integration of all customer contact channels (voice, email, web, fax, etc.) with computer systems.</p>
<p>CTI adds significant improvements to customer service and staff productivity as the user can see who is calling them before they answer and can be presented with data from the database/server directly on to the users terminal/display.</p>

<p>Dubcoms specialise in Xarios, New media software, Callview, Skillset Manager and Maxxcom</p>
<p>For more information on our services please took a look round our site.</p>


<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="footer">
<p>&copy;2009 Dubcoms | <a href="http://www.cocoonfxmedia.co.uk/contact.html">Site built by Cocoonfxmedia</a></p>
</div>



<div id="bottom"></div>

<div id="bottomlogo"></div>
<div class="separator"></div>

</div>

domedia
06-08-2009, 08:09 PM
Where's the link to the javascript?

cocoonfx
06-08-2009, 10:10 PM
<!-- SlideShow -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<style type="text/css">
<!--


I forgot to copy that part in.

ibionika
06-24-2009, 02:40 AM
Im a tad confused on how to do this still. I did however get a slide effect using jquery to work, but now only need to fill it with stuff from the database instead of just text i put in the html file. Is there a simple way to do this?

Thanks.

domedia
06-24-2009, 06:35 AM
<!-- SlideShow -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<style type="text/css">
<!--


I forgot to copy that part in.

So did that fix it?

cocoonfx
06-24-2009, 06:58 AM
I am being stupid i think.... I still very new to java.

I have posted my code how i have it in my test page. Have i placed this in correctly?

<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<link href="nav.css" rel="stylesheet" type="text/css" />
<style type="text/css">


#pics {
height: 150px;
width: 220px;
padding: 0;
margin: 0;
}

#pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 220px;
height: 150px;
top: 0;
left: 0
}

a:link {
color: #E8E8E8;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}

<!-- SlideShow -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<style type="text/css">
<!--
$('#pics').cycle('fade');
</script>
</style>

</head>