• Locked
1 reply [Last post]
Sat, 2012-05-19 18:07
Tampa Jim
Offline
newbie
Last seen: 7 years 45 weeks ago
Timezone: GMT-4
Joined: 2012-05-19
Posts: 1
Points: 2

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.

Smile 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>

----------------------------------
Smile CSS (I also have this code in a .css file to use:

.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

Top
Tags:
Tue, 2012-05-22 00:13
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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>

Top
  • Locked