Hey guys,
I work for this big company and have been tasked to create a content slider. I have all this wonderful code and my problem I can't figure out where the code goes!
If somebody could help with some troublshooting or steps, it would be greatly apperciated.
HTML:
<div id="slideshow" class="slider"> <div> <img class="fl" title="My NetWork" src='http://.../images/contentslider/ContentImage_90x90_01.jpg' /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae molestie augue. Proin consequat mauris ut tortor luctus at facilisis mi venenatis. Etiam sem nisi, pulvinar et eleifend a, venenatis nec eros. Aliquam dapibus auctor sodales. Cras ac felis et nibh porttitor</p> </div> <div> <img class="fl" title="Wireline Intranet Website" src='http://.../images/contentslider/ContentImage_90x90_02.jpg' /> <p> Nunc velit nibh, elementum at sodales non, condimentum ut dui. Etiam fermentum purus eu quam blandit faucibus. Integer et ultricies massa. Etiam ac felis diam. Mauris consequat augue vitae magna facilisis ac cursus leo hendrerit. Vestibulum facilisis dignissim turpis eu ornare. </p> </div> <div> <img class="fl" title="EHP Intranet Website" src='http://.../images/contentslider/ContentImage_90x90_03.jpg' /> <p> Donec id sapien vel lacus congue malesuada. Vivamus ac felis enim, vitae pharetra massa. Vestibulum consequat bibendum enim, a suscipit risus auctor nec. Vivamus mollis, nisl a luctus gravida, velit diam dapibus velit, nec vehicula metus erat ut lectus. Cras pulvinar libero</p> </div> <div> <img class="fl" title="My NetWork" src='http://.../images/contentslider/ContentImage_90x90_04.jpg' /> <p>Integer convallis, massa vel pulvinar dictum, urna lorem egestas massa, ac dapibus est ipsum vitae felis. Vivamus non aliquet elit. Sed tempus congue dignissim. Quisque aliquet enim et massa congue id facilisis ante ornare. Donec commodo nisi at erat ornare eu interdum diam ultrices.</p> </div> <div> <img class="fl" title="Wireline Intranet Website" src='http://.../images/contentslider/ContentImage_90x90_03.jpg' /> <p>Nulla facilisi. Phasellus lacus erat, ultricies vitae suscipit id, ornare non mi. Morbi quis magna dolor, a consectetur enim. Aliquam porta sapien vitae dui viverra id molestie neque ullamcorper. Donec vel purus massa, sed viverra dui. Sed euismod ipsum vulputate dui auctor interdum. </p> </div> </div>
----------------------------------

.slider span.paging,.slider span.paging a { display:block;} .slider span.paging a{ float:left !important;} .slider .paging{ background:url(../../images/contentslider/pbar_fpo.gif) no-repeat;height:12px; padding:7px 0px 0px 10px !important; position:relative; left:133px; } .slider .paging a{ background:url(../../images/contentslider/pagination_dot.gif) no-repeat; text-indent:-1000px !important; overflow:hidden; width:8px !important; height:8px !important; padding-right:7px;} .slider .paging a:hover{ background:url(../../images/contentslider/pagination_dot_hover.gif) no-repeat;} .slider .paging a.active{background:url(../../images/contentslider/pagination_dot_selected.gif) no-repeat; } .slider span.paging span{ display:none !important;} .slider a.prev,.slider a.pause,.slider a.next,.slider a.play{ position:relative; left:314px;} .maincolumn .content_intro .slides p{ line-height:20px; font-size:12px; } .slider a.prev { background:url(../../images/contentslider/pbar_arw_left.gif) no-repeat; width:28px;} .slider a.prev:hover{background:url(../../images/contentslider/pbar_arw_left.gif) no-repeat; } .slider a.next{background:url(../../images/contentslider/pbar_arw_right.gif) no-repeat; } .slider a.next:hover{background:url(../../images/contentslider/pbar_arw_right.gif) no-repeat; } .slider .slides{ margin-bottom:0px !important;} .slider .slides a{ outline:none;} .slides:first-child{background:#f2f2f2;} .maincolumn .content_intro .code_sample_slider{width:400px; margin:10px 10px 20px 0px; float:left;} .slider a{cursor: pointer;float: left;height: 23px; text-indent: -2000px; width: 29px;} .slider a.pause{background: url("../../images/contentslider/pagination_pause.gif") no-repeat scroll 0 0 transparent;} .slider span.paging{float:left;margin-left:10px;} .slider a.play {background: url("../../images/contentslider/pagination_play.gif") no-repeat scroll 0 0 transparent;}
-----------------------------------------
JAVASCRIPT
For this I have 2 files:
jquery-1.4.4.min.js
slideshow.js
-----------------------------------------
Images:
I have all my images for the slider.
I'm lost at where to put the HTML, CSS, and .JS files or .JS code? Thanks for your help.
Tampa Jim
Hi Tampa Jim, The question
Hi Tampa Jim,
The question you ask is a bit like asking how long is a piece of string.
We don't know where you want the slider, or the current structure of your site/page.
What you need to do is add the html to your html file.
Then link to the stylesheet and JavaScript files:
<head> <link type="text/css" rel="stylesheet" href="mystylesheet.css" /> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="slideshow.js"></script> </head>