Overlay Text or Image on top of panel

[philipjacobs]

I would like to overlay and image and some text over the image that shows up in the panel. I borrowed code from another project I'm working on but having difficulties making this work. Here's an example of what I would like to do. http://livedemo00.template-help.com/wt_38428/index.html The three boxes with the specials is what I would like to have scrolling on this page. I'm not sure how to show code here so I'll just copy and paste what I currently have. HTML

<div id="wrapper">
  <ul id="slider">
   <div class="price">from
     <div class="red_font">$589<sup>.99</sup></div>
   </div>
   </li>
     <img src="../../RV-Rental-2000-Georgie-Boy-Pursuit-Turnbull/thumbnails/Georgie-Boy-Pursuit-IMG_3148.jpg" alt="picture">
     <h2>2000 Georgie Boy - Pursuit</h2>
     <p>Add a short exerpt here... ahref="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
   </li>
   </div>
  </ul>

CSS

.red_font{
    color:#B52007;
    font-weight: bold;
    font-size: 16px;
}
.price{
    position:absolute;
    right:1137px;
    bottom:49px;
    width:85px;
    height:58px;
    background:url(../images/price.png) no-repeat;
    font-size: 14px;
    color:#fff;
    text-align:right;
    padding-top: 20px;
    padding-right: 5px;
    padding-bottom: 10;
    padding-left: 0;
    vertical-align: bottom;
    z-index: 2;
}

JS

$(function(){
  $('#slider').movingBoxes({
    /* width and panelWidth options deprecated, but still work to keep the plugin backwards compatible
    width: 500,*/
    panelWidth   : 0.21,
    fixedHeight  : true,
    startPanel   : 1,      // start with this panel
    wrap         : true,  // if true, the panel will infinitely loop
    buildNav     : false,   // if true, navigation links will be added
    reducedSize  : 1,
    navFormatter : function(){ return "●"; } // function which returns the navigation text for each panel
  });
});

[Mottie]

The HTML above has some issues, but it looks okay on the demo page you sent me.

I took that HTML and made this demo for you. I'm not sure what issue the price was having, I initially set a z-index of 10 thinking it was an issue, but even after removing that extra css, the price remained on top of the image.

The extra css in that demo is needed to override the default MovingBoxes styling.

[philipjacobs]

I have a question about the JS. what is the difference between $('#slider').movingBoxes and what you put $('.directions').movingBoxes ? Is that just a class definition?

[Mottie]

Yeah, the only difference is the first one is using an ID selector and the second is using the class selector. I was trying to use the HTML you had on your site, so that's why the div had that class name.

[philipjacobs]

I actually have a better question. How much could I pay you to make this work for me?

[Mottie]

I think I've already got everything working for you in that demo. All you need to do is copy the javascript and extra css.

[philipjacobs]

i did, but it doesn't look right when i plug it into my page. I'll upload the actual site that I'm working on for now and you can look at the script in your browser. When I put the moving boxes script in, it cancels out another script in the html. Plus should I include the css you wrote in the movingboxes.css or the srcipt.css? http://www.hightenedpath.com/temp/38428/site/index.html Here's with the added stuff you posted. http://www.hightenedpath.com/temp/38428/site/test.html

Im just not sure whats going on. Not to mention there is overlapping css in both regards.

[Mottie]

I think the main problem is that the .directions block is positioned absolutely. If you can position it without using position, maybe just a top margin or something, then initialize MovingBoxes on it, it should look a lot better.

[philipjacobs]

So, i've tried everything to get it to work. But to no avail. Below is a link without the slider. http://www.hightenedpath.com/temp/38428/site/index.html i adjusted the positioning on the div. so if you can show me exactly where and what I need to add code to in order to make it work, I would appreciate it! Like I said, I'd be more than willing to pay you for this. also, I noticed that one of the css on that page (tms.css) has a slider attribtue. I kind of wonder if that is throwing things off.