bunglebrown
New Member
- Messages
- 157
- Reaction score
- 0
- Points
- 0
Ok this is something I found that I think can help me with changing content. Does anyone know how I could change the menu bar at the bottom to images rather than to just "Page 1", etc so that the image fits there nicely?
slider.html
contentslider[1].css
slider.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" lang="en" xml:lang="en">
<link rel="stylesheet" type="text/css" href="contentslider[1].css" />
<script type="text/javascript" src="contentslider[1].js">
/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library ([URL="http://www.dynamicdrive.com/"]www.dynamicdrive.com[/URL])
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [URL]http://www.dynamicdrive.com/[/URL] for this script and 100s more
***********************************************/
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h2>Example 1</h2>
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>
<div class="contentdiv">
Content 2 Here.
</div>
<div class="contentdiv">
Content 3 Here.
</div>
</div>
<div id="paginate-slider1" class="pagination">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
<br />
<h2>Example 2, Pagination links from markup</h2>
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
<div id="slider2" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here.
</div>
<div class="contentdiv">
Content 2 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>
<div class="contentdiv">
Content 3 Here.
</div>
</div>
<div id="paginate-slider2" class="pagination">
<a href="http://forums.x10hosting.com/programming-help/#" class="toc">First Page</a> <a href="http://forums.x10hosting.com/programming-help/#" class="toc anotherclass">Second Page</a> <a href="http://forums.x10hosting.com/programming-help/#" class="toc">Third Page</a> <a href="http://forums.x10hosting.com/programming-help/#" class="prev" style="margin-left: 10px"><</a> <a href="http://forums.x10hosting.com/programming-help/#" class="next">></a>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</body>
</html>contentslider[1].css
Code:
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #00007D;
background: white;
}
.pagination a:hover{
color: #000;
background-color: #FEE496;
}
.pagination a.selected{
color: #000;
background-color: #FEE496;
}
Last edited: