Adding a div layer on top of a jquery carousel. Tough one.
- by wilwaldon
Hey everyone,
I have a tough one, well it's tough for me because I'm kinda new to the whole jQuery carousel thing, never built one before this project.
Here's my problem.
If you go to the TEST SITE you will see a scroller with a blue background about half way down the page. If you mouse onto the "data analytics" slide you should see a black box fade in.
Here is my dilemma. I want that black box to be a menu that's connected to the data analytics slide. I've done a mock up for you so you can see what I'm talking about.
Here is my scroller code. I'm using jCarousel.
<div class="carousel">
<ul>
<li>
<div id="homeslide1">
testers sdfasdfasdfas asdftjhs iasndkad kasdnf
<a href="#" id="#homeslide1-toggle">Close this</a> </div>
<a href="#" id="homeslide1-show"><img src="<?php bloginfo('template_url'); ?>/images/home_data_analytics.jpg" width="200" height="94" /></a>
</li>
<li><img src="<?php bloginfo('template_url'); ?>/images/home_oem_partnerships.jpg" width="200" height="94" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/home_reporting.jpg" width="200" height="92" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/home_returning_lost_customers.jpg" width="200" height="92" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/home_sales.jpg" width="200" height="92" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/home_service_retention.jpg" width="200" height="92" /></li>
</ul>
Here is my scroller css
/*HOMEPAGE SCROLLER*/
.carousel {!important padding:10px; width: 890px; margin: 0px 0px 0px 26px;}
.carousel ul li element.style{height: 94px;}
.carousel ul{width: 200px; padding: 5px;}
.carouselitem{height: 94px;}
.prev{background: url(images/home_left_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: left;}
.next{background: url(images/home_right_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: right;}
.carousel ul li{ padding: 0px 3px 0px 3px; margin: 0px; height:!important 94px;
}
.home_right_arrow{
width: 16px;
float: right;}
.home_left_arrow{
width: 16px;
float: left;}
.homeslide1{
width: 200px;
height: 94px;}
I've tried all sorts of z-index tricks but can't seem to figure it out on my own. If you solve this riddle I'll buy you a beer if we ever meet up. I'll also give you a high five through the internet.
Is there a simple way to do this via jQuery? If so could you point me in the right direction?
Thanks so much.
