javascript - Adding text below the images in this JS slider -


i having trouble figuring out how add text underneath images in slider, it's functionality super simple, having trouble , thinking may have re write it, here html , js:

<div id="look-book-scroll">   <a href="javascript:;" id="lookbook-left-advance"></a>   <div id="lookbook-wrapper">     <div class="lookbook-image">       <%= image_tag(asset_path("img/page1.jpg")) %>        <div class="lookbook-bl">         <p>hi gus!</p>       </div>     </div>      <div class="lookbook-image">       <%= image_tag(asset_path("img/page2.jpg") ) %>     </div>      <div class="lookbook-image">       <%= image_tag(asset_path("img/page3.jpg")) %>     </div>    </div>   <a href="javascript:;" id="lookbook-right-advance"></a> </div> 

js:

 // lookbook right click $("#lookbook-right-advance").click(function(){     if(lookbook_image_scrolling == false){         lookbook_image_scrolling = true;         if(parseint($("#lookbook-wrapper .lookbook-image:first").css('left')) == -890){             $("#lookbook-wrapper .lookbook-image:first").remove().insertafter("#lookbook-wrapper .lookbook-image:last");             $("#lookbook-wrapper .lookbook-image:last").css('left', ((lookbook_image_num - 1) * 890)+'px');         }         $("#lookbook-wrapper .lookbook-image").each(function(){             $(this).animate({                 left: '-=890px'             }, 1000, function(){                 lookbook_image_scrolling = false;             });         });     } });     

also, thought id add css, may issue:

#lookbook-wrapper{ position: relative; height: 590px; width: 830px; overflow: hidden; img {     width: 100%;     height: 100%; } }  #lookbook-wrapper .lookbook-image {     position:absolute;     top: 0;     z-index: 1;     width: 830px; }  #lookbook-wrapper .lookbook-image:first-of-type {     z-index: 2; }  #lookbook-left-advance {     left: -39px;     cursor: w-resize !important;     @include store-sprite(lookbook_left_button); } 

the left-advance function identical right sufficient. suggestions appreciated!

within .lookback-image divs, add block-level element after image , wrap text in block-level element such <p> or <div>. since positioning code seems targeting containers rather images, don't see preventing text appearing beneath images.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -