CODEWITHSUNDEEP
javascriptjqueryhtmlcssfrontend
mrtriangle
mrtriangle

Reputation: 544

Adding text below the images in this JS slider

I am having trouble figuring out how to add text underneath the images in this slider, It's functionality is super simple, but I am having trouble and thinking I may just have to re write it, here is the html and the 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 the css, that may be the 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 is identical so the right is sufficient. Any suggestions are greatly appreciated!

Upvotes: 1

Views: 1406

Answers (1)

cantera
cantera

Reputation: 25015

Within your .lookback-image divs, add a block-level element after the image and wrap the text in a block-level element such as <p> or <div>. Since your positioning code seems to be targeting the containers rather than the images, I don't see anything preventing the text from appearing beneath the images.

Upvotes: 2

Related Questions