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
Post a Comment