Question

Hi i am currently making a demo site from just pure html/css/javascript usually i would be using ruby and just rendering partials to solve this issue but to get some practice with javascript i though this might be an interesting challenge, and it has been! so what i have made is a block of code that has an image that is word wrapped with text. and i have positioned buttons either side of the block of content. my objective is to have those buttons hide until mouse over and onclick the content with the image will rotate to a a different image and description. and those blocks of collections will be grouped into tabs. for for instance on the home tab there will be four collections of content i could rotate through them, then the next tab would be products and if i clicked on that tab there would be three collections of content one for each product, and each would contain an image and a description..

cool so what i have so far is this here is my html:

 <div class='content'>
   <div class='box'>
    <ul id="navigation">
        <li class="two"><a href="#">Home</a></li>
        <li class="three selected"><a href="#">Products</a></li>
        <li class="four"><a href="#">Technology</a></li>
        <li class="five"><a href="#">Cosulting</a></li>
        <li class="six"><a href="#">Contact</a></li>
    </ul>

    <div id="sub_content">
      <div class='title'> 
        <h3> Home </h3>
    </div>
    <div class="clear"></div>
    <div class="arrow">
       <a id="left" href=""><img src="/home/***/HTML/launch_pad/images/lefta.png">/a>
       <a id="right" href=""><img src="/home/***/HTML/launch_pad/images/righta.png"></a>
    </div>
    <div class="clear"></div>
    <div id="wall">
      <div class="hide">

        <div class="description">
          <img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic">
       <h2>Who are we?</h2>
       <p>a super hero organization fighting evil all day long!! .</p>
     </div>

     #the description class is then repeated each with a unique image and new info in the  <h2> tags and the <p> tags..

i have found several things that i have found online that have been helpful but i have conflicting javascript lib errors. so i am using the so that i can use the easing 1.3 library and for the twitter widdget i am using.

my css looks like this:

 .content {
   margin-left: 5%;
   margin-right: 5%;
   width: 1400px;
 }

 .box {
   float: left;
   width: 950px;
   margin-left: 20px;
   position: relative; 
 }


 #sub_content {
   background-color: white;
   width: 720px;
   max-height: 462px;
   min-width:600px;
   margin: 0px 0px 0px 40px; 
   padding: 15px;
   border: solid 1px black;
   border-radius: 8px 8px 8px 8px;
   overflow-y: auto;
 }

 .title {
   text-align: right;
   text-transform: uppercase;
   border: 1px solid yellow;
   margin: 0px 25px 5px 25px;
   padding: 5px; 
  }

 #wall {
   min-width: 300px;
   margin:0px 0px 15px 15px;
   width:655px;
   border: 1px solid red;
   float: left;
   padding: 5px;
  }

 .description {
   margin: 0px 0px 10px 10px;
   padding: 5px;
   width: 630px;
   border:1px solid green;
   float: left;
  }

 #decription p {
   word-wrap: break-word;
 }

  #demoimg {
   float: left;
   margin: 16px 8px 0px 0px;
   height: 200px;
   width: 200px;

 }

EDIT:
this is the javaScript i was trying:

<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'description',
duration: 1500,
buttons: {next:'right',prev:'left'},
transition: Fx.Transitions.Quint.easeOut
}
var scroller = new QScroller('content',opt);
scroller.load();
});
//-->
</script>  

but this doesnt seem to work i have a file with all my javascript in my directory that i link to..

the one that has come really close is at http://www.latenight-coding.com/mootools/classes/qscroller.html under Horizontal scroller with text and images. but it doesnt work!! which makes me pull out my hair. is there another way to just loop through the description and hide the ones that arnt selected??

any help or a better reference’s would be much appreciated 😀

Answer 1

You might consider using Jquery Cycle. It is an OUTSTANDING plugin that uses easing, and will allow you to have both a description of your content and prev/next buttons or links. You can also have multiple slideshows on one page, and it is probably not a hair-puller to have a link to one slideshow open up several, as this seems to be what you are looking for.

It works pretty easily out of the box and is highly customizable. The website has a ton of examples with code.